Добавьте лайтбокс в ретранслятор настраиваемого поля заранее

Question

В галерее, в которую входят таблетки, содержащие динамические c, которые я разработал с использованием заранее настроенного поля, необходимо добавить лайтбокс. Я не могу понять, куда добавить код лайтбокса, так как все мои попытки провалились.

Все соответствующие таблицы стилей и ссылки на файлы сценариев были добавлены в заголовок. php и я не собираюсь публиковать код файла заголовка здесь.

Вот мой код.

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

Пожалуйста, помогите мне добавить лайтбокс в эту галерею

Спасибо

Answer 1

Вы можете легко использовать fancybox. Пожалуйста, просмотрите http://fancyapps.com/fancybox/3/

Вот пример использования:

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