Memasang Auto Lightbox Image pada Postingan
Memasang Auto Lightbox Image pada Postingan - Tampilan preview gambar yang kita jadikan biasanya merupakan bawaan oleh blogger. Tampilan oleh bawaan blogger yang terus kita gunakan, lama kelamaan pasti akan membosankan.
Terdapat sebuah kode css yang dipadukan dengan kode javascript sehingga akan membentuk sebuah lightbox ringan dan keren.
Terlintas kata javascript, pasti terdapat pikiran di benak anda bahwa akan memberatkan blog, tidak sama kali, blog anda akan tetap stabil dan ringan seperti biasanya. Tanpa basa basi, yuk kita simak artikel ini.
PENGATURANYa, untuk menggunakan lightbox ini, anda harus mematikan bawaan dari blogger dulu. Caranya :
- Kunjungi blogger.com
- Login menggunakan akun anda
- Pilih ke menu setelan
- Pergi ke bagian pos dan komentar,
- Pilih tidak pada bagian tampilkan gambar dengan lightbox.
CARA MENAMBAHKANNYA1. Pilih template.
2. Pilih edit html.
3. Letakkan kode dibawah, diatas kode </style>
/* CSS AUTO LIGHTBOX IMAGE
=================================================== */
.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)}4. Letakkan kode dibawah diatas 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> 5. Selesai.
Source code : http://blog.kangrian.com/2014/03/Membuat-Auto-Lightbox-Image-pada-Posting-Blogger.html
Nah mungkin cukup sekian, semoga bermanfaat dan ababila terdapat salah kata, mohon maafkan saya.
