带html内容的灯箱functinality（bootstrap缩略图）

Question

plz帮我（初学者）解决一个问题。 我正在用bootstrap编码一个站点3.我有bootstrap缩略图。 当用户点击缩略图中的特定链接时，它将以模式/弹出框显示。 modals主要内容将与被点击的缩略图相同。 ，但模式中会有两个按钮（下一个，上一个），通过点击它们，用户将查看下一个或上一个缩略图。 缩略图中隐藏的每个缩略图都有一个大图像，但会显示在模态视图中。通过点击下一个或上一个按钮，大图像，n描述部分将相应地改变（如旋转木马）。 整个功能类似于lightbox。我看到了不同的jquery lightbox插件，但他们只是与图像预览， 或沉重的重量。 Plz帮助我解决这个问题。我很了解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> 

而且，我想会像模态：

<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上发布问题时，迄今为止已经做了什么来解决它。

其次在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的模式 你应该用引导的模式类使用模式的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); 
} 

最后创建了一个/下一个导航点击事件，只改变一个已经打开的模式内容：

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