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

Question

plz help me(beginner) to solve a problem. I am coding a site with bootstrap 3. I have bootstrap thumbnail on it. when user will click an specific link in the thumbnail, it will show in an modal/popup. modals primary contents will be same with the thumbnail was clicked. but there will be two button (next, previous) in the modal, by clicking them, user will view the next or previous thumbnail. There is an large image on each thumbnail which is hidden in thumbnail view, but will show in the modal view. by clicking next or previous buttons, the large image, n the description part will change accordingly(like carousel). The whole functionality is like lightbox. I have seen different jquery lightbox plugin, but either they are only with image preview, or heavy weight. Plz help me with the issue. I know the html/css well. so, i can fix any css issue, i need the jquery functionality. Please don't answer with just a lightbox plugin link, i want to use the basic jquery.

Here's the thumbnails in my 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>

And, the modal i want will look like:

<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

Firstly note that you should describe the problem and what has been done so far to solve it when posting a question on SO.

Secondly read Varying modal content based on trigger button at Bootstrap's docs.

And than, i think you should create one modal and change its content dynamically onload, and after pressing the previous / next images (buttons). I create an example that can be found at: http://jsfiddle.net/esLad6x8/

First create a array of object that describe your images / thumbs:

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

Alternatively you could read the above information from your thumb's grid.

html of the modal You should use Bootstrap's modal classes to use the modal jQuery Plugin, see: 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>

A button to open the modal can look like that shown below:

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

The on click event of the above button:

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

The setModalContent function used in the preceding code can look like as follows:

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

And finally create the click events for the previous/next navigation, which only change the content of a already opened modal:

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