Halo semua 🙂 , ketemu lagi dengan saya, kali ini saya akan bagikan tutorial mengenai Cara Membuat Lightbox Dengan Bootstrap, sebenarnya banyak sekali cara yang bisa dipakai, namun kali ini saya akan membuatnya dengan bootstrap, berikut langkah-langkahnya.
Sebelumnya silahkan kalian siapkan beberapa gambar untuk demo lightbox nya, setelah itu kalian bisa salin kode berikut pada file index di bootstrap nya.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
<div class="container"> <div class="row"> <div class="row"> <div class="col-xs-6 col-sm-4"> <a class="lightbox" title="Image 1" href="#"> <img class="thumbnail" src="//lorempixel.com/240/140/nature/1"> </a> </div> <div class="col-xs-6 col-sm-4"> <a class="lightbox" title="Image 2" href="#"> <img class="thumbnail" src="//lorempixel.com/240/140/nature/2"> </a> </div> <div class="col-xs-6 col-sm-4"> <a class="lightbox" title="Image 3" href="#"> <img class="thumbnail" src="//lorempixel.com/240/140/nature/3"> </a> </div> <div class="col-xs-6 col-sm-4"> <a class="lightbox" title="Image 4" href="#"> <img class="thumbnail" src="//lorempixel.com/240/140/nature/4"> </a> </div> <div class="col-xs-6 col-sm-4"> <a class="lightbox" title="Image 5" href="#"> <img class="thumbnail" src="//lorempixel.com/240/140/nature/5"> </a> </div> <div class="col-xs-6 col-sm-4"> <a class="lightbox" title="Image 6" href="#"> <img class="thumbnail" src="//lorempixel.com/240/140/nature/6"> </a> </div> <div class="col-xs-6 col-sm-4"> <a class="lightbox" title="Image 8" href="#"> <img class="thumbnail" src="//lorempixel.com/240/140/nature/7"> </a> </div> <div class="col-xs-6 col-sm-4"> <a class="lightbox" title="Image 9" href="#"> <img class="thumbnail" src="//lorempixel.com/240/140/nature/8"> </a> </div> <div class="col-xs-6 col-sm-4"> <a class="lightbox" title="Image 10" href="#"> <img class="thumbnail" src="//lorempixel.com/240/140/nature/9"> </a> </div> </div> </div> </div> <div tabindex="-1" class="modal fade" id="lightbox" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button class="close" type="button" data-dismiss="modal">×</button> <h3 class="modal-title">Heading</h3> </div> <div class="modal-body text-center"> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> |
Nah, pada bagian img silahkan kalian isikan dengan gambar yang sudah disiapkan tadi, di atas saya menggunakan gambar secara online yah, setelah itu tambahkan kode CSS3 berikut.
|
1 |
.lightbox .thumbnail{margin: 1em auto;} |
Kemudian tambahkan lagi kode Javascript berikut ini.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
$('.lightbox').click(function() { var title = $(this).attr('title'); var src = $(this).children('img').attr("src").replace('/240/140/', '/480/280/'); var alt = $(this).children('img').attr("alt") || ""; var $img = $('<img class="center-block img-responsive" alt="' + alt + '" src="' + src + '">'); $('.modal-title').html(title); $('.modal-body').html('<p>Loading...</p>'); $('#lightbox').modal({ show: true }); $img.load(function() { $('.modal-body').html($img); }) }); |
Kalo sudah semua, simpan terlebih dahulu, kemudian jalankan dibrowser masing-masing, dan lihat hasilnya.
Selesai sudah tutorial mengenai Cara Membuat Lightbox Dengan Bootstrap, semoga bermanfaat, sampai ketemu di tutorial-tutorial selanjutnya.