Question

我正在尝试创建一个用缩略图加载的图库。使用fancybox我能够实现这一点，但它会立即加载缩略图而不是相关的图库缩略图。以下是供参考的代码：

<div class="fancybox_container" data-project="<?php echo $post->ID; ?>">
    <?php
        $slider = get_field("slider");
        if($slider):
            foreach($slider as $slide):
                $img = $slide["slide"]["img"];
                $gallery = $post->ID;
                $title = get_the_title();
                echo "<a class='fancybox-thumbs' data-fancybox-group='thumb' rel='gallery-{$gallery}' title='{$title}' href='{$img}'><img src='{$img}' /></a>";
            endforeach;
        endif;
    ?>
</div>

Jquery的：

<script type="text/javascript">
        jQuery(document).ready(function($){
        $('.fancybox-thumbs').fancybox({
                prevEffect : 'none',
                nextEffect : 'none',

                closeBtn  : true,
                arrows    : true,
                nextClick : true,

                helpers : {
                    thumbs : {
                        width  : 100,
                        height : 100
                    },
                     title : {
                                            type : 'inside'
                                      }
                },
                              afterLoad : function() {
                                  this.title = '<h5>Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '</h5>');
                             }
            });

        });

</script>

以下是图库页面的链接。如果我做错了，请纠正。

http://adi.errortree.com/residential/

任何帮助都非常感激。

提前致谢

Answer 1

更改后

echo "<a class='fancybox-thumbs' data-fancybox-group='gallery-{$gallery}' rel='gallery-{$gallery}' title='{$title}' href='{$img}'><img src='{$img}' /></a>"; 到

bower-check-updates

问题得到解决。

fancybox相关的缩略图没有加载，而是加载了库中的所有拇指

1 个答案: