Question

我正在使用featherlightGallery添加featherlight.js。它工作正常，除非我点击一组中的第一张图像，图像打开但不作为“图库”。换句话说，没有“下一个”导航按钮。如果我单击第二个（或更晚的）图像，则会打开图库，我可以按预期单击下一个和前进。

<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 */
            });     
}

另一个注意事项：图像数据是动态加载和创建的。如果第一张图像首先被选中，为什么第一张图像不具有上一个/下一个导航？

编辑：“非图库”问题出现在我在集合中首先点击的任何图片中。

编辑＃2：编辑＃2： JSFiddle demonstrating the problem

Answer 1

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

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

如果您有多个独立的画廊，请单独绑定它们，可能类似于：

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

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

1 个答案: