Responsive Photo Galeri Menggunakan Bootstrap Framework

, 3 comments
Untuk mengabadikan momen-momen penting atau bahkan untuk mempersentasikan sebuah product yang anda jual, mungkin anda memerlukan sebuah galeri photo. Untuk membuat Responsive Photo Galeri Menggunakan Bootstrap Framework bukanlah hal yang sulit, dengan catatan anda telebih dahulu memahami skema dari Photo Galeri tersebut.

Karena di sini kami akan membuat Responsive Photo Galeri Menggunakan Bootstrap Framework, tentunya anda harus memahami terlebih dahulu tentang sistem Kolom Pada Bootstrap Framework sebelum anda memulai pada langkah selanjutnya, karena kita akan mengacu pada sistem Kolom Pada Bootstrap Framework tersebut.

Ok... untuk mempersingkatnya, saya asumsikan anda telah memahami tentang bootstrap grid serta telah menerapkan bootstrap.min.css dan bootstrap.min.js pada template yang anda gunakan.

Skema Responsive Photo Galeri Menggunakan Bootstrap Framework

Secara sederhana, responsive photo galeri dapat kita buat dengan skema sebagai berikut.

<div class="container">
<ul>
<li><img src="photo1.jpg"/></li>
... photo 2 ...
... photo 3 ...
</ul>
</div>
Simpan project photo galeri anda lalu coba lihat lewat browser, maka hasilnya akan tampak seperti dibawah.

Responsive Photo Galeri
Hasilnya masih terlihat tanpa style layout photo galerinya. Sekarang kita tambahkan class pada bootstrap untuk mendapatkan layout photo galeri yang kita inginkan. Pertama kita tambahkan class "row" pada tag ul, untuk list itemnya kita tambahkan class "col-lg-2″, "col-md-2″, "col-sm-3″ dan "col-xs-4″.

<div class="container">
<ul class="row">
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"><img src="photo1.jpg"/></li>
... photo 2 ...
... photo 3 ...
</ul>
</div>

Save project anda, lalu lihat hasilnya kembali lewat browser, maka akan terlihat layout seperti dibawah.
Responsive Photo Galeri Sampai pada tahap ini, sudah terlihat layout yang kita inginkan dan tentunya responsive ( silahkan resize browser anda ). Sekarang kita tinggal menambahkan css style.

ul {
padding:0 0 0 0;
margin:0 0 0 0;
}
ul li {
list-style:none;
margin-bottom:25px;
}
ul li img {
cursor: pointer;
}
Langkah selanjutnya kita membuat lightbox untuk menampilkan image dengan ukuran yang sebenarnya, ketika kita mengklik thumbnail pada Responsive Photo Galeri. Skema lightbox yang kami gunakan disini memanfaatkan modal pada bootstrap framework yang dapat anda buat seperti contoh dibawah.

<div class="modal fade" id="KutubaruModal" tabindex="-1" role="dialog" aria-labelledby="KutubaruModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
</div>
</div><!-- modal-content -->
</div><!-- modal-dialog -->
</div><!-- modal -->
Lalu tambahkan javascript untuk dapat menjalankan lightbox atau modal tersebut.

$(document).ready(function(){
$('li img').on('click',function(){
var src = $(this).attr('src');
var img = '<img src="' + src + '" class="img-responsive"/>';

//Show
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>';

$('#KutubaruModal').modal();
$('#KutubaruModal').on('shown.bs.modal', function(){
$('#KutubaruModal .modal-body').html(html);
//new code
$('a.controls').trigger('click');
})
$('#KutubaruModal').on('hidden.bs.modal', function(){
$('#KutubaruModal .modal-body').html('');
});
});
})
//button controls
$(document).on('click', 'a.controls', function(){
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);
}
var total = $('ul.row li').length + 1;
//hide next button
if(total === newNextIndex){
$('a.next').hide();
}else{
$('a.next').show()
}
//hide previous button
if(newPrevIndex === 0){
$('a.previous').hide();
}else{
$('a.previous').show()
}
return false;
});
Sekarang Responsive Photo Galeri Menggunakan Bootstrap Framework telah siap untuk dipergunakan. Untuk lebih jelasnya silahkan perhatikan pada demo dibawah.

DEMO Responsive Photo Galeri Menggunakan Bootstrap Framework

Responsive Photo Galeri Menggunakan Bootstrap Framework
  • Responsive Photo Galeri
  • Responsive Photo Galeri
  • Responsive Photo Galeri
  • Responsive Photo Galeri
  • Responsive Photo Galeri
  • Responsive Photo Galeri
  • Responsive Photo Galeri
  • Responsive Photo Galeri
  • Responsive Photo Galeri
  • Responsive Photo Galeri
  • Responsive Photo Galeri
  • Responsive Photo Galeri
  • Responsive Photo Galeri
  • Responsive Photo Galeri
  • Responsive Photo Galeri
