具有html内容的灯箱功能（引导程序缩略图）

Question

请帮助我（初学者）解决问题。我正在使用Bootstrap 3编码一个站点。我上面有bootstrap缩略图。当用户单击缩略图中的特定链接时，它将以模式/弹出窗口的形式显示。模态的主要内容将与单击缩略图相同。但是模式中将有两个按钮（上一个，下一个），单击它们，用户将查看下一个或上一个缩略图。每个缩略图上都有一个大图像，该图像隐藏在缩略图视图中，但会在模式视图中显示。通过单击“下一个”或“上一个”按钮，大图像中的描述部分将相应更改（例如轮播）。整个功能就像灯箱一样。我见过不同的jquery灯箱插件，但是它们要么只带有图像预览，或重物。请帮我解决这个问题。我很了解html / css。因此，我可以解决任何CSS问题，我需要jquery功能。请不要仅用灯箱插件链接来回答，我想使用基本的jquery。

这是我的html中的缩略图：

<div class="container" id="lightbox">
<div class="row">
    <div class="lightbox-thumbs-wrap">
        <div class="col-xs-12 col-sm-6 col-md-3">
            <div class="thumbnail">
                <div class="tmb-outer">
                    <div class="tmb-gray">
                        <img src="img/xyz/small-icon.png">
                        <h3>Description heading</h3>
                        <p>
                            Description details here.
                        </p>
                    </div>
                    <a class="tmb-button">Click to open lightbox</a>

                    <img src="img/xyz/large-image1.png"> <!-- this image hidden in thumbnail, but will show only in modal -->
                </div>                    
            </div>
        </div> <!-- ********* end thumb *********** -->   
        <div class="col-xs-12 col-sm-6 col-md-3">
            <div class="thumbnail">
                <div class="tmb-outer">
                    <div class="tmb-gray">
                        <img src="img/xyz/small-icon2.png">
                        <h3>Description heading2</h3>
                        <p>
                            Description2 details here.
                        </p>
                    </div>
                    <a class="tmb-button">Click to open lightbox</a>

                    <img src="img/xyz/large-image2.png"> <!-- this image hidden in thumbnail, but will show only in modal -->
                </div>                    
            </div>
        </div> <!-- ********* end thumb *********** --> 
    </div>
</div>

而且，我想要的模态将看起来像：

<div class="modal">
<div class="overlay"></div>
<div class="modal-wrapper">
    <a href="#">click to close modal</a>
    <div class="container-fluid">
        <div class="col-sm-12 col-md-5">
            <div class="tmb-gray">
                <img src="img/xyz/small-icon.png">
                <h3>Description heading</h3>
                <p>
                    Description details here.
                </p>
            </div>
        </div>
        <div class="col-sm-12 col-md-7">
            <img src="img/xyz/large-image1.png"> <!-- large slider image, it was hidden in thumbnail -->

            <a class="next-img"><img src="img/xyz/next.png"></a>
            <a class="prev-img"><img src="img/xyz/prev.png"></a>
        </div>
    </div>
</div>

Answer 1

首先请注意，当您在SO上发布问题时，您应该describe the problem，并且到目前为止已经完成了什么操作来解决它。

其次阅读Bootstrap的Varying modal content based on trigger button。

而且，我认为您应该创建一个模态并在加载上一个动态模态时，并在按下上一个/下一个图像（按钮）之后更改其内容。我创建一个可以在以下位置找到的示例：http://jsfiddle.net/esLad6x8/

首先创建一个描述您的图像/拇指的对象数组：

var images = new Array();
for (var i=0; i<10; i++) {
images.push({img: 'http://dummyimage.com/600x400/000/fff&text=image' + i, thumb: 'http://dummyimage.com/100x100/000/fff&text=thumb' + i, head:'heading' + i, description:'Description' + i + ' details here.'}); 
}

或者，您可以从拇指的网格中读取以上信息。

模态的html您应该使用Bootstrap的模态类来使用模态jQuery插件，请参见：http://getbootstrap.com/javascript/#modals

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
      </div>
      <div class="modal-body">
      <div class="col-sm-12 col-md-5">
            <div class="tmb-gray">
                <img src="">
                <h3>Description heading</h3>
                <p>
                    Description details here.
                </p>
            </div>
        </div>
        <div class="col-sm-12 col-md-7">
            <img src="" class="img-responsive"> <!-- large slider image, it was hidden in thumbnail -->


            <a class="prev-img btn btn-primary">Previous</a>
            <a class="next-img btn btn-primary">Next</a>
        </div>
      </div>
      <div class="modal-footer">&nbsp;</div>
    </div>
  </div>
</div>

打开模态的按钮如下图所示：

<button type="button" class="openmodal btn btn-primary btn-lg" data-thumb="0">
  First Thumb
</button>

以上按钮的点击事件：

$('.openmodal').on('click',function(){
    setModalContent($( this ).data('thumb'));
    $('#myModal').modal('show');//pop up modal
});

以上代码中使用的setModalContent函数如下所示：

function setModalContent($thumbNumber) {
$('#myModal .tmb-gray h3').text(images[$thumbNumber].head);
$('#myModal .tmb-gray h3 + p').text(images[$thumbNumber].description);
$('#myModal .tmb-gray > img').attr('src',images[$thumbNumber].thumb);
$('#myModal .modal-body img').last().attr('src',images[$thumbNumber].img);
/* set next and previous buttons */
$('.prev-img').data('thumb',($thumbNumber - 1 >= 0) ? $thumbNumber - 1 : images.length - 1);
$('.next-img').data('thumb',($thumbNumber + 1 < images.length) ? $thumbNumber + 1 : 0);
}

最后为上一个/下一个导航创建click事件，这只会更改已经打开的模式的内容：

$('.modal').on('click','.prev-img',function(){ setModalContent($( this ).data('thumb'));});
$('.modal').on('click','.next-img',function(){ setModalContent($( this ).data('thumb'));});

Answer 2

Bass Jobsen-非常感谢-您的代码有效-一个好主意！