featherlight.js 在图库中单击的第一张图片没有导航箭头答案

【问题标题】：featherlight.js first picture clicked in gallery doesn't have navigation arrowsfeatherlight.js 在图库中单击的第一张图片没有导航箭头
【发布时间】：2018-03-16 21:02:45
【问题描述】：

我正在为featherlight.js 使用featherlightGallery 插件。它工作正常，除非当我单击一组中的第一张图像时，图像打开但不是作为“图库”。换句话说，没有“下一步”导航按钮。如果我单击第二张（或更高版本）图像，画廊将打开，我可以单击下一步并按预期前进。

<div class="tidy">
    <div class="pfTitle" data-fid="12">
            Photos-Misc
            <div class="tih"><img src="img/upload.png" class="tup" alt="upload" title="upload"></div>
    </div>
    <div class="tpHolder">
        <div class="tiWrap">
        <div class="tiLink" data-imglink="ANNAWAN/Photos-Misc/100_0708.jpg">
                    <img src="../data/towerFiles/ANNAWAN/Photos-Misc/100_0708.jpg" 
                                class="ssImg Photos-Misc" title="Photos-Misc"                           
                                data-featherlight-gallery="Photos-Misc" 
                                data-featherlight-target-attr="src">
        </div>
        <div class="tiDel"><img src="img/x.png" class="ssImg delTpic" title="delete"></div>
    </div>

    <div class="tiWrap">
        <div class="tiLink" data-imglink="ANNAWAN/Photos-Misc/IMGP6500.JPG">
            <img src="../data/towerFiles/ANNAWAN/Photos-Misc/IMGP6500.JPG" 
                     class="ssImg Photos-Misc" title="Photos-Misc"           
                        data-featherlight-gallery="Photos-Misc" data-featherlight-target-attr="src">
        </div>
        <div class="tiDel"><img src="img/x.png" class="ssImg delTpic" title="delete"></div>
    </div>

    <div class="tiWrap">
        <div class="tiLink" data-imglink="ANNAWAN/Photos-Misc/IMGP6501.JPG">
                <img src="../data/towerFiles/ANNAWAN/Photos-Misc/IMGP6501.JPG" 
                         class="ssImg Photos-Misc" title="Photos-Misc"
                         data-featherlight-gallery="Photos-Misc" data-featherlight-target-attr="src">
        </div>
        <div class="tiDel"><img src="img/x.png" class="ssImg delTpic" title="delete"></div>
    </div>
</div>

当一个缩略图被点击时（绑定到类tiLink），这个函数运行：

// obj is the object (image thumbnail) that as clicked
function tiLink(obj){
        var ilink=$(obj).data("imglink");
        if( !ilink ){return;}

        // var viewLink="../data/towerFiles/"+ilink;        
        var gal=$(obj).find("img").attr("title");

        // single view
        //$.featherlight(viewLink); 

        // gallery view
        $("."+gal).featherlightGallery({
                previousIcon: '&#9664;',     /* Code that is used as previous icon */
                nextIcon: '&#9654;',         /* Code that is used as next icon */
                galleryFadeIn: 100,          /* fadeIn speed when slide is loaded */
                galleryFadeOut: 300          /* fadeOut speed before slide is loaded */
            });     
}

另一个注意事项：图像数据是动态加载和创建的。为什么第一张图片先选后没有prev/next导航？

编辑：“非图库”问题发生在我在集合中首先单击的任何图片上。

编辑#2： JSFiddle demonstrating the problem

【问题讨论】：

标签： gallery featherlight.js

【解决方案1】：

看起来你把事情复杂化了。你有一个画廊，只需绑定一次。像这样调用一次：

$('.tiLink').featherlightGallery({targetAttr: 'data-imglink', ...})

如果你有多个独立的画廊，分别绑定它们，可能是这样的：

$('.gallery').each(function() { $(this).find('.item').featherlightGallery(...) })

【讨论】：

其实有多组图片。上面的“tidy”类将被不同组的图片复制大约 10 次。
我添加了一个 jsFiddle 来演示问题
是的。创建对象后，我必须将它们全部绑定。在点击图片之前我没有绑定它们，所以第一个没有被绑定。