<div class="container">
<ul class="row">
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4" ><img class="img-responsive" alt="Responsive Photo Galeri" src="http://1.bp.blogspot.com/-C7_dOwwge-E/VRjdglzxpGI/AAAAAAAAAYo/SnQm4iBPeM0/s1600/html5.jpg" /></li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4" ><img class="img-responsive" alt="Responsive Photo Galeri" src="http://2.bp.blogspot.com/-Y2xiAqbYf70/VRjdvHk4EKI/AAAAAAAAAYw/vIVYm8BmZiU/s1600/css3.jpg" /></li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4" ><img class="img-responsive" alt="Responsive Photo Galeri" src="http://2.bp.blogspot.com/-L3EdItgWaSg/VRjkYHBHR5I/AAAAAAAAAZA/x624Jb00YaI/s1600/bulhorn.jpg" /></li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4" ><img class="img-responsive" alt="Responsive Photo Galeri" src="http://4.bp.blogspot.com/-8Qum0kOHeUs/VRjcVYnAdQI/AAAAAAAAAYg/gqFsTPnzKQs/s1600/code.jpg" /></li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4" ><img class="img-responsive" alt="Responsive Photo Galeri" src="http://4.bp.blogspot.com/-hsZOChaEpzo/VRkEJMCf0eI/AAAAAAAAAZM/K3xS7hL_xmQ/s1600/calender.jpg" /></li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4" ><img class="img-responsive" alt="Responsive Photo Galeri" src="http://4.bp.blogspot.com/-PS7dkUGy90g/VRkFd3zMUAI/AAAAAAAAAZY/QQkWj-0qzeQ/s1600/random.jpg" /></li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4" ><img class="img-responsive" alt="Responsive Photo Galeri" src="http://2.bp.blogspot.com/-SbsSRl18Umk/VRkFyzsAw5I/AAAAAAAAAZg/sVnuFfST0Rs/s1600/bell.jpg" /></li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4" ><img class="img-responsive" alt="Responsive Photo Galeri" src="http://1.bp.blogspot.com/-mG73WLM5BZ0/VRkF_XPO5WI/AAAAAAAAAZo/0EMgd0XWcy0/s1600/forks.jpg" /></li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4" ><img class="img-responsive" alt="Responsive Photo Galeri" src="http://2.bp.blogspot.com/-91JBDIhemMA/VRkGMjNmbAI/AAAAAAAAAZw/cpdOIGZPqGM/s1600/twitter.jpg" /></li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4" ><img class="img-responsive" alt="Responsive Photo Galeri" src="http://3.bp.blogspot.com/-lp1waaBwnx0/VRkGagsY6RI/AAAAAAAAAZ4/Hjh860CGcPM/s1600/github.jpg" /></li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4" ><img class="img-responsive" alt="Responsive Photo Galeri" src="http://4.bp.blogspot.com/-zg7f1p6j0f4/VRkHFTej1SI/AAAAAAAAAaA/G_hWa8VNZUk/s1600/laptop.jpg" /></li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4" ><img class="img-responsive" alt="Responsive Photo Galeri" src="http://1.bp.blogspot.com/-AGkMB6px_hE/VRkHR_zKubI/AAAAAAAAAaI/wCeqJBbe_xI/s1600/coffe.jpg" /></li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4" ><img class="img-responsive" alt="Responsive Photo Galeri" src="http://1.bp.blogspot.com/-NQazjOPCnIA/VRkHgpy3JhI/AAAAAAAAAaQ/Na8F-3mIDMA/s1600/koper.jpg" /></li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4" ><img class="img-responsive" alt="Responsive Photo Galeri" src="http://4.bp.blogspot.com/-IkTljxO-EL4/VRkHtM3h9sI/AAAAAAAAAaY/13tXg4ylpn4/s1600/bar.jpg" /></li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4" ><img class="img-responsive" alt="Responsive Photo Galeri" src="http://3.bp.blogspot.com/-9qCI3G0w8-Y/VRkH65SiQaI/AAAAAAAAAag/JsrFwetgmaI/s1600/card.jpg" /></li>
</ul>
</div>

<!-- bootstrap modal -->
<div class="modal fade" id="KutubaruModal" tabindex="-1" role="dialog" aria-labelledby="KutubaruModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
</div>
</div><!-- modal-content -->
</div><!-- modal-dialog -->
</div><!-- modal -->
/* Lewati langkah ini jika anda sudah menerapkan bootstrap.css */
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />

