Kang Rian


4
Kang Rian
3/28/2014 04:37:00 PM
Memasang Auto Lightbox Image pada Area Posting Blog dengan jQuery Lighter
Memasang Auto Lightbox Image pada Area Posting Blog dengan jQuery Lighter


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/AVvXsEjxoe8kL6uvqo2cVjiMyDmCOOctSgRd-7Re92FBzOdWGriZDrKkf7fg9wourB_DhdPkXvrZr-ZBU8hGMSJX9Xg0kSuZvUzvmhrNflWyBqwQsjLi-iyAxNSranLJngjACIWisIhru9GFU9rs/s1600/900x600.jpg" ><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMxI_fvuc7-GS3stDmzCYqJIkqZnso3fIyEW0raHxbJoHFwG2IPz5KccuiV1XGUcSdzpeXmMYk2DZLZt8RxqKjJoG_lSw0NjySh35lDNAT5QeWETxUGI-pAF8-vr6bpq6UaW7qOZgl28Vk/s1600/600x400.jpg" /></a>
Untuk demo-nya silahkan : Lihat Disini
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 rian-nurherdian.blogspot.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 rian-nurherdian.blogspot.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 JavaScript
Source Code : http://ksylvest.github.io/jquery-lighter/

Kang Rian Ikuti
Web & Graphic Designer - Berpengalaman sejak 2010, fokus membantu Perusahaan / UMKM agar dikenal secara Global melalui Website Profesional & Desain yg Menjual.
Cek. Jasa-Design.web.id
saya mah ngangge korek, sanes lighter!!!
BalasHapuskade atuh bilih kahuruan! :D
Hapussiiip gan... makasih ya buat tutorialnya.. ntar kapan2 saya coba.. :)
BalasHapussiap gan! semoga berhasil :thumbup
Hapuskeren kang Rian :2thumbup gambarnya jadi lebih besat , kapan-kapan saya pengen nyoba, soalnya postingan saya biasanya memuat gambar yang banyak hehe :D
BalasHapushehe, iya kang heriyanto silahkan.. kalo gak work ntar ane bantu. :) , jangan sungkan2 untuk bertanya / berkomentar. :D hehe .
HapusKeren kang jadi ketika di klik ngak keluar dari blog ya...
BalasHapusPunya saya jug dulu gitu tapi ngak tau kenapa sekarang jadi ngak berfungsi :)
iya nih kang, malah saya bentrok loh kang sama lightbox evolution.. yang jQuery lighter nya gak berfungsi gitu kang. kenapa yah? :D hehe
Hapusgara-gara teu ngopi eta teh kang ... cobian gera ku kopi hideung !!!
Hapuswah... kerenbos, bisa di coba nih, hehehe....
BalasHapusoke boss, silahkan dicoba.. semoga bermanfaat yah! :)
Hapuswidih..keyennn....tipsnya berhasil saya terapkan :) thanks Sob :)
BalasHapuswihh kerenn! :selamat selamat sob..
HapusMenarik Mas Rian Auto Lightbox Image-nya, izin pasang nch...
BalasHapusWoke silahkan kang Gunawan, semoga bermanfaat yah. :)
Hapuskeren kang, saya bookmark dlu deh
BalasHapuskalo gk salah kita pernah bincang2 soal tema artikel ini kan yaa Han ?, emg superlah kang riang ni ;)
Hapusbener umar, ntah kapan saya lupa. tp yg pasti sudah lama bgt heheheee
HapusIya tapi kapan ya saya lupa hehe
Hapussama2 lupa
Hapuswaduh, ada yang ngomongin saya ternyata :D . gapapa sob selamat positif.. terima kasih semua nya sudah mau berkunjung ke blog simple saya ini . :shakehand - Salam Blogger -
Hapuskeren.nih Kang Rian :2thumbup
BalasHapusThanks sob. :thumbup
Hapusmakasih mas, kunjungi juga blog adik
BalasHapusSitus Bola >> Http://www.prediksibola888.com
Situs Dewasa >> Http://www.kis33.net
mas gmn cara buat blog translate berjalan dengan otomatis?
BalasHapusjika ada caranya , tolong kirimkan ke bismaduta89@gmail.com
matur nuhun kang :D
BalasHapusThanks Infonya Kang.. Work Sempurna di Tempat Saia
BalasHapusKalo yang kotak hitam,trus ada script script itu scriptnya kotak hitam apa?
BalasHapusterima kasih atas informasinya saya akan coba mudah mudahan berhasil salam kenal http://whussaya.blogspot.co.id/
BalasHapusLangkah terakhirnya itu gimana y bang, cara buat tag nya dimana? dan cari yg dimaksud anchor itu apa yah?
BalasHapus