Question

这就是我想要做的，但我不知道如何做。我看过画廊插件和模态与旋转木马的合并，但似乎都没有做我想要的。

我的网站上有一个缩略图网格，点击后我想打开一个标准的bootstrap模式。一旦模态打开，我希望能够链接到下一个项目的内容，而无需关闭/重新打开模态。因此，单击“下一个/上一个”将循环浏览图库/网格中的项目。

此时我没有代码向您展示。但是这个插件接近我想做的事情： http://blueimp.github.io/Bootstrap-Image-Gallery/

除了我不希望它打开完整的浏览器宽度/高度，并且它宁愿它的行为更像标准的bootstrap模式。此外，他引导模态让我对模态的内容有了更多的控制，而不是将其全部剥离并简单地将图像作为内容放置。

有什么想法？帮助赞赏。

Answer 1

你可以这样做：

缩略图：

<div id="thumbHolder">
    <img class="thumb" src="thumbnail.jpg" data-src="largeImage.jpg">
    <img class="thumb" src="thumbnail2.jpg" data-src="largeImage2.jpg">
    <img class="thumb" src="thumbnail3.jpg" data-src="largeImage3.jpg">
</div>

弹出式样式：

#popUp{
    width:500px;
    height: 500px;
    position: absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
    background:#ffffff;
    display:none;
}

弹出式HTML

<div id="popUp">
    <img class="popImg" src="">
    <button class="prev">Prev</button>
    <button class="next">Next</button>
</div>

的jQuery

    var index = 0;
    var imageCount = $('.thumb').length
    $(document).ready(function(){
    $('.thumb').click(function(){
        index = $('.thumb').index($(this));
        var src = $(this).attr('data-src');
        $('.popImg').attr('src', src);
        $('#popUp').fadeIn();  
    });
    $('.next').click(function(e){
        e.preventDefault();
        if (index < imageCount){
            index += 1;
        }
        var nextElement= $('.thumb')[index];
        var src = $(nextElement).attr('data-src');
        $('.popImg').attr('src', src);
    });
    $('.prev').click(function(e){
        e.preventDefault();
        if(index > 0){
            index -= 1;
        }
        var nextElement= $('.thumb')[index];
        var src = $(nextElement).attr('data-src');
        $('.popImg').attr('src', src);
    });
});

使用twitter bootstrap模式创建包含图像/内容的图库

1 个答案: