Bootstrap Modal with Images slider

Phần trước mình có làm Bootstrap Modal Lightbox: https://viblo.asia/p/bootstrap-modal-lightbox-WAyK8x9oKxX Dựa trên phần code cũ, mình sẽ tiến thêm một bước nữa đó là có thể next và prev được image ở trong modal. Như vậy là chúng ta sẽ có một lightbox với bootstrap modal, và nó hoạt động được như một slide gallery ảnh đơn giản.

HTML cũ giữ nguyên

<div class="container">
<ul class="row first">
    <li class="col-md-3 col-sm-6 col-xs-12">
        <img alt="Rocking the night away"  src="http://demo.michaelsoriano.com/images/photodune-174908-rocking-the-night-away-xs.jpg">
    </li>
    <li class="col-md-3 col-sm-6 col-xs-12">
        <img alt="Yellow sign"  src="http://demo.michaelsoriano.com/images/photodune-287182-blah-blah-blah-yellow-road-sign-xs.jpg">
    </li>
    ......
</div>

Js cũ:

$(document).ready(function(){
   $('li img').on('click',function(){
        var src = $(this).attr('src');
        var img = '<img src="' + src + '" class="img-responsive"/>';
        $('#myModal').modal();
        $('#myModal').on('shown.bs.modal', function(){
            $('#myModal .modal-body').html(img);
        });
        $('#myModal').on('hidden.bs.modal', function(){
            $('#myModal .modal-body').html(');
        });
   });
})

Nhắc lại trong đoạn code trên ta lấy link ảnh image click vào và add nó vào trong modal với một thẻ <img> được tạo mới. Ngay sau phần tạo mới một thẻ <img> ta sẽ cần thêm hai nút next và prev. Vậy cách làm tương tự

//Start of new code
var index = $(this).parent('li').index();
var html = ';
html += img;
html += '<div style="height:25px;clear:both;display:block;">';
html += '<a class="controls next" href="'+ (index+2) + '">next &raquo;</a>';
html += '<a class="controls previous" href="' + (index) + '">&laquo; prev</a>';
html += '</div>';
//End of new code

var index = $(this).parent('li').index();

Đoạn này có nghĩa là lấy ra thứ tự của thẻ <li> mà chứa cái ảnh được click vào. Tiếp theo template của ta sẽ lưu trong biến "html" với thẻ <img> bên ngoài, các nút control sẽ ở bên dưới. Sau khi lấy được giá trị của biến index, ta sẽ add nó vào nút next và prev. Nghĩa là, nếu ta click vào cái ảnh thứ 2, thì theo logic ở trên, nó sẽ hiện lên một cái modal với 2 nút next, prev. Nút next sẽ có href = 1 + 2. Là 1 bởi vì index sẽ trả về 1 mảng, bắt đầu một mảng là 0, mà ta click vào ảnh thứ 2, tương đương với <li> thứ 2, và tương đương với thứ tự trong mảng là 1 Việc cộng thêm 2 là để dùng ở phần logic bên dưới. Dưới đó mình sẽ giải thick Tương tự add link vào nút prev = index luôn.

Sau đó thay vì add thẻ <img> được tạo ra như phần trước, phần này ta sẽ add biến "html" vào modal-body

$('#myModal .modal-body').html(html);

$(document).on('click', 'a.controls', function(){
   //this is where we add our logic
   var index = $(this).attr('href');
   var src = $('ul.row li:nth-child('+ index +') img').attr('src');
   $('.modal-body img').attr('src', src);
   var newPrevIndex = parseInt(index) - 1;
   var newNextIndex = parseInt(newPrevIndex) + 2;

   if($(this).hasClass('previous')){
     $(this).attr('href', newPrevIndex);
     $('a.next').attr('href', newNextIndex);
   }else{
     $(this).attr('href', newNextIndex);
     $('a.previous').attr('href', newPrevIndex);
   }
   return false;
 });

Tiếp theo ta sẽ lấy sự kiện click vào các nút next và prev để đổi ảnh. Do ban đầu, các nút này không tồn tại, phải mở modal ra, thì template mới được render ra. Chính vì vậy ta sẽ viết nó bên ngoài hàm $(document).ready(function()

Bước trên ta đã lấy được index, tức là vị trí cụ thể của thẻ <li> chứa cái ảnh được click đầu tiên. Ta sẽ dựa vào index này để có thể next và prev đúng ảnh. Lấy lại index từ các nút đã được gán vào href ở trên, sau đó dựa vào index lấy src của ảnh :

var src = $('ul.row li:nth-child('+ index +') img').attr('src');

Ví dụ click vào ảnh thứ 2, nút next sẽ có href = 1 + 2 = 3 Nút preve sẽ có href = 1

Lấy src ảnh dựa theo index của các nút được click, rồi gán đường dẫn ảnh vào thẻ <img> trong modal-body.

Đầu tiên biến newPrevIndex sẽ trừ index đi 1, vì ta sẽ lấy link của ảnh ở trước ảnh được click Biến newNextIndex sẽ bằng biến newPrevIndex + 2

Và 1 chút logic cho phần add link ảnh đúng với nút next hay sẽ là nút prev

if($(this).hasClass('previous')){
     $(this).attr('href', newPrevIndex);
     $('a.next').attr('href', newNextIndex);
   }else{
     $(this).attr('href', newNextIndex);
     $('a.previous').attr('href', newPrevIndex);
   }

Cám ơn các bạn đã xem, mình sẽ update codepen vào phần code của modal lightbox phần trước luôn. Link demo: Update link phần trước : https://codepen.io/adambui/pen/VWoamq