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

Question

我正在使用 featherlightGallery add on for featherlight.js。它工作正常，除了当我单击一组中的第一个图像时，图像打开但不是 "gallery"。换句话说，没有 "next" 导航按钮。如果我单击第二张（或后面的）图像，画廊将打开，我可以按预期单击下一步和前进。

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

点击缩略图（绑定class 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 导航，如果它是第一个选择的？

编辑："non-gallery" 问题发生在我首先点击图片集中的任何图片上。

编辑#2： JSFiddle demonstrating the problem

Answer 1

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

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

如果你有多个独立的图库，单独绑定它们，大概是这样的：

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

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

featherlight.js first picture clicked in gallery doesn't have navigation arrows

gallery

featherlight.js