Cara Membuat Gambar Lightbox dengan Efek Elastis

Aura Ilmu » Blog » Cara Membuat Gambar Lightbox dengan Efek Elastis

Oleh: Tatang Gunawan | Update Terakhir: 16 May 2017 | 1 Comment

Berikut ini adalah cara membuat gambar Lightbox di Blog / Website. Fitur ini memiliki fungsi untuk menampilkan gambar dengan efek transisi yang Elastis. Pada dasarnya efek transisinya dapat dirubah dengan versi efek yang lain menggunakan javascript, jika sudah cukup berpengalaman.
Gambar akan muncul pada fitur slidehow dalam lightbox berdasar pada bagian struktur halaman, misalnya semua gambar yang ada di bagian posting atau bagian sidebar atau bagian lain. Gambar akan ditampilkan secara otomatis mengubah ukuran lebar dan tinggi dengan resolusi maksimum disertai efek ease out elastic. Judul/deskripsi gambar dapat disertakan dalam lighbox ini.

DEMO

Lightbox ini telah dimodifikasi dari slimbox2 yang dibuat oleh Christhope Beyls dengan lisensi MIT (open source) dan gratis bagi setiap orang. Dirancang dengan efisien, ramah dan kompatibel dengan browser modern besar seperti Firefox, Chrome, Opera, Safari dan Internet Explorer. Kode ini sudah dioptimalkan dan memiliki berat yang sangat ringan, ukuran kecil hanya 4kb versi minified.

• Cara Membuat Fitur Slider/Slideshow di Blog
• Cara Membuat Slider/Slideshow dlengkapi Efek Animasi

Gambar Lightbox
Jika menggunakan platform Blogger dan untuk menghindari konflik dengan versi gambar lightbox ini maka harus merubah setting menjadi “no” atau “tidak” di menu dashboard. Namun pada dasarnya Gambar Lightbox ini juga bekerja pada platform lain tidak hanya di Blogger.

Image: Slimbox Lightbox

Untuk menambahkan fitur ini hanya membutuhkan waktu beberapa menit. Lightbox ini dengan segera meluncurkan efek transisi yang elastis. Berikut adalah langkah-langkah membuat gambar lightbox efek elastis.

1. Masukan kode CSS berikut diatas atau sebelum ]]></b:skin> atau </style> di bagian head.
CSS Gambar Lightbox

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116#lbOverlay {
 position: fixed;
 z-index: 9999;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 background-color: #000;
 cursor: pointer;
}

#lbCenter {
 position: absolute;
 z-index: 9999; 
 overflow: hidden;
 background-color: #000; 
 box-shadow: 0px 0px 23px 5px #0020FF;
}

#lbBottomContainer {
 position: absolute;
 z-index: 9999; 
 overflow: hidden;
 background-color: #000; 
 background:rgba(0,0,0,0.5);
 margin-top:-41px;
}

.lbLoading {
 background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeAVwDgoUHlkrrN-1nSAuY5vbqCcvpxGJ0VSzscN3xVxagEhNFywfciLf40qFpIz0vKE-u_12HwxTvkvlQ4dEvpfVOjCBRrZ99MbUttXZKRLRaibHAe86O8nqmZAPQKwdG2r8Nrp7wQIE/s128/ajax-loader.gif") no-repeat center;
}

#lbImage {
 position: absolute;
 left: 0;
 top: 0; 
 max-width:900px; max-height:550px;
 background-repeat: no-repeat 50% 50%;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}

#lbPrevLink {
 right: 100px; 
 display: block;
 position: absolute;
 top: 0;
 width: 50px;
 height: 50px!important;
 outline: none;
 background: transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeHMBM6jYtS2Cr_P_QJkDm8L4ifi_aX5BgJuv-SDVUK7FpjDOl54QpJ3dvkUmWiykzfaOEA6tF4mjmWddAxx13WuEqMLcMENa6HsBGllRyghBuXvq9FQSJ4iSh4HNJw0VjQInVWEN7Rxk/s128/prevbutton-clean.png") no-repeat;
 opacity:0.5;
}

#lbPrevLink:hover {
 opacity:1;
}

#lbNextLink {
 right: 50px;
 display: block;
 position: absolute;
 top: 0;
 width: 50px;
 height: 50px!important;
 outline: none;
 background: transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWByLIsqBq05qD9om02oy2xVoIV8Tt6Ia1lxPfOOhWlOjmiiUn82pQHqz4rd4N2Pw6BxpxvJb6feId6_YJevcUcowl7zeq-4A8_Rz4hT3B2Vv-zkX1IXGX3Vu3W6l9wNDSgxR8ZFGDF24/s128/nextbutton-clean.png") no-repeat;
 opacity:0.5;
}