/* Lewati langkah ini, jika sudah terdapat class .modal pada paket bootstrap css anda */
.modal-open{overflow:hidden}
.modal{display:none;overflow:hidden;position:fixed;top:60px;right:0;bottom:0;left:0;z-index:1050;-webkit-overflow-scrolling:touch;outline:0}
.modal.fade .modal-dialog{-webkit-transform:translate(0, -25%);-ms-transform:translate(0, -25%);-o-transform:translate(0, -25%);transform:translate(0, -25%);-webkit-transition:-webkit-transform 0.3s ease-out;-o-transition:-o-transform 0.3s ease-out;transition:transform 0.3s ease-out}
.modal.in .modal-dialog{-webkit-transform:translate(0, 0);-ms-transform:translate(0, 0);-o-transform:translate(0, 0);transform:translate(0, 0)}
.modal-open .modal{overflow-x:hidden;overflow-y:auto}
.modal-dialog{position:relative;width:auto;margin:10px}
.modal-content{position:relative;background-color:#1e1e1e;border:1px solid #131313;border:1px solid rgba(0,0,0,0.2);border-radius:6px;-webkit-box-shadow:0 3px 9px rgba(0,0,0,0.5);box-shadow:0 3px 9px rgba(0,0,0,0.5);-webkit-background-clip:padding-box;background-clip:padding-box;outline:0}
.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1040;background-color:#000} .modal-backdrop.fade{opacity:0;filter:alpha(opacity=0)}
.modal-backdrop.in{opacity:.5;filter:alpha(opacity=50)}
.modal-header{padding:15px;border-bottom:1px solid #e5e5e5;min-height:16.42857143px}
.modal-header .close{margin-top:-2px}.modal-title{margin:0;line-height:1.42857143}
.modal-body{position:relative;padding:15px}
.modal-footer{padding:15px;text-align:right;border-top:1px solid #e5e5e5}
.modal-footer .btn+.btn{margin-left:5px;margin-bottom:0}
.modal-footer .btn-group .btn+.btn{margin-left:-1px}
.modal-footer .btn-block+.btn-block{margin-left:0}
.modal-scrollbar-measure{position:absolute;top:-9999px;width:50px;height:50px;overflow:scroll}
@media (min-width:768px){
.modal-dialog{width:500px;margin:30px auto}
.modal-content{-webkit-box-shadow:0 5px 15px rgba(0,0,0,0.5);box-shadow:0 5px 15px rgba(0,0,0,0.5)}
.modal-sm{width:300px}}
@media (min-width:992px){
.modal-lg{width:900px}}

/* untuk menghilangkan list style dan pointer pada img */
ul {
padding:0 0 0 0;
margin:0 0 0 0;
}
ul li {
list-style:none;
margin-bottom:25px;
}
ul li img {
cursor: pointer;
}

/* Untuk style next dan prev button */
.controls{
width:50px;
display:block;
font-size:11px;
padding-top:8px;
font-weight:bold;
}
.next {
float:right;
text-align:right;
}
// Lewati langkah ini jika anda sudah menerapkan bootstrap.js
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" />

// Untuk menjalankan lightbox atau modal
$(document).ready(function(){
$('li img').on('click',function(){
var src = $(this).attr('src');
var img = '<img src="' + src + '" class="img-responsive"/>';

//Show
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>';

$('#KutubaruModal').modal();
$('#KutubaruModal').on('shown.bs.modal', function(){
$('#KutubaruModal .modal-body').html(html);

//new code
$('a.controls').trigger('click');
})
$('#KutubaruModal').on('hidden.bs.modal', function(){
$('#KutubaruModal .modal-body').html('');
});
});
})

//button controls
$(document).on('click', 'a.controls', function(){
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);
}
var total = $('ul.row li').length + 1;

//hide next button
if(total === newNextIndex){
$('a.next').hide();
}else{
$('a.next').show()
}

//hide previous button
if(newPrevIndex === 0){
$('a.previous').hide();
}else{
$('a.previous').show()
}
return false;
});
Demo By [ KutuBaru ]
Silahkan diskusikan pada kolom komentar jika masih ada yang di pertanyakan.
  • Like / Share :

3 comments

Tulis Komentar

avatar
Balas
dapur fisio delete ( May 6, 2016 at 1:12 PM )

gan, kalau menampilkan gambar beserta komentarnya didalam 1 lightbox gimana ya?
seperti album di facebook. mohon pencerahannya gan.

avatar
Balas
WaDesiGh delete ( August 15, 2016 at 1:45 AM )

Ok, makasi masukannya...
Sebelumnya saya mau tanya, platform yang kamu gunakan apa?
Untuk blogspot sendiri, tinggal menggabungkan aja keduanya.
Namun yang jelas struktur modalnya/lightbox sedikit dirubah, dengan menambahkan grid di dalam "modal-body".
Saya kasih sedikit gambaran untuk struktur modal/lightbox nya seperti ini...

[i rel="code"][code class="html"]<div class="modal fade" id="KutubaruModal" tabindex="-1" role="dialog" aria-labelledby="KutubaruModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">

<div class='col-lg-6 col-md-6 col-sm-6 tampilkan-gambar'>
<!-- menampilkan gambar -->
</div>
<div class='col-lg-6 col-md-6 col-sm-6 menampilkan-komentar'>
<!-- komentar artikel -->
</div>

</div>
</div><!-- modal-content -->
</div><!-- modal-dialog -->
</div><!-- modal -->[/code][/i]

Untuk demo nya sudah saya update, silahkan klik gambar pada demo di atas.

Note:
Kekurangannya hanya bisa menampilkan komentar untuk artikel tersebut, bukan untuk satu persatu gambar/photo.

This comment has been removed by a blog administrator.

Silahkan gunakan form komentar dengan bijak. Komentar yang berisi link aktif, titip link, iklan, kemungkinan tidak akan di terbitkan atau bahkan dimasukan ke dalam folder spam.
Mohon maaf jika kami belum sempat membalas komentar anda.

List Smiley Buka Konverter

Subscribe to: Post Comments ( Atom )