javascript - 带有 html 内容的灯箱功能(引导缩略图)

Question

请帮助我(初学者)解决问题。我正在使用 bootstrap 3 编写一个网站。我上面有 bootstrap 缩略图。当用户单击缩略图中的特定链接时，它将显示在模式/弹出窗口中。模态的主要内容将与单击的缩略图相同。但模式中有两个按钮(下一个，上一个)，通过单击它们，用户将查看下一个或上一个缩略图。每个缩略图上都有一个大图像，该图像隐藏在缩略图 View 中，但会显示在模态视图中。通过单击下一个或上一个按钮，大图像、描述部分将相应更改(如轮播)。整个功能就像灯箱一样。我见过不同的 jquery lightbox 插件，但它们要么只有图像预览，或重物。请帮我解决这个问题。我很了解 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

首先请注意，您应该 describe the problem以及到目前为止在 SO 上发布问题时已采取哪些措施来解决该问题。

再读一下Varying modal content based on trigger button在 Bootstrap 的文档中。

而且，我认为您应该创建一个模式并在加载时动态更改其内容，并在按下上一张/下一张图像(按钮)后。我创建了一个示例，可以在以下位置找到: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>

上述按钮的on click事件:

$('.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);
}

最后为上一个/下一个导航创建点击事件，该事件仅更改已打开模式的内容:

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