Search code examples
javascriptjquerywordpressshortcode

Lighbox only showing data of the current post in Wordpress


I wanted to show some lightbox funtionality with the use of shortcodes. The code is working fine except for the data shown in the ligthbox. It only shows the data from the latest post in the loop. How can i manage to get lightbox showing the data belonging to the post?

<?php
    // Posts are found
    if ( $posts->have_posts() ) {
        while ( $posts->have_posts() ) :
            $posts->the_post();
            global $post;
            ?>
            <center>
            <div id="su-post-<?php the_ID(); ?>" class="su-post">
                <?php if ( has_post_thumbnail() ) : ?>
                    <a class="su-post-thumbnail" href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
                <?php endif; ?>
                <div class="su-post-excerpt">

                    <!-- Shows the button and the hidden lightbox -->
                    <?php echo do_shortcode ('[su_lightbox type="inline" src="#showInfo"][su_button] Info[/su_button][/su_lightbox]'); ?>
                    <!-- Shows the lightbox if button is clicked with the data -->
                    <?php echo do_shortcode ('[su_lightbox_content id="showInfo"][su_meta key="info" default="Geen tekst"][/su_lightbox_content]'); ?>

                    <?php echo do_shortcode ('[su_lightbox type="inline" src="#showVideo"][su_button] Video[/su_button][/su_lightbox]'); ?>
                    <?php echo do_shortcode ('[su_lightbox_content id="showVideo"][su_video url="{su_meta key=video}"][/su_lightbox_content]'); ?>

                    <?php echo do_shortcode ('[su_lightbox type="inline" src="#showFoto"][su_button] Foto[/su_button][/su_lightbox]'); ?>
                    <?php echo do_shortcode ('[su_lightbox_content id="showFoto"][su_meta key="fotos" default="Geen fotos"][/su_lightbox_content]'); ?>

                </div>
            </div>

            </center>
            <?php
        endwhile;  echo do_shortcode ('[su_lightbox_content id="showInfo"][su_meta key="info" default="Geen tekst"][/su_lightbox_content]'); 
    }
    // Posts not found
    else {
        echo '<h4>' . __( 'Posts not found', 'shortcodes-ultimate' ) . '</h4>';
    }
?>


Solution

  • By adding a counter in the while loop and using the variable in the shortcode SRC and ID fields. I needed unique ID's for each post.

    $n = 0;  /* Outside While Loop */
    
    echo do_shortcode( '[su_lightbox type="inline" src="#showInfo'.$n.'"][su_button] Info[/su_button][/su_lightbox] ');
    echo do_shortcode( '[su_lightbox_content id="showInfo'.$n.'"][su_meta key="info" default="Geen tekst"][/su_lightbox_content]' );
    
    $n++;   /* Inside While Loop */