Memasang Auto Lightbox Image pada Area Posting Blog dengan jQuery Lighter

Setelah saya mencari beberapa plugin lightbox yang sudah popular seperti Lightbox Evolution, Fancybox, ColorBox dan plugin lightbox lain-nya, namun ternyata saya menemukan sebuah plugin lightbox image yang bisa otomatis lightbox dan Bersifat Responsive (Disaat Lightbox Aktif, Gambar Terbesar akan mengikuti Ukuran Layar!), plugin tersebut adalah jQuery Lighter Image Plugin!

Dalam plugin ini saya menambahan sedikit fungsi javascript agar ketika anchor link memiliki tag img, akan langsung otomatis memiliki class="lighter" saat gambar tersebut di klik , berikut contoh-nya :

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxoe8kL6uvqo2cVjiMyDmCOOctSgRd-7Re92FBzOdWGriZDrKkf7fg9wourB_DhdPkXvrZr-ZBU8hGMSJX9Xg0kSuZvUzvmhrNflWyBqwQsjLi-iyAxNSranLJngjACIWisIhru9GFU9rs/s1600/900x600.jpg" ><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMxI_fvuc7-GS3stDmzCYqJIkqZnso3fIyEW0raHxbJoHFwG2IPz5KccuiV1XGUcSdzpeXmMYk2DZLZt8RxqKjJoG_lSw0NjySh35lDNAT5QeWETxUGI-pAF8-vr6bpq6UaW7qOZgl28Vk/s1600/600x400.jpg" /></a>

Untuk demo-nya silahkan : Lihat Disini

Sudah faham sampai sini sob? , baiklah.. seperti-nya sampai sini cukup difahami oleh sahabat blogger yang sudah faham code html, berikut kita simak cara memasang jQuery Lighter Image Automatis pada Area Posting Blog ini :

Cara Pemasangan

Langkah-1 : Pastikan sobat sudah memasang jQuery Library! jika sobat belum memasang jQuery Library, silahkan simpan kode di bawah ini tepat di atas kode </head> :

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"/>

Langkah-2 : Login Blogger, klik Template --> Edit HTML seperti gambar dibawah :

jika sudah silahkan simpan code CSS dibawah ini tepat di atas code ]]></b:skin> :

/* AUTO LIGHTBOX IMAGE BLOGGER POST by rian-nurherdian.blogspot.com
=================================================== */
.lighter,.lighter *{-webkit-transition:all 0.4s ease-in-out;-moz-transition:all 0.4s ease-in-out;transition:all 0.4s ease-in-out}
.lighter{position:fixed;top:0;bottom:0;left:0;right:0;z-index:400000;opacity:1}
.lighter.fade{opacity:0}
.lighter.fade .lighter-container{-webkit-transform:scale(0.5);-moz-transform:scale(0.5);-ms-transform:scale(0.5);-o-transform:scale(0.5);transform:scale(0.5)}
.lighter img{width:100%;height:100%}
.lighter .lighter-overlay{background:rgba(0,0,0,0.5);height:100%;width:100%}
.lighter .lighter-container{background:white;position:absolute;z-index:400000;top:50%;left:50%;right:50%;bottom:50%;box-shadow:0 2px 8px rgba(0,0,0,0.5)}
.lighter .lighter-container .lighter-close{top: 0;right: 0;width: 30px;height: 30px;margin: -15px;line-height: 30px;font-size: 16pt;font-family: Helvetica,Arial,serif;}
.lighter .lighter-container .lighter-next{display:none;right:40px;top:50%;width:40px;height:40px;margin:-20px 0;line-height:34px;font-size:32pt;font-family:Times,serif}
.lighter .lighter-container .lighter-prev{display:none;left:40px;top:50%;width:40px;height:40px;margin:-20px;line-height:24pt;font-size:34px;font-family:Times,serif}
.lighter .lighter-container .lighter-next,.lighter .lighter-container .lighter-prev,.lighter .lighter-container .lighter-close{cursor:pointer;position:absolute;z-index:800000;text-align:center;border-radius:40px;color:rgba(255,255,255,0.8);background:rgba(0,0,0,0.2);}
.lighter .lighter-container .lighter-next:hover,.lighter .lighter-container .lighter-prev:hover,.lighter .lighter-container .lighter-close:hover{color:white;text-decoration: none;background:rgba(0,0,0,0.6)}
.lighter .lighter-container .lighter-next:active,.lighter .lighter-container .lighter-prev:active,.lighter .lighter-container .lighter-close:active{color:white;background:rgba(0,0,0,0.6)}
/* ===================================================
END AUTO LIGHTBOX IMAGE BLOGGER POST by rian-nurherdian.blogspot.com */

