Berikut ini adalah Cara Membuat Gambar Lightbox dengan Efek Elastis 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.
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 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.
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.#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/AVvXsEjDthxWv4gFfzygQDSG9YX3y_U8TUhXBNcoEwGQcb79he7ALnPimvUYBADR7HEzQorFTz2LF7B1aR1J1_-pSI7541zc-VShZTPryIcMRokQjwFJVFzS9eKU7RbBD9LRn5D4cKfrT5XXIPs/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/AVvXsEh_BlyFVx8eB5CKrQnAAj3Ri5porcjbHM6qUVIlSh0C2BXRbHQ8ng9kTpioxDYMg-fe-rwLo6Zw3qlwOb4ClxbMrK_Bmf9iJ_ZGcipHlH-4W6VQLZd5A9EO8-DTE-gcCjABQgb1lvxUaK0/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/AVvXsEiM9cEo9vHy-gNzbrduEJ7liCumIqoC-rERVdqR8FDLZYgR-szvgNX3YV5baLXFHTD_yzVpLJM74y1VzSWqOVIjXbOwfHSXAwPfPBrH0C81yZ1bB0jwDALT96OO58-VuJ1ZCrUfu6vZUBU/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/AVvXsEhkR2Sv3BmGJUXbpv-EXd8bUN_3ra_wW4Lv_wyXISMt9_zsvdU-eWtbXIho4idStZQaUll8Rm3qpYulVGnVeMRZjgrC3u7E9AB9J_eqCV57A4by9TNjMMFecgT6Te7hyphenhyphenXTlW-v65IW7jgQ/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;
}
Wajib Baca :
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
<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
<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
3. Berikut ini jika ingin menambahkan judul atau deskripsi dari gambar.
HTML Image lightbox
<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 Hijau) dengan resolusi maksimum berbeda dengan link “img” (warna Kuning) di dalamnya yaitu link dengan resolusi sesuai keinginan, bisa biasa, normal atau maksimum.
4. Save Template, dan lihat hasilya. Mudah-mudahan bermanfaat.
Posting Komentar