OnFinish issue

classic Classic list List threaded Threaded
3 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

OnFinish issue

Ayor
Hello,

First of all sorry for my english.

I am displaying a gallery and each images have their own social related buttons.

These buttons are wrapped  within a hidden div (.infosu) that is appended to the title into the div (#sb-title-inner) when opening Shadowbox .

The problem is when using onFinish my function is working but it's removing the content of (.infosu) so it's just working the first time because then the div is empty.
I don't understand why.

Here's some exemple with my html and js code:

My images have all their related buttons which are shown here but are originally hidden.

My images have all their related buttons which are shown here but are originally hidden.

When I open Shadowbox the div containing the social links is appended but in the same time it's disapearing from the DOM where they were originally into (.infosu)

When I open Shadowbox the div containing the social links is appended but in the same time it's disapearing from the DOM where they were originally into (.infosu)



When I open image 1 and 2 for the first time it's ok but if I go back to image 1 my HTMLcollection is empty.


Here is me HTML :

           {% for a in images %}

           <div class="item" id="{{ loop.index }}">

            <a title="{{ a.pt_title~' - '~a.pt_description }}" class="gallery fullscreen" href="{{ 'display/img/fullscreen/'~a.pt_originurl }}" rel="shadowbox[{{ page }}]">
               
                img class="x2" src="" data-file="{{a.pt_originurl}}" alt="" data="" title=""  => (tags are removed cos this line is not displaying in my message)

                    <div class="infosu" id="infosu{{ loop.index }}">
             
                        <button id="trigger" href="#myModal" role="button" class="btn btn-mini btn-inverse" data-toggle="modal" data-pic="{{ a.url }}"> Mail</button>
                           
                            <div class="facebook">
                                <iframe
                                    src="{{a.facebook}}"
                                    scrolling="no"
                                    frameborder="0"
                                    style="border:none;
                                        overflow:hidden;
                                        width:60px;
                                        height:35px;"
                                    allowTransparency="true"></iframe>     
                            </div>

                            <div class="twitter">
                                <iframe
                                    allowtransparency="true"
                                    frameborder="0"
                                    scrolling="no"
                                    src="{{a.twitter}}"
                                    style="width:60px; height:21px;"></iframe>
                            </div>

                    </div>
           

               <div class="infos">{{a.pt_title}}</div>

        </div>
    {% endfor %}


And my JS file :

Shadowbox.init({
               
            handleOversize: 'resize',
            displayCounter:false,
            continuous:true,
            showOverlay:true,
            overlayOpacity:0.9,
            onFinish: getSocial
});

function getSocial(){

        var social=Shadowbox.getCurrent();
        console.log(social);
                var title=social.title;
                var infosu=social.link.children[1];
                console.log(infosu.children);
                $('#sb-title-inner').append(infosu.children);
               
}

I don't understand how to pass a div containing social buttons next to the title,
and why $('#sb-title-inner').append(infosu.children); is removing the content from .infosu ?

Can someone please help me?

Thank you very much.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: OnFinish issue

Ayor
It's working like this but only if i display the buttons in the thumbnail, and I don't want to.
I want them to be in display none and appear when shadowbox is open.
So how to clone a hidden content.
Is there another way to perform this cos I feel like i'am doing it bad.

        Shadowbox.init({

            handleOversize: 'resize',
            displayCounter:false,
            continuous:true,
            showOverlay:true,
            overlayOpacity:0.9,
            onFinish: getSocial
});

function getSocial(){

        var social=Shadowbox.getCurrent();
        console.log(social);
                var title=social.title;
                var infosu=social.link.children[1];
                console.log(infosu.children);
               
        var classe = social.link.children[1].attributes[0].nodeValue;

        var a = $('#'+classe).contents().clone();

        $('#sb-title-inner').append(a);
 
}
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: OnFinish issue

Ayor
It's working now , it's was just the wrong key in attributes[].

I am still wondering how to make it in a better way.

If anyone has some advices or suggestions, i'll be glad to take them.

Thanks.
Loading...