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!
Dalam plugin ini saya menambahan sedikit fungsi javascript agar ketika anchor link memiliki tag
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 :
Jika sudah silahkan simpan code CSS dibawah ini tepat di atas code
Langkah-3 : Menyimpan Kode JavaScript Lighter! cara-nya silahkan simpan code JavaScript dibawah ini tepat di atas kode
Langkah Terakhir! - Memasang Code HTML, cara-nya standar saja! cukup membuat tag
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
$(".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 yang saya bagikan ini.
COMMENTS