Question

I’m using the http://buckwilson.me/lightboxme/ script.

Here is the HTML (there are multiple .team-member on the page):

<div class="team-member">
    <div class="featured-photo"></div>
        <h3></h3>
        <h4></h4>
    <div class="member-info">
        <h5></h5>
        <p class="member-photo"></p>
    </div>
</div>

Here is my JS:

<script>
jQuery('.team-member').click(function() {
    jQuery(this).children('.member-info').lightbox_me({
        centered: true
    });
});
</script>

I can click on each .team-member and the lightbox pops up and disappears when I click the page…just like it should, however I can only do that once. The lightbox doesn’t pop up a second time if I click again. Any way around this?

Answer 1

This is happening because lightbox_me is moving the DOM element out of its initial location and appending it to the body prior to applying its styling. This is similar to how jQuery dialog behaves if you are familiar with that.

Because the selection is dependent on the parenting hierarchy, the next time the click event occurs, jQuery(this).children('.member-info') returns no matching objects and the call to lightbox_me fails.

You can get around this by cloning the object before lightboxing it and then setting the destroyOnClose flag to true.

jQuery('.team-member').click(function() {
    jQuery(this).children('.member-info').clone().lightbox_me({
        centered: true,
        destroyOnClose: true
    });
});

jsfiddle