Question

I have a page with five links. Each link opens up a lightbox (using prettyphoto) with two images (the user can toggle between these) and a paragraph.

I have a simple Jquery script that toggles between the two images.

See jsfiddle.

$(document).ready(function() {
  $('a.unactive').live('click', function(){
    $('a.button').toggleClass('unactive');
    $('div.show').toggle('blind','',500);
    console.log('clicked');
});

});​

This function works fine. The problem results when the user toggles between the images in the lightbox and when they close the lightbox and open a new one, both images are displayed. Please see an example of the problem here: jsfiddle.

In sum, I cannot switch between lightboxes on a page and have this toggle function correctly. I can only toggle between two images in a single lightbox without having to refresh the page.

My question is how I can modify this Jquery function so it will work when the user opens and closes different lightboxes on a page? Is there some reset I can use or should there be a modification to the HTML structure? Or is there an alternative method of toggling images?

Thanks very much.

Answer 1

Sorry, I don’t agree with the inferences drawn so far. I think there is a bug in prettyphoto. When you show / hide, it creates a new container and copies the code to it. During copy, css display:none property of div is being lost.

In fact all the time, when you think you are working with 2 elements (two link or two divs) you are working with 4. 2 original and 2 cloned.

A simple workaround is to work only with cloned:

$(document).ready(function() {
    $('a.button.unactive', "div.pp_content_container").live('click', function() {
        $('a.button', "div.pp_content_container").toggleClass('unactive');
        $('div.show', "div.pp_content_container").toggle('blind','',500);
        console.log('clicked');
    });
});​

See it working: http://jsfiddle.net/HU8zx/114/