Membuat Image Lightbox Responsive Dengan Colorbox.Js

Membuat Image Lightbox Dengan Colorbox.js Di Blogger - Image Lightbox yaitu saat sebuah gambar di postingan di klik, maka akan muncul sebuah overlay yang menampilkan gambar yang lebih besar dan kalau di dalam postingan tersebut terdapat lebih dari satu gambar maka overlay akan menampilkan gambar-gambar tersebut dengan tombol next prev.

Blogger sendiri sudah mempunyai fitur lightbox dan kita sanggup mengaktifkannya pada setting di dashboard Blogger. Namun bagi Anda yang sudah melaksanakan validasi HTML5 dan menyembunyikan Bundle CSS dan JS Blogger, secara otomatis Anda tidak sanggup memakai fitur lightbox Blogger tersebut.

Namun tidak perlu khawatir, banyak plugin jquery yang sanggup kita gunakan untuk menggantikan lightbox Blogger yang tidak sanggup kita aktifkan. Salah satunya yaitu Colorbox.js karya master Jack Moore. Dan aku mencoba salah satu fiturnya saja untuk dipakai 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 yaitu demo untuk lightbox tanpa transisi dengan lebar dan tinggi 75% dari layar yang aku buat di JSFiddle sesuai aslinya. Dan itu cukup untuk menciptakan lightbox yang responsive. Namun pada lightbox ini menyisakan tempat putih di sekitar gambar sehingga berdasarkan aku kurang anggun dilihatnya.

DEMO

Untuk itu aku sedikit memodifikasi CSS style colorbox untuk menghilangkan tempat putih di sekitar gambarnya sehingga gambarnya menjadi full. Bisa Anda lihat pada link demo di bawah ini.

DEMO

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 aba-aba javascript di bawah ini di atas aba-aba </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 aba-aba HTML menyerupai di bawah ini.

 <a class="group3" href="URL GAMBAR BESAR" title="Membuat Image Lightbox Responsive Dengan Colorbox.js"><img alt="Image Lightbox Responsive Dengan Colorbox Membuat Image Lightbox Responsive Dengan Colorbox.js" src="URL GAMBAR KECIL" width="200" height="130" title="Membuat Image Lightbox Responsive Dengan Colorbox.js"/></a>

Anda cukup mengupload sebuah gambar yang besar lalu ganti aba-aba 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 aba-aba width="200" height="130".

Jika gambar dengan HTML di atas terdapat lebih dari satu, maka otomatis lightbox akan menampilkan tombol next prev. Namun kalau hanya terdapat satu gambar saja maka lightbox tidak akan menampilkan tombol next prev.

Sumber https://www.kompiajaib.com/

Share this post