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/AVvXsEhtEDN-WqN1QFL4ZL-mvGCCLIuFG2-hOqFKaR8q87XcbhwhOAc2Tt46Am11L8oe9tCb5lcyH8Mg7rCbjD-Rw0qtNzMmspb_KV4d6N2-EU3ZL74RyuZVMPOA8DBH9d8sQj9_maajUPqFgg5b/s1600/900x600.jpg" ><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtGjLlq463bbXzFi9ostK4y6EYBMJ2As3cW8rN_U-oSRz8RxStrum2KnMLdmL7W_CFzTU_gRfp2hAjf-q3qS3HdV_mTvn4Gn8ZaLMsoePnAe6NtP-hJfCo_zJaqLLO0P4HondueHb5ViGp/s1600/600x400.jpg" /></a>
Untuk demo-nya silahkan :
Lihat DisiniSengaja 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 KangRian.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 KangRian.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
$(".entry-content img").parents("a").on("click",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:"webkitTransitionEnd",mozTransition:"mozTransitionEnd",oTransition:"oTransitionEnd",transition:"transitionend"};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:"<div class='lighter fade'>\n <div class='lighter-container'>\n <span class='lighter-content'/>\n <a class='lighter-close'>×</a>\n <a class='lighter-prev'>‹</a>\n <a class='lighter-next'>›</a>\n </div>\n <div class='lighter-overlay'/>\n</div>"};a.lighter=function(c,d){var b;if(d==null){d={}}b=c.data("_lighter");if(!b){b=new a(c,d);c.data("_lighter",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("width")!=null)&&(this.$el.data("height")!=null)){if(b.dimensions==null){b.dimensions={width:this.$el.data("width"),height:this.$el.data("height")}}}this.settings=g.extend({},a.settings,b);this.$lighter=g(this.settings.template);this.$overlay=this.$(".lighter-overlay");this.$content=this.$(".lighter-content");this.$container=this.$(".lighter-container");this.$close=this.$(".lighter-close");this.$prev=this.$(".lighter-prev");this.$next=this.$(".lighter-next");this.$body=this.$(".lighter-body");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!=="undefined"&&event!==null){event.preventDefault()}return typeof event!=="undefined"&&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)?"image":void 0)};a.prototype.href=function(){return this.$el.attr("href")};a.prototype.process=function(){var j,c,d,b=this;d=this.type(j=this.href());this.$content.html((function(){switch(d){case"image":return g("<img/>").attr({src:j});default:return g(j)}})());switch(d){case"image":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>1){d=Math.round(d/b)}if(b>1){c=Math.round(c/b)}return this.$container.css({height:d,width:c,margin:"-"+(d/2)+"px -"+(c/2)+"px"})};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="on"}g(window)[b]("resize",this.align);g(document)[b]("keyup",this.keyup);this.$overlay[b]("click",this.close);this.$close[b]("click",this.close);this.$next[b]("click",this.next);return this.$prev[b]("click",this.prev)};a.prototype.hide=function(){var d,b,c=this;d=function(){return c.toggle("off")};b=function(){return c.$lighter.remove()};d();this.$lighter.removeClass("fade");this.$lighter.position();this.$lighter.addClass("fade");return h.execute(this.$container,b)};a.prototype.show=function(){var d,b,c=this;b=function(){return c.toggle("on")};d=function(){return g(document.body).append(c.$lighter)};d();this.$lighter.addClass("fade");this.$lighter.position();this.$lighter.removeClass("fade");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==="object"&&a);c=typeof a==="string"?a:a.action;if(c==null){c="show"}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 JavaScriptSource Code : http://ksylvest.github.io/jquery-lighter/
Komentar Terbaru