Memasang Auto Lightbox Image pada Postingan Blog
Auto Lightbox Image ini bersifat Responsive (Disaat gambar di klik maka secara otomatis ukuran gambar yang besar akan menyesuaikan ukurannya sendiri sesuai layar), ini saya ambil dari blog +Rian Nurherdian a.k.a Kang Rian. Untuk demo silahkan klik gambar di bawah ini atau bisa klik salah satu gambar yang berada di artikel ini.
#1. Masuk ke blogger -> setelan -> pos dan komentar pada Dasboard Blogger.
#2. Cari pilihan Tampilkan gambar dengan lightbox dan pilih Tidak.
Setelah mematikan fitur bawaan blogger, sekarang saatnya untuk Memasang Auto Lightbox Image pada Postingan Blog.
#1. Masuk ke blogger -> template -> Edit HTML pada Dashboard Blogger.
#2. Pastikan kalian memasang kode di bawah ini tepat di atas kode
</head>, biasanya kode ini sudah tersedia, tetapi alangkah baiknya untuk di cek terlebih dahulu, berikut kodenya:<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"/>]]></b:skin> atau </style>./* 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 */</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>Sekian Tutorial Blogger dari saya tentang Memasang Auto Lightbox Image pada Postingan Blog, semoga artikel ini bermanfaat bagi para pembaca blog ini.
0 komentar:
Posting Komentar
Silahkan komentar yang relevan, jangan menaruh link aktif pada komentar.