#lbNextLink:hover {
 opacity:1;
}

#lbBottom {
 font:12px Verdana, Arial, Geneva, Helvetica, sans-serif;
 color: #D3D3D3;
 line-height: 1.4em;
 text-align: left;
 border-top-style: none;
 padding:5px;
 position:absolute;
 max-width:900px;
 max-height:50px;
 min-height: 40px;
 width:100%;
 bottom: 0;
 overflow: hidden;
 background-color: #000;
 background: rgba(0,0,0,0.5);
}

#lbCloseLink {
 display: block;
 right: 20px;
 bottom: 13px;
 position: absolute;
 width: 20px;
 height: 20px;
 background: transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0w_K22RXccY0pZdCXWXmgn1A6ItPy9rptCL2ucBkcbl_L1mlAUjv6XU_1B_mVYoXpg6u6J6xuxXw2RL2cmZDhfmKZqzbgM0DlxllSqZIhPEy92etCGIWnHTNVHlVS1Tvt47Jz0FGu65o/s128/close.gif") no-repeat;
 outline: none;
}

#lbCaption {
 font:12px Verdana, Arial, Geneva, Helvetica, sans-serif; padding-bottom:5px;
}

#lbNumber {
 font:10px Verdana, Arial, Geneva, Helvetica, sans-serif;
}

#lbCaption {
 font-weight: bold;
}

Catatan: Cobalah tanpa di edit.
warna biru adalah link dari tombol navigasi previous, next, close and loader, dan sebaiknya link ini diganti ke tempat upload masing-masing, karena mungkin nanti tidak akan berlaku lagi atau tidak terbagi-bagi pemakaiannya.

2. Masukan Jquery berikut diatas </head> di bagian head template.
JQuery Gambar Lightbox

1<script src='//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js' type='text/javascript'></script>

Catatan: Jika sudah menggunakan versi JQuery lain, maka lewati langkah ini, tapi usahakan versi 2.x.x

3. Masukan kode javascript berikut diatas </head> di bagian head template.
Javascript Image Lightbox

