Javascript 在高级自定义场转发器内添加一个灯箱

画廊，其中包括动态药丸我已经开发使用先进的自定义领域需要添加一个灯箱。我不知道在哪里添加lightbox的代码，因为我所有的尝试都失败了

所有相关的样式表和脚本文件链接都已添加到header.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 -->

请帮我添加一个灯箱到这个画廊

---

谢谢

您可以轻松使用fancybox。请查看

以下是使用以下方法的示例：

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

---

是您要单击的图像，然后在灯箱中显示得更大吗？不是，是图像的全尺寸=>1140px*400px