featherlight.js 缩略图进入画廊

Question

我正在绕圈创建一个基于缩略图的媒体查看器（我的示例仅使用图像，但视频可以放在原件上）。主图像的缩略图工作得很好，但我想添加一个“单击主图像查看大版本”。这行得通。但是，理想情况下，我希望有上一个/下一个按钮来循环浏览缩略图中的大尺寸图像。我不希望在单击缩略图时触发羽化叠加。

这是我的 jsfiddle：https://jsfiddle.net/2oux4tcw/4/

这里是我的 JS、html 和 CSS 供参考

HTML

        <div class="largeone" id="bigpic">
        <p class="info">Click a thumbnail</p>
    </div>
    <div class="thumbscon">
        <ul>
            <li><img id="img1" class="thumb galleryitem" data-featherlight-gallery src="https://dummyimage.com/100x100/238943/fff.png&text=Green+Thumbnail"  data-largeone="https://dummyimage.com/600x600/238943/fff.png&text=Green+Largeg" alt="Green" title="Green Image"></li>
            <li><img id="img2" class="thumb galleryitem" data-featherlight-gallery src="https://dummyimage.com/100x100/992323/fff.png&text=Red+Thumbnail"  data-largeone="https://dummyimage.com/600x600/992323/ffffff.png&text=Red" alt="Red" title="Red Image"></li>
            <li><img id="img3" class="thumb galleryitem" data-featherlight-gallery src="https://dummyimage.com/100x100/232399/fff.png&text=Blue+Thumbnail" data-largeone="https://dummyimage.com/600x600/232399/ffffff.png&text=Blue" alt="Blue" title="Blue Image"></li>
        </ul>
    </div>

CSS

.largeone{background: #dedede; border: 1px solid #555; margin-bottom: 12px; height: 600px; width: 600px;}
.thumbscon ul{text-align: center; width: 600px;}
.thumbscon li{display: inline-block; margin-right: 6px; }
p.info{margin: 40% 35%;  display: inline-block; width: 30%; text-align: center;}

JS

var showLargeImage = function(elementId){       
    var el = jQuery("#"+elementId);
    var newMedia = "";
    if(el){     
        var imgsrc      = el.attr("data-largeone"); //large image source
        var imgtitle    = el.attr("title");
        var imgalt      = el.attr("alt");
        newMedia = jQuery("<img>",{src: imgsrc,title:imgtitle,alt:imgalt,id:"bigimage",class:"galleryitem"})
        newMedia.attr("data-featherlight",imgsrc);
        newMedia.attr("data-featherlight-gallery",imgsrc);
    }

    if(newMedia.length >0){
        jQuery("#bigpic").html(newMedia);
    }
}

jQuery(document).ready(function(){

        jQuery(document).on("click","img.thumb",function(e){
            e.preventDefault();
            showLargeImage(jQuery(this).attr("id"));
        });

        jQuery(".galleryitem").featherlightGallery();

    });

关于如何仅从主图像触发画廊操作，但显示缩略图中的 data-largeone 图像的任何指针？

Answer 1

我不确定我完全理解你想要什么，但你不能简单地创建一个隐藏的羽毛画廊，并将对主图像的点击重定向到正确的隐藏缩略图吗？