Grow your CSS skills. Land your dream job.

Lightbox in a wordpress loop

  • # July 6, 2013 at 7:52 am

    Hi, I am trying to make a really simple light box for a wordpress site and I am having trouble making it work. Basically I know why it isn’t working but not how to fix it. I have all the anchor links with the same class and when I click on the link with that class, the window pops up which is good. However it is always the last post in the loop that is shown because all the windows are being shown and the last one is on top. How can I make it so that only the window from the link clicked pops up and not all of the links with that class?

    Here is my code:

    < ?php while ( $query->have_posts() ) : $query->the_post(); ?>
    “>
    “; the_field(‘description’); ?>

    Close
    “; the_field(‘description’); ?>

    Close

    < ?php endwhile; ?>

    < ?php else : ?>
    < ?php echo "No Posts!"; ?>

    < ?php endif; ?>

    Thanks for any help,
    Matt

    # July 6, 2013 at 9:32 am

    Sorted, changed the code to

    $(document).ready(function(){
    $(“a.stillPost”).click(function(){
    $(“.lightboxBG”).fadeIn(300);
    $(this).next().fadeIn(300);
    return false;
    })
    $(“a.close-panel”).click(function(){
    $(“.lightboxBG, .stillLightBox”).fadeOut(300);
    })
    $(“.lightboxBG”).click(function(){
    $(“.lightboxBG, .stillLightBox”).fadeOut(300);
    })
    })

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".