Langkah-3 : Menyimpan Kode JavaScript Lighter! cara-nya silahkan simpan code JavaScript dibawah ini tepat di atas kode </body> :

<script>
// tambahan code Javascript agar Auto Lightbox pada area .entry-content
$(&quot;.entry-content img&quot;).parents(&quot;a&quot;).on(&quot;click&quot;,function(a){a.preventDefault();a.stopPropagation();return $(this).lighter()});

// jQuery Lighter Plugin
(function(){var g,h,e,f=function(b,a){return function(){return b.apply(a,arguments)}};g=jQuery;h=(function(){function a(){}a.transitions={webkitTransition:&quot;webkitTransitionEnd&quot;,mozTransition:&quot;mozTransitionEnd&quot;,oTransition:&quot;oTransitionEnd&quot;,transition:&quot;transitionend&quot;};a.transition=function(k){var c,l,d,b;c=k[0];b=this.transitions;for(d in b){l=b[d];if(c.style[d]!=null){return l}}};a.execute=function(d,b){var c;c=this.transition(d);if(c!=null){return d.one(c,b)}else{return b()}};return a})();e=(function(){a.settings={padding:40,dimensions:{width:960,height:540},template:&quot;<div class='lighter fade'>\n  <div class='lighter-container'>\n    <span class='lighter-content'/>\n    <a class='lighter-close'>&#215;</a>\n    <a class='lighter-prev'>&#8249;</a>\n    <a class='lighter-next'>&#8250;</a>\n  </div>\n  <div class='lighter-overlay'/>\n</div>&quot;};a.lighter=function(c,d){var b;if(d==null){d={}}b=c.data(&quot;_lighter&quot;);if(!b){b=new a(c,d);c.data(&quot;_lighter&quot;,b)}return b};a.prototype.$=function(b){return this.$lighter.find(b)};function a(c,b){if(b==null){b={}}this.show=f(this.show,this);this.hide=f(this.hide,this);this.toggle=f(this.toggle,this);this.keyup=f(this.keyup,this);this.align=f(this.align,this);this.resize=f(this.resize,this);this.process=f(this.process,this);this.href=f(this.href,this);this.type=f(this.type,this);this.image=f(this.image,this);this.prev=f(this.prev,this);this.next=f(this.next,this);this.close=f(this.close,this);this.$=f(this.$,this);this.$el=c;if((this.$el.data(&quot;width&quot;)!=null)&amp;&amp;(this.$el.data(&quot;height&quot;)!=null)){if(b.dimensions==null){b.dimensions={width:this.$el.data(&quot;width&quot;),height:this.$el.data(&quot;height&quot;)}}}this.settings=g.extend({},a.settings,b);this.$lighter=g(this.settings.template);this.$overlay=this.$(&quot;.lighter-overlay&quot;);this.$content=this.$(&quot;.lighter-content&quot;);this.$container=this.$(&quot;.lighter-container&quot;);this.$close=this.$(&quot;.lighter-close&quot;);this.$prev=this.$(&quot;.lighter-prev&quot;);this.$next=this.$(&quot;.lighter-next&quot;);this.$body=this.$(&quot;.lighter-body&quot;);this.width=this.settings.dimensions.width;this.height=this.settings.dimensions.height;this.align();this.process()}a.prototype.close=function(b){if(b!=null){b.preventDefault()}if(b!=null){b.stopPropagation()}return this.hide()};a.prototype.next=function(b){if(b!=null){b.preventDefault()}return b!=null?b.stopPropagation():void 0};a.prototype.prev=function(){if(typeof event!==&quot;undefined&quot;&amp;&amp;event!==null){event.preventDefault()}return typeof event!==&quot;undefined&quot;&amp;&amp;event!==null?event.stopPropagation():void 0};a.prototype.image=function(b){return b.match(/\.(jpeg|jpg|jpe|gif|png|bmp)$/i)};a.prototype.type=function(b){if(b==null){b=this.href()}return this.settings.type||(this.image(b)?&quot;image&quot;:void 0)};a.prototype.href=function(){return this.$el.attr(&quot;href&quot;)};a.prototype.process=function(){var j,c,d,b=this;d=this.type(j=this.href());this.$content.html((function(){switch(d){case&quot;image&quot;:return g(&quot;<img/>&quot;).attr({src:j});default:return g(j)}})());switch(d){case&quot;image&quot;:c=new Image();c.src=j;return c.onload=function(){return b.resize(c.width,c.height)}}};a.prototype.resize=function(b,c){this.width=b;this.height=c;return this.align()};a.prototype.align=function(){var d,b,c;b=Math.max((d=this.height)/(g(window).height()-this.settings.padding),(c=this.width)/(g(window).width()-this.settings.padding));if(b&gt;1){d=Math.round(d/b)}if(b&gt;1){c=Math.round(c/b)}return this.$container.css({height:d,width:c,margin:&quot;-&quot;+(d/2)+&quot;px -&quot;+(c/2)+&quot;px&quot;})};a.prototype.keyup=function(b){if(b.target.form!=null){return}if(b.which===27){this.close()}if(b.which===37){this.prev()}if(b.which===39){return this.next()}};a.prototype.toggle=function(b){if(b==null){b=&quot;on&quot;}g(window)[b](&quot;resize&quot;,this.align);g(document)[b](&quot;keyup&quot;,this.keyup);this.$overlay[b](&quot;click&quot;,this.close);this.$close[b](&quot;click&quot;,this.close);this.$next[b](&quot;click&quot;,this.next);return this.$prev[b](&quot;click&quot;,this.prev)};a.prototype.hide=function(){var d,b,c=this;d=function(){return c.toggle(&quot;off&quot;)};b=function(){return c.$lighter.remove()};d();this.$lighter.removeClass(&quot;fade&quot;);this.$lighter.position();this.$lighter.addClass(&quot;fade&quot;);return h.execute(this.$container,b)};a.prototype.show=function(){var d,b,c=this;b=function(){return c.toggle(&quot;on&quot;)};d=function(){return g(document.body).append(c.$lighter)};d();this.$lighter.addClass(&quot;fade&quot;);this.$lighter.position();this.$lighter.removeClass(&quot;fade&quot;);return h.execute(this.$container,b)};return a})();g.fn.extend({lighter:function(a){if(a==null){a={}}return this.each(function(){var b,c,d;b=g(this);d=g.extend({},g.fn.lighter.defaults,typeof a===&quot;object&quot;&amp;&amp;a);c=typeof a===&quot;string&quot;?a:a.action;if(c==null){c=&quot;show&quot;}return e.lighter(b,d)[c]()})}})}).call(this);
</script>

Langkah Terakhir! - Memasang Code HTML, cara-nya standar saja! cukup membuat tag img yang memiliki anchor link <a href="#link_gambar" , seperti code di bawah ini :

<a href="#alamat-gambar-besar.jpg"><img src="#alamat-gambar-kecil.jpg"/></a>

Sekian Tutorial tentang Cara Membuat Lightbox Otomatis pada Gambar yang memiliki Link pada Area Posting Blog ini, semoga bermanfaat untuk sobat yang membutuhkan tutorial ini, untuk pertanyaan silahkan berkomentar di bawah area postingan ini. terima kasih sudah berkunjung dan membaca Kumpulan Tutorial Blog 2014 yang saya bagikan ini.

Postingan Sebelumnya : Cara Memasang File .MP3 ke Blog dengan JavaScript