WordPress.org

Support

Support » How-To and Troubleshooting » Fancybox (lightbox) in a loop??

Fancybox (lightbox) in a loop??

  • 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?

Viewing 3 replies - 1 through 3 (of 3 total)
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Fancybox (lightbox) in a loop??’ is closed to new replies.