WordPress.org

Ready to get started?Download WordPress

Forums

Fancybox (lightbox) in a loop?? (4 posts)

  1. Blindacme
    Member
    Posted 1 year ago #

    I am trying to get the light box to load within the loop by clicking on an anchor tag.. I can get the lightbox to show but it always displays the content of the first "post?". In short all I need is for a way to add 1 to each item in the loop. So my code looks something like this:

    <a href="#more-info" class="fancybox">Open Me</a>
    
    <div id="more-info" style="display:none; width:100%;">
    <p>this would be my content</p>
    </div>

    So what is happening is each item in the loop gets an anchor tag linking to #more-info, and has a div id of "more-info". Because of this the content being pulled into the light box is always the first item of the loop.

    I need a way for it to run more like this: (adding 1 to each item in loop)

    <a href="#more-info" class="fancybox">Open Me</a>
    
    <div id="more-info" style="display:none; width:100%;">
    <p>this would be my content</p>
    </div>
    
    <!-- item 2 -->
    <a href="#more-info1" class="fancybox">Open Me</a>
    
    <div id="more-info1" style="display:none; width:100%;">
    <p>this would be my content for 2nd item</p>
    </div>
    
    <!-- item 3 -->
    <a href="#more-info2" class="fancybox">Open Me</a>
    
    <div id="more-info2" style="display:none; width:100%;">
    <p>this would be my content for item 3</p>
    </div>

    and so on until the loop runs out.

    I was trying <?php $s = 0; ?> then my tags looked like this:

    <a href="#<?php echo 'more-info'. $++s; ?>" class="fancybox">Open Me</a>
    
    <div id="<?php echo 'more-info'. $++s; ?>" style="display:none; width:100%;">
    <p>this would be my content for item 3</p>
    </div>

    obviously that is wrong by I cannot seem to get it right without things going haywire.. any suggestions?

  2. holisticdesigns
    Member
    Posted 1 year ago #

    I have just come up with a similar issue and fixed it by adding the following to the end of the links: <?php echo the_ID(); ?>

    The fancybox link has the following:

    <a class="fancybox" href="#inline<?php echo the_ID(); ?>" title="<?php the_title(); ?>">

    The lightbox information has the following:

    <div id="inline<?php echo the_ID(); ?>" style="width:360px;display: none;">

    Hope that helps someone

  3. mark.reckard
    Member
    Posted 10 months ago #

    Same problem for me. No matter where I click it only displays the info for the first post in fancybox. Haven't been able to find much in the way of help on this. Anyone?

  4. WPyogi
    Volunteer Moderator
    Posted 10 months ago #

    @mark.reckard - you'll be more likely to get help if you start your own thread and include more info in your post - please see:

    http://codex.wordpress.org/Forum_Welcome#Where_To_Post

    http://codex.wordpress.org/Forum_Welcome#Include_as_much_information_as_possible

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags