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

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!

Tutorial Blogger dan Widget Blogger
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/AVvXsEg0JBbX_VvEeShsHRGoSx2xTG4l0KKjRvI-OepgdVgza82FGnos6M9kQ1u8EG3W6IrTdSlmgu41wO0JMyqM_ouaNtWnVkDRePXcyyCCAaisApodyIg6-PF3JIfCx43V1LBb-aPDBhi3zDh0/s1600/900x600.jpg" ><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1E2FyBaRURdY2a4NkBGE6V6YR8Mm3CgqYbGnn1AA8ccSHRc3TalavfUfMrpknSzDd8i8NaqF8Hut_-NjuFOczv7nD8q5tTwH_S5KwYX8gTXCAT786X8Au8rzawj68zakpvUQ3CARWwTn3/s1600/600x400.jpg" /></a>
Sengaja saya tidak tampilkan langsung demo-nya di blog ini, karena bentrok dengan plugin jQuery Lightbox Evolution yang sudah saya pasang di blog ini.

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"/>
Catatan Penting! : Pemasangan jQuery dalam Blog hanya boleh 1x saja, jika lebih dari 1 maka Efek-efek yang mengandalkan fungsi jQuery tidak akan berfungsi.
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 Paja Tapuih=================================================== */.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 Paja Tapuih */]

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 yang saya bagikan ini.

COMMENTS

Name

Aceh,23,Adsense,8,BBM,3,Biography,1,Bitcoin,4,Blog,21,Blogger,12,Blogging,55,Business,14,Cerita,3,CPNS,1,Delicious,1,Design,1,DeviantART,1,Digg,1,Dollar,3,Dunia,13,Facebook,5,Flickr,1,Friendster,1,Gambar,2,Game,36,Gmail,1,Google+,4,Hosting,1,Inspirasi,2,Instagram,1,Internet,13,Interview,11,Kesehatan,2,LinkedIn,1,Makalah,7,Marketing,12,Meme,8,Money,3,Motivasi,2,MySpace,1,Outlook,1,Path,1,Pendidikan,10,Pengetahuan,4,Pinterest,1,Plugin,5,PNS,1,Reddit,1,Review,4,Seo,53,Smartphone,5,Social Media,38,Sukses,3,Sumatera Barat,16,Sumatera Utara,3,Templates,1,Tips,6,Toko Online,3,Top10,18,Tumblr,1,Tutorial,29,Tutorial Blog,146,Twitter,3,Umum,9,Vimeo,1,VK,1,Weebly,1,WhatsApp,1,Widget,55,Wisata,4,WordPress,14,Yahoo,1,Youtube,3,
ltr
item
Blog iTapuih.com: Memasang Auto Lightbox Image pada Area Posting Blog dengan jQuery Lighter
Memasang Auto Lightbox Image pada Area Posting Blog dengan jQuery Lighter
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUOlnmq0SJ_NSaLxBTDPRuWd02VtS2Dq8dybpLSiFb64vt2pXUghYr3hGZ3i5IMN2_xjfi0xCXr_xCjcdlG3JfZSsPPpzwgVxWgamrNIGPDT7GbaOej7WcensJonuGKNHMgQscbghSYfnV/s1600/Widget.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUOlnmq0SJ_NSaLxBTDPRuWd02VtS2Dq8dybpLSiFb64vt2pXUghYr3hGZ3i5IMN2_xjfi0xCXr_xCjcdlG3JfZSsPPpzwgVxWgamrNIGPDT7GbaOej7WcensJonuGKNHMgQscbghSYfnV/s72-c/Widget.png
Blog iTapuih.com
https://blog.itapuih.com/2018/11/memasang-auto-lightbox-image-pada-area.html
https://blog.itapuih.com/
https://blog.itapuih.com/
https://blog.itapuih.com/2018/11/memasang-auto-lightbox-image-pada-area.html
true
2732475762120586724
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy