» » Lightbox dengan Efek Elastis

02 Juni 2019
0

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.

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/AVvXsEhAKxcu-zc4twkxfywnNE5WWKJjmcFhel3unuZKk-eLWddAZZU7lsCirPZUGpLQ5bJsxh97HtKLHNUNfQnzoUIWYDZ7H4u0Zg2paI7bgmGbwZkisnli63OVhsSVLvajcd8iWhfElKxLm68/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/AVvXsEjxnoaacKUg1FHl3eOgYLZl0ANo1TNioM6XNOlOoGs9hlSmluTGryve11kaNEpTD7Tnq1fCUmk6JWhXB5zF1ZAFjRHAVwRCtxA03fq6HaYe_abiVerpp2arjPFNbkk0bAIqD82qr_Xqnoo/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/AVvXsEgsCl1yeddUz0MaKB6WyTiPRIvKP2iAEzDc6NSobemv8P5fjRAz6ZR3W3tKd7wGa9zhuk0iu7uXnCRIexMnqdACGHuh3lYy2p6pP74gAeszUegm2zYpXdgP4eRCQl_FSgN8xGSGsfeeyr0/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/AVvXsEgdT9q8R7rKxtZiUzsONC9aupALO2fjIwdJyQMVJtU4NU64pPea5bOvWS4wBOXGK19zBTVzPjDddnRoJYs3SMGyNv1wFBeBVaetpj0OMofFuBVrOm1lUjFXSzNy-Ojdu-gzEP3-M7r8kCg/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. 
    <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. 
    <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.

  4. Berikut ini jika ingin menambahkan judul atau deskripsi dari gambar.

    <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.

  5. Save Template, dan lihat hasilya. Mudah-mudahan bermanfaat.
By - Juni 03, 2019
Labels:

0 comments:

Posting Komentar

Langganan: Posting Komentar (Atom)