Ditulis oleh: Ditulis pada: 11/12/2014
Membuat Image Lightbox Dengan Colorbox.js Di Blogger - Image Lightbox adalah ketika sebuah gambar di postingan di klik, maka akan muncul sebuah overlay yang menampilkan gambar yang lebih besar dan jika di dalam postingan tersebut terdapat lebih dari satu gambar maka overlay akan menampilkan gambar-gambar tersebut dengan tombol next prev.
Blogger sendiri sudah memiliki fitur lightbox dan kita bisa mengaktifkannya pada setting di dashboard Blogger. Namun bagi Anda yang sudah melakukan validasi HTML5 dan menyembunyikan Bundle CSS dan JS Blogger, secara otomatis Anda tidak bisa menggunakan fitur lightbox Blogger tersebut.
Namun tidak perlu khawatir, banyak plugin jquery yang bisa kita gunakan untuk menggantikan lightbox Blogger yang tidak bisa kita aktifkan. Salah satunya adalah Colorbox.js karya master Jack Moore. Dan saya mencoba salah satu fiturnya saja untuk digunakan sebagai image lightbox. Dengan sedikit modifikasi pada CSS style-nya, maka jadilah lightbox dengan colorbox.js responsive.
Colorbox.js: http://www.jacklmoore.com/colorbox/
Dan berikut adalah demo untuk lightbox tanpa transisi dengan lebar dan tinggi 75% dari layar yang saya buat di JSFiddle sesuai aslinya. Dan itu cukup untuk membuat lightbox yang responsive. Namun pada lightbox ini menyisakan daerah putih di sekitar gambar sehingga menurut saya kurang bagus dilihatnya.
Untuk itu saya sedikit memodifikasi CSS style colorbox untuk menghilangkan daerah putih di sekitar gambarnya sehingga gambarnya menjadi full. Bisa Anda lihat pada link demo di bawah ini.
Bagaimana? Anda tertarik untuk mencobanya? Silahkan gunakan kode-kode di bawah ini.
Kode CSS
#colorbox,#cboxOverlay,#cboxWrapper{position:absolute;top:0;left:0;z-index:9999;overflow:hidden}
#cboxWrapper{max-width:none}
#cboxOverlay{position:fixed;width:100%;height:100%}
#cboxMiddleLeft,#cboxBottomLeft{clear:left}
#cboxContent{position:relative}
#cboxLoadedContent{overflow:hidden!important;-webkit-overflow-scrolling:touch}
#cboxTitle{margin:0}
#cboxLoadingOverlay,#cboxLoadingGraphic{position:absolute;top:0;left:0;width:100%;height:100%}
#cboxPrevious,#cboxNext,#cboxClose,#cboxSlideshow{cursor:pointer}
.cboxPhoto{border:0;width:100%!important;height:auto!important;margin-bottom:-5px;}
.cboxIframe{width:100%;height:100%;display:block;border:0;padding:0;margin:0}
#colorbox,#cboxContent,#cboxLoadedContent{box-sizing:content-box;-moz-box-sizing:content-box;-webkit-box-sizing:content-box}
#cboxOverlay{background:#000}
#colorbox{outline:0}
#cboxContent{margin-top:20px;background:#000}
.cboxIframe{background:#fff}
#cboxError{padding:50px;border:1px solid #ccc}
#cboxLoadedContent{border:5px solid #000;background:#fff}
#cboxTitle{position:absolute;top:-20px;left:0;color:#ccc;visibility:hidden}
#cboxCurrent{position:absolute;top:-20px;right:0;color:#ccc}
#cboxLoadingGraphic{background:url(http://www.jacklmoore.com/colorbox/example3/images/loading.gif) no-repeat center center}
#cboxPrevious,#cboxNext,#cboxSlideshow,#cboxClose{border:0;padding:0;margin:0;overflow:visible;width:auto;background:0}
#cboxPrevious:active,#cboxNext:active,#cboxSlideshow:active,#cboxClose:active{outline:0}
#cboxSlideshow{position:absolute;top:-20px;right:90px;color:#fff}
#cboxPrevious{position:absolute;top:50%;left:5px;margin-top:-32px;background:url(http://www.jacklmoore.com/colorbox/example3/images/controls.png)no-repeat top left;width:28px;height:65px;text-indent:-9999px}
#cboxPrevious:hover{background-position:bottom left}
#cboxNext{position:absolute;top:50%;right:5px;margin-top:-32px;background:url(http://www.jacklmoore.com/colorbox/example3/images/controls.png) no-repeat top right;width:28px;height:65px;text-indent:-9999px}
#cboxNext:hover{background-position:bottom right}
#cboxClose{position:absolute;top:5px;right:5px;display:block;background:url(http://www.jacklmoore.com/colorbox/example3/images/controls.png) no-repeat top center;width:38px;height:19px;text-indent:-9999px}
#cboxClose:hover{background-position:bottom center}
Kode Javascript
Simpan kode javascript di bawah ini di atas kode
</body>
<script src='http://yourjavascript.com/311412413010/jquery-colorbox-min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"auto"});
});
//]]>
</script>
Kode HTML
Untuk menyimpan gambar di postingan, silahkan gunakan kode HTML seperti di bawah ini.
<a class="group3" href="URL GAMBAR BESAR" title="Title Gambar Di Sini"><img alt="thumbnail" src="URL GAMBAR KECIL" width="200" height="130" title="Title Gambar Di Sini"/></a>
Anda cukup mengupload sebuah gambar yang besar kemudian ganti kode
URL GAMBAR BESAR dan URL GAMBAR KECIL dengan URL gambar yang Anda upload tadi. Untuk lebar dan tinggi gambar thumbnail silahkan atur sesuai kehendak Anda pada kode width="200" height="130".
Jika gambar dengan HTML di atas terdapat lebih dari satu, maka otomatis lightbox akan menampilkan tombol next prev. Namun jika hanya terdapat satu gambar saja maka lightbox tidak akan menampilkan tombol next prev.