Question

我将绕圈创建基于缩略图的媒体查看器（我的示例只使用图片，但视频可以放在原始图片上）。主图像的缩略图工作得很好，但我想添加一个＆＃34;点击主图像以查看大版本＆＃34;。这有效。但是，理想情况下，我希望使用上一个/下一个按钮来循环显示缩略图中的大尺寸图像。我不希望在点击缩略图时触发羽毛灯覆盖。

这是我的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();

    });

有关如何仅从主图像触发图库操作的任何指针，但是从缩略图显示数据大图像？

Answer 1

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

featherlight.js缩略图进入图库

1 个答案: