Add a lightbox inside advance custom field repeater

Question

The gallery which including dynamic pills I've developed using advance custom field needs to add a lightbox. I can't figure out where to add the code of lightbox since all my attempts were failed.

All the relevant stylesheets and script files links has been added to header.php and I'm not gonna post the header file code in here.

Here is my code.

 <div class="gallery pull-left width-wide">
                        <!-- Menu -->
                        <div class="cat-menu pull-right padding-right-20">
                            <!--Categories : -->

                         <!-- <a href="#showall" title="Show All" class="active">Show All</a>
                                                        <a href="#Category1" title="Category 1 " >Category 1 </a>
                                                        <a href="#Category2" title="Category 2" >Category 2</a>
                                                        <a href="#Category3" title="Category 3" >Category 3</a> -->

                        <ul class="nav nav-pills">
                                <li class="active"><a data-toggle="pill" href="#showall">Show All</a></li>
                                <li><a data-toggle="pill" href="#Category1">Category 1</a></li>
                                <li><a data-toggle="pill" href="#Category2">Category 2</a></li>
                                <li><a data-toggle="pill" href="#Category3">Category 3</a></li>
                        </ul> 
                        </div><!-- // Menu -->

                        <!-- Gallery Items -->

                <div class="gallery-items pull-left width-wide">

                <div class="tab-content">
                        <div id="showall" class="tab-pane fade in active">
                                <?php 
                                    if( have_rows('show_all_images') ):
                                    while ( have_rows('show_all_images') ) : the_row();

                                    //vars
                                    $image = get_sub_field('sa_image');
                                    $link = get_sub_field('link');
                                ?>
                                <?php if( $link ): ?>
                                    <a href="<?php echo $link; ?>">
                                <?php endif; ?>

                                <img src="<?php echo $image ?>" width="344" height="215" style="cursor:pointer"/>

                                <?php if( $link ): ?>
                                </a>
                                <?php endif; ?>
                                <?php endwhile; ?>
                                <?php endif; 

                                ?>     
                        </div>   

                         <div id="Category1" class="tab-pane">
                           <?php 
                                    if( have_rows('catagory_one_image') ):
                                    while ( have_rows('catagory_one_image') ) : the_row();

                                    //vars
                                    $image = get_sub_field('cat_img');
                                    $link = get_sub_field('link');
                                ?>
                                <?php if( $link ): ?>
                                    <a href="<?php echo $link; ?>">
                                <?php endif; ?>


                                <img src="<?php echo $image ?>" width="344" height="215"/>

                                <?php if( $link ): ?>
                                </a>
                                <?php endif; ?>
                                <?php endwhile; ?>
                                <?php endif; 

                                ?>

                    </div>

                         <div id="Category2" class="tab-pane">
                             <?php 
                                    if( have_rows('catagory_two_image') ):
                                    while ( have_rows('catagory_two_image') ) : the_row();

                                    //vars
                                    $image = get_sub_field('cat_two_img');
                                    $link = get_sub_field('link');
                                ?>
                                <?php if( $link ): ?>
                                    <a href="<?php echo $link; ?>">
                                <?php endif; ?>

                                <img src="<?php echo $image ?>" width="344" height="215" />

                                <?php if( $link ): ?>
                                </a>
                                <?php endif; ?>
                                <?php endwhile; ?>
                                <?php endif; 

                                ?>                    
                    </div>



                         <div id="Category3" class="tab-pane">
                            <?php 
                                    if( have_rows('catagory_three_image') ):
                                    while ( have_rows('catagory_three_image') ) : the_row();

                                    //vars
                                    $image = get_sub_field('cat_three_img');
                                    $link = get_sub_field('link');
                                ?>
                                <?php if( $link ): ?>
                                    <a href="<?php echo $link; ?>">
                                <?php endif; ?>

                                <img src="<?php echo $image ?>" width="344" height="215" />

                                <?php if( $link ): ?>
                                </a>
                                <?php endif; ?>
                                <?php endwhile; ?>
                                <?php endif; 

                                ?>
                         </div>

                     </div>
                        </div><!-- // Gallery Items -->
                    </div><!-- // Gallery -->

Kindly help me to add a lightbox to this gallery

Thank You

Answer 1

you can use fancybox easily.Please review http://fancyapps.com/fancybox/3/

Here is example using:

<?php if(get_field('gallery')):
echo '<div class="gallery__images">';

$i == 0;
while(has_sub_field('gallery')):
    $i++;
    $parent_image = get_sub_field('parent_image');
    echo '<div class="gallery_inner_image">';
        echo '<div class="holder">';
            echo '<a class="fancybox" rel="group'.$i.'" href="'.$parent_image['url'].'">';
                echo '<img src="' . $parent_image['sizes']['gallery-thumb'] . '" alt="' . $parent_image['alt'] . '" />';
            echo '</a>';
        echo '</div>';
        echo '<div class="gallery__caption">'.get_sub_field('caption').'</div>';

        if(get_sub_field('gallery_images')):
            while(has_sub_field('gallery_images')):
            echo '<a class="fancybox" rel="group'.$i.'" href="';
            echo get_sub_field('gallery_image')['sizes']['large'];
            echo '" /></a>';
            endwhile;
        endif;
    echo '</div>';
endwhile;

echo '</div>'; endif; ?>