12<script type='text/javascript'>/*<![CDATA[*//*! Slimbox v2.05 - The ultimate lightweight Lightbox clone for jQuery (c) 2007-2013 Christophe Beyls <http://www.digitalia.be>  Modified by <aura-ilmu.com>  MIT-style license. */(function(e){function L(){var n=t.scrollLeft(),r=t.width();e([b,T]).css("left",n+r/2);if(a)e(y).css({left:n,top:t.scrollTop(),width:r,height:t.height()})}function A(n){if(n){e("object").add(h?"select":"embed").each(function(e,t){p[e]=[t,t.style.visibility];t.style.visibility="hidden"})}else{e.each(p,function(e,t){t[0].style.visibility=t[1]});p=[]}var r=n?"bind":"unbind";t[r]("scroll resize",L);e(document)[r]("keydown",O)}function O(t){var r=t.which,i=e.inArray;return i(r,n.closeKeys)>=0?j():i(r,n.nextKeys)>=0?_():i(r,n.previousKeys)>=0?M():null}function M(){return D(o)}function _(){return D(u)}function D(e){if(e>=0){i=e;s=r[i][0];o=(i||(n.loop?r.length:0))-1;u=(i+1)%r.length||(n.loop?0:-1);B();b.className="lbLoading";v=new Image;v.onload=P;v.src=s}return false}function P(){b.className="";e(w).css({backgroundImage:"url("+s+")",visibility:"hidden",display:""});e(E).width(v.width);e([E,S,x]).height(v.height);e(C).html(r[i][1]||"");e(k).html((r.length>1&&n.counterText||"").replace(/{x}/,i+1).replace(/{y}/,r.length));if(o>=0)m.src=r[o][0];if(u>=0)g.src=r[u][0];l=w.offsetWidth;c=w.offsetHeight;var t=Math.max(0,f-c/2);if(b.offsetHeight!=c){e(b).animate({height:c,top:t},n.resizeDuration,n.resizeEasing)}if(b.offsetWidth!=l){e(b).animate({width:l,marginLeft:-l/2},n.resizeDuration,n.resizeEasing)}e(b).queue(function(){e(T).css({width:l,top:t+c,marginLeft:-l/2,visibility:"hidden",display:""});e(w).css({display:"none",visibility:"",opacity:""}).fadeIn(n.imageFadeDuration,H)})}function H(){if(o>=0)e(S).show();if(u>=0)e(x).show();e(N).css("marginTop",-N.offsetHeight).animate({marginTop:0},n.captionAnimationDuration);T.style.visibility=""}function B(){v.onload=null;v.src=m.src=g.src=s;e([b,w,N]).stop(true);e([S,x,w,T]).hide()}function j(){if(i>=0){B();i=o=u=-1;e(b).hide();e(y).stop().fadeOut(n.overlayFadeDuration,A)}return false}var t=e(window),n,r,i=-1,s,o,u,a,f,l,c,h=!window.XMLHttpRequest,p=[],d=document.documentElement,v={},m=new Image,g=new Image,y,b,w,E,S,x,T,N,C,k;e(function(){e("body").append(e([y=e('<div id="lbOverlay" />').click(j)[0],b=e('<div id="lbCenter" />')[0],T=e('<div id="lbBottomContainer" />')[0]]).css("display","none"));w=e('<div id="lbImage" />').appendTo(b).append(E=e('<div style="position: relative;" />').append([])[0])[0];N=e('<div id="lbBottom" />').appendTo(b).append([C=e('<div id="lbCaption" />')[0],k=e('<div id="lbNumber" />')[0],S=e('<a id="lbPrevLink" href="#" />').click(M)[0],x=e('<a id="lbNextLink" href="#" />').click(_)[0],e('<a id="lbCloseLink" href="#" />').click(j)[0],e('<div style="clear: both;" />')[0]])[0]});e.slimbox=function(i,s,o){n=e.extend({loop:false,overlayOpacity:.9,overlayFadeDuration:400,resizeDuration:400,resizeEasing:"easeOutElastic",initialWidth:250,initialHeight:250,imageFadeDuration:400,captionAnimationDuration:400,counterText:"Image {x} of {y}",closeKeys:[27,88,67],previousKeys:[37,80],nextKeys:[39,78]},o);if(typeof i=="string"){i=[[i,s]];s=0}f=t.scrollTop()+t.height()/2;l=n.initialWidth;c=n.initialHeight;e(b).css({top:Math.max(0,f-c/2),width:l,height:c,marginLeft:-l/2}).show();a=h||y.currentStyle&&y.currentStyle.position!="fixed";if(a)y.style.position="absolute";e(y).css("opacity",n.overlayOpacity).fadeIn(n.overlayFadeDuration);L();A(1);r=i;n.loop=n.loop&&r.length>1;return D(s)};e.fn.slimbox=function(t,n,r){n=n||function(e){return[e.href,e.title]};r=r||function(){return true};var i=this;return i.unbind("click").click(function(){var s=this,o=0,u,a=0,f;u=e.grep(i,function(e,t){return r.call(s,e,t)});for(f=u.length;a<f;++a){if(u[a]==s)o=a;u[a]=n(u[a],a)}return e.slimbox(u,o,t)})}})(jQuery);jQuery.extend(jQuery.easing,{easeOutElastic:function(e,t,n,r,i){var s=1.70158;var o=0;var u=r;if(t==0){return n}if((t/=i)==1){return n+r}if(!o){o=i*.3}if(u<Math.abs(r)){u=r;var s=o/4}else{var s=o/(2*Math.PI)*Math.asin(r/u)}return u*Math.pow(2,-10*t)*Math.sin((t*i-s)*2*Math.PI/o)+r+n}});if(!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent));jQuery(function(e){e("a[href]").filter(function(){return/.(jpg|png|gif)$/i.test(this.href)}).slimbox({},null,function(e){return this==e||this.parentNode&&this.parentNode==e.parentNode})});
/*]]>*/</script>

Catatan: Jika membutuhkan kode diatas untuk di convert/di parse agar bisa disave di templatenya, Masuk Ke siniTool Konversi/Parse, tapi itu tidak diperlukan.
3. Berikut ini jika ingin menambahkan judul atau deskripsi dari gambar.
HTML Image lightbox

123<a href='.../image/contoh.jpg' title="Deskripsi: Air Bubbles">
     <img src=".../image/contoh.jpg" />
</a>

Warna Pink adalah Keterangan gambar yang dapat dimasukan, bebas. Catatan yang perlu diketahui yaitu link pada gambar lightbox (warna merah) dengan resolusi maksimum berbeda dengan link “img” (warna biru) di dalamnya yaitu link dengan resolusi sesuai keinginan, bisa biasa, normal atau maksimum.
4. Save Template, dan lihat hasilya. Mudah-mudahan bermanfaat.