Javascript 具有html内容的Lightbox功能（引导缩略图）

请帮助我（初学者）解决一个问题。 我正在用Bootstrap3编码一个站点。我有引导缩略图。 当用户单击缩略图中的特定链接时，它将显示在模式/弹出窗口中。 modals的主要内容将与单击的缩略图相同。 但在模式中会有两个按钮（下一个、上一个），通过单击它们，用户将查看下一个或上一个缩略图。 每个缩略图上都有一个大图像，它隐藏在缩略图视图中，但将显示在模式视图中。 通过单击“下一步”或“上一步”按钮，描述部分的大图像n将相应更改（如旋转木马）。 整个功能就像灯箱一样。我见过不同的jquery lightbox插件，但要么只是带有图像预览， 或重的重量。请帮我解决这个问题。我很熟悉html/css。因此，我可以修复任何css问题，我需要jquery功能。 请不要仅仅用lightbox插件链接来回答，我想使用基本的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>

说明标题

这里有详细的描述。

说明标题

这里有详细的描述。

---

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

其次，阅读Bootstrap的文档

然后，我认为您应该创建一个模式，并在加载时动态更改其内容，以及在按下上一个/下一个图像（按钮）之后。我创建了一个示例，可以在以下位置找到：

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

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

前面代码中使用的

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);
}

---

我建议使用一个专用的lightbox插件，而不是试图强迫引导模式去做你想做的事情。查看Fancybox gallery选项：或Thickbox

<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
});

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