Mengganti LightBox dengan PiroBox
Sebelumnya saya pernah membahas tentang cara Mengganti LightBox dengan FancyBox, dan kali ini saya akan membahas cara Mengganti LightBox dengan PiroBox (http://www.pirolab.it), ini sedikit berbeda dan lebih keren tentunya, karena PiroBox ini sudah dimodifikasi dan dilengkapi dengan fitur share facebook dan twitter seperti gambar diatas. Script PiroBox ini saya dapatkan dari Template JKT Blogger Template by MKR,
Langsung saja berikut cara menerapkan PiroBox:1. Anda harus menonaktifkan LightBox bawaan blogger terlebih dahulu.
caranya: Masuk pada Stelan » Pos dan Komentar » Tampilkan gambar dengan Lightbox ? pilih Tidak.
2. Pastikan Template anda sudah terdapat kode jQuery. kalau belum ada letakkan kode dibawah ini diatas kode </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js' type='text/javascript'/>
Itu merupakan kode jQuery.min dan jQuery-ui.min, jika di template anda sudah terdapat kode jQuery tersebut maka tidak usah di pasang lagi atau anda juga bisa mengganti kode yang lama dengan kode yang versi terbarunya.
(tidak boleh terdapat kode jQuery.min dan jQuery-ui-min lebih dari satu walaupun versinya berbeda-beda)
(tidak boleh terdapat kode jQuery.min dan jQuery-ui-min lebih dari satu walaupun versinya berbeda-beda)
3. Masuk ke Template » Edit HTML
Letakkan kode berikut ini dibawah kode ]]></b:skin>
<style type='text/css'>
.piro_overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:150000;background:#000;display:none;cursor:pointer}
.piro_html{position:absolute;top:0;left:0;padding:0;width:620px;height:620px;margin:0;display:none;padding:0;z-index:150001}
.piro_thumbs{position:absolute;bottom:0;left:0;z-index:120000000;width:100%}
.piro_thumbnails a{float:left;width:auto;height:auto;background:url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSu3VN2tIrUhD_eN4dKNilP39H86D-qF0tDz0R_vF0Hza6pMv3JCpZI63ViddwzyYWmjzujfo4-6UctR-L9qfqitiOqKnDzjAKC2uBzt9S9F29C-wj8-y26TaV7_O68t3tmsVET141AuU/s1600/caption.png);padding:5px;margin:0 0 0 4px}
.piro_thumbnails a img{float:left;width:80px;height:auto}
.piro_html table,.piro_html tbody,.piro_html tr,.piro_html th,.piro_html td{margin:0;padding:0;border:none;vertical-align:top!important}
.piro_html img{margin:0;padding:0;border:none}
.piro_html .h_t_l{width:25px;height:25px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqvW30_fslSbJIcd8SnBtJXmL5rrhszBfWLWGkMK_O9MpVDjI1pprjXVlSn2hMpyqGKqUJ-Akb96evbETI1oaSbqgf9zDgDBc9Wl7OOgH5kxXGmXk99yFC6EV3-uFVoYXNjsU9Cr6WKXg/s1600/new_skin.png) top left no-repeat}
.piro_html .h_t_r{width:25px;height:25px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqvW30_fslSbJIcd8SnBtJXmL5rrhszBfWLWGkMK_O9MpVDjI1pprjXVlSn2hMpyqGKqUJ-Akb96evbETI1oaSbqgf9zDgDBc9Wl7OOgH5kxXGmXk99yFC6EV3-uFVoYXNjsU9Cr6WKXg/s1600/new_skin.png) top right no-repeat}
.piro_html .h_t_c{height:25px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZhrFcCWjpRYm7wVRDcmwQkXHHSW7bs3Z1DFO7cYJZHq1XwK8RmTlWJTgLszCm1gO7bcaULPHIRnsFPAMFiUXLAGGH9gz4WoI9KzFtHANc81a_QqgZBOvTS9bnNf3rkgKNB1_qojWG4Es/s1600/new_skin_top.png) top repeat-x}
.piro_html .h_c_l{width:25px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdhQqjhRLhBDUQl_3miPcKzHcr1nMgqIvExvEp3lsCSfCNGU5KHzvBI7EdVbQ4ImYXy2RasgTgxD8pNm-JBAIuaJpp65banHWmZCmmO1AeTAxbjpUwYhBiiq_56J_DsCO3IXcW-jDVQMc/s1600/new_skin_left.png) left repeat-y}
.piro_html .h_c_c{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf78ciKOxWqUi29sBn9PCkMlwNEFtlK0f4evT9T7DWIxtUoj4ZbDWRG1NlQ4cKqG0TcwsYILEcktWzmhs-anC9MrdNIjAOOX5VygxqHsk3N0koEbp9CEHFaxZsbrhhjYqirtbRzIW8BX4/s1600/bg_mdl.png);margin:0;padding:0;/*overflow:hidden;*/
position:relative}
.piro_html .h_c_c .div_reg{/*background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf78ciKOxWqUi29sBn9PCkMlwNEFtlK0f4evT9T7DWIxtUoj4ZbDWRG1NlQ4cKqG0TcwsYILEcktWzmhs-anC9MrdNIjAOOX5VygxqHsk3N0koEbp9CEHFaxZsbrhhjYqirtbRzIW8BX4/s1600/bg_mdl.png);*/
width:560px;/*overflow:hidden;*/
height:560px;margin:0;padding:0;position:relative;z-index:1500190}
.piro_html .h_c_c .resize{/*overflow:hidden;*/
margin:0;padding:0;position:relative;z-index:1500190}
.piro_html .h_c_c .div_reg img{}
.piro_html .h_c_r{width:25px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdhQqjhRLhBDUQl_3miPcKzHcr1nMgqIvExvEp3lsCSfCNGU5KHzvBI7EdVbQ4ImYXy2RasgTgxD8pNm-JBAIuaJpp65banHWmZCmmO1AeTAxbjpUwYhBiiq_56J_DsCO3IXcW-jDVQMc/s1600/new_skin_left.png) right repeat-y}
.piro_html .h_mb_c{height:0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf78ciKOxWqUi29sBn9PCkMlwNEFtlK0f4evT9T7DWIxtUoj4ZbDWRG1NlQ4cKqG0TcwsYILEcktWzmhs-anC9MrdNIjAOOX5VygxqHsk3N0koEbp9CEHFaxZsbrhhjYqirtbRzIW8BX4/s1600/bg_mdl.png);position:relative}
.piro_html .h_mb_l{width:25px;height:0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdhQqjhRLhBDUQl_3miPcKzHcr1nMgqIvExvEp3lsCSfCNGU5KHzvBI7EdVbQ4ImYXy2RasgTgxD8pNm-JBAIuaJpp65banHWmZCmmO1AeTAxbjpUwYhBiiq_56J_DsCO3IXcW-jDVQMc/s1600/new_skin_left.png) left repeat-y}
.piro_html .h_mb_r{width:25px;height:0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdhQqjhRLhBDUQl_3miPcKzHcr1nMgqIvExvEp3lsCSfCNGU5KHzvBI7EdVbQ4ImYXy2RasgTgxD8pNm-JBAIuaJpp65banHWmZCmmO1AeTAxbjpUwYhBiiq_56J_DsCO3IXcW-jDVQMc/s1600/new_skin_left.png) right repeat-y;position:relative}
.piro_html .h_b_c{height:25px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZhrFcCWjpRYm7wVRDcmwQkXHHSW7bs3Z1DFO7cYJZHq1XwK8RmTlWJTgLszCm1gO7bcaULPHIRnsFPAMFiUXLAGGH9gz4WoI9KzFtHANc81a_QqgZBOvTS9bnNf3rkgKNB1_qojWG4Es/s1600/new_skin_top.png) bottom repeat-x}
.piro_html .h_b_l{width:25px;height:25px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqvW30_fslSbJIcd8SnBtJXmL5rrhszBfWLWGkMK_O9MpVDjI1pprjXVlSn2hMpyqGKqUJ-Akb96evbETI1oaSbqgf9zDgDBc9Wl7OOgH5kxXGmXk99yFC6EV3-uFVoYXNjsU9Cr6WKXg/s1600/new_skin.png) bottom left no-repeat}
.piro_html .h_b_r{width:25px;height:25px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqvW30_fslSbJIcd8SnBtJXmL5rrhszBfWLWGkMK_O9MpVDjI1pprjXVlSn2hMpyqGKqUJ-Akb96evbETI1oaSbqgf9zDgDBc9Wl7OOgH5kxXGmXk99yFC6EV3-uFVoYXNjsU9Cr6WKXg/s1600/new_skin.png) bottom right no-repeat}
.piro_loader{position:absolute;top:47%;left:50%;margin:-20px 0 0 -20px;width:40px;height:40px;display:block;z-index:1500197;cursor:pointer;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGg2-rplbnq32QD62JmXome-5H24CPWYkI_s-HxJoyRsbDPytp5py3K7K7R8POZK-uxILMilt6dDUqa7YOo2ft7312Bucul55IPZMRLkHV1rleXPA54nHkO1BdqTfyBJAVj3B-jCQlPOk/s1600/loader_nav.png) no-repeat}
.piro_loader span{position:absolute;top:50%;left:50%;margin-top:-20px;margin-left:-20px;width:40px;height:40px;padding:0;display:block;z-index:1500198;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCP5kgcwuSlypA66m3F-2QPWcFYtPXVM3a_iC6yWm98UpdH_n7B12FuL1PE4_nHafAc6urXgroP1txh9ChWl7vYSCThLygPDO-QZQTPSo8tthwoZwN-h5iXKgYjQhV8GRnat-iEiez_8A/s1600/loader.gif) center center no-repeat}
.nav_container{position:relative;float:left;margin:5px 0 0 0;height:0;width:100%;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSu3VN2tIrUhD_eN4dKNilP39H86D-qF0tDz0R_vF0Hza6pMv3JCpZI63ViddwzyYWmjzujfo4-6UctR-L9qfqitiOqKnDzjAKC2uBzt9S9F29C-wj8-y26TaV7_O68t3tmsVET141AuU/s1600/caption.png) repeat;z-index:1500202;/*border-left:1px solid #101010;border-right:1px solid #101010;*/}
.piro_caption{position:absolute;bottom:4px;left:3px;margin:0;display:block;padding:2px 8px;cursor:text;z-index:1500197;width:auto;height:28px;overflow:hidden;/*background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSu3VN2tIrUhD_eN4dKNilP39H86D-qF0tDz0R_vF0Hza6pMv3JCpZI63ViddwzyYWmjzujfo4-6UctR-L9qfqitiOqKnDzjAKC2uBzt9S9F29C-wj8-y26TaV7_O68t3tmsVET141AuU/s1600/caption.png);border:1px solid #111;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-moz-box-shadow:0 0 2px #000;-webkit-box-shadow:0 0 2px #000;box-shadow:0 0 2px #000;*/}
.piro_caption_up_down{width:25px;height:29px;background:url();position:absolute;top:-29px;right:10px}
.piro_caption p{font-family:verdana;line-height:15px;display:block;margin:0;padding:0;min-height:28px;text-align:left;font-weight:400;font-size:12px;z-index:150019;color:white}
.piro_close,a.piro_next,a.piro_prev,.piro_prev_fake,.piro_next_fake,.piro_twitter,.piro_facebook{width:26px;height:26px}
.piro_close,a.piro_next,a.piro_prev,.piro_prev_fake,.piro_next_fake,.piro_zoomIn,.piro_zoomOut,.piro_twitter,.piro_facebook{position:absolute;right:0;bottom:7px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjxqsaUosL6Lqn_pDwPtFnsdNTyaFDjTRfHVB5cUnrlljz6FndsvoTFQprkOY-eawmn370hTaHcQISu6D1NSPymyqJsjhDVd94xOSM6olfy2YQ0ACpNKoIs-rlrmebafc6oyfH23mePIk/s1600/buttons.png) no-repeat}
.nav_big{position:absolute;width:100%;height:100%;top:0;left:0;background:url();z-index:1500201}
.nav_big a.piro_next{position:absolute;height:0;width:50%;background:transparent;top:0;right:0;text-indent:-999em;outline:none;display:none;margin:0;border:none;cursor:pointer;z-index:1500220}
.nav_big a.piro_prev{position:absolute;height:0;width:50%;background:transparent;top:0;left:0;text-indent:-999em;outline:none;display:none;margin:0;border:none;cursor:pointer;z-index:1500221}
.nav_big a:hover.piro_prev,.nav_big a:hover.piro_next{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOfGhCDQoFOvzF6kElisnINB0vfHZMjNwR1Fr7bHTEVqAVQzPzLB1iHRWEwxjPgkVwzyY9SQmSP_BYPMTmONon75Yckn1xDn5h4u8gIaEfZ8lAPOZccqncWMskrnxC_nDP5yhyphenhyphenJUjKIXU/s1600/caption_w.png)}
.nav_big a.piro_close{position:absolute;height:30px!important;width:30px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5D1zZ2Xd6oTmpQcAgKDxqHmdrU_1rGx7NRTmscjsT18JpiLPQi8T3VMJRNwRfyPzzTckWrQVl86r7q232B-nqIh0125cQNyg4AnYdRex3PjfTLAmnfIN6i7jObhJZP8sFwNPqBGpWG5s/s1600/close_p.png) no-repeat;background-position:0 0;top:-22px;right:-22px;text-indent:-999em;outline:none;display:none;margin:0;border:none;cursor:pointer;z-index:1500222}
.nav_big a:hover.piro_close{opacity:.8}
.piro_next_fake{outline:none;text-indent:-999em;display:none;margin:0;background-position:-52px -26px;border:none;cursor:auto;z-index:150020}
.nav_container a.piro_next{right:10px;text-indent:-999em;outline:none;display:block;margin:0;background-position:-52px 0;border:none;cursor:pointer;z-index:150023}
.nav_container a:hover.piro_next{background-position:-52px -26px}
.piro_prev_fake{outline:none;text-indent:-999em;display:none;margin:0;background-position:0 -26px;border:none;cursor:auto;z-index:150020}
.nav_container a.piro_prev{text-indent:-999em;outline:none;display:block;margin:0;background-position:0 0;border:none;cursor:pointer;z-index:150024}
.nav_container a:hover.piro_prev{background-position:0 -26px}
.nav_container .piro_close{background-position:-26px 0;cursor:pointer;margin:0;z-index:150022;display:none}
.nav_container .piro_close:hover{background-position:-26px -26px}
.piro_zoomIn{height:26px;width:36px;text-indent:-999em;background-position:-130px 0;z-index:1500198;visibility:hidden}
.piro_zoomIn:hover{background-position:-130px -26px}
.piro_zoomOut{height:26px;width:36px;text-indent:-999em;background-position:-130px -26px;z-index:1500199;visibility:hidden}
.piro_zoomOut:hover{background-position:-130px 0}
.piro_facebook{text-indent:-999em;background-position:-78px 0;z-index:1500198}
.piro_facebook:hover{background-position:-78px -26px}
.piro_twitter{text-indent:-999em;background-position:-104px 0;z-index:1500199}
.piro_twitter:hover{background-position:-104px -26px}
.piro_html .h_c_c .div_reg .clone{background:white;margin:0;padding:10px;float:left;position:relative;}
</style>
4. Letakan kode berikut ini diatas kode </body>
<script type='text/javascript'>Terakhir Simpan template, kemudian lihat hasilnya.
//<![CDATA[
/**
* Name: PiroBox Extended v.1.3
* Date: August 2012
* Autor: Diego Valobra (http://www.pirolab.it)
* Version: 1.3
* Licence: CC-BY-SA http://creativecommons.org/licenses/by-sa/3/it/
**/
(function($){var flag_scroll=null;$.pirobox_ext=function(opt){opt=jQuery.extend({piro_speed:700,zoom_mode:true,move_mode:"mousemove",zoom_animation:true,bg_alpha:0.5,piro_scroll:true,share:true,padding:null,attribute:"data-pirobox",resize:false},opt);flag_scroll=opt.piro_scroll;if(opt.piro_speed<400){opt.piro_speed=400}var piro_capt_cont='<div class="piro_caption"></div>';$(".piro_html,.piro_overlay").remove();var struct=('<div class="piro_overlay"></div><table class="piro_html" cellpadding="0" cellspacing="0"><tr><td class="h_t_l"></td><td class="h_t_c"></td><td class="h_t_r"></td></tr><tr><td class="h_c_l"></td><td class="h_c_c"><div class="resize"><div class="piro_loader" title="close"><span></span></div><div class="nav_big"><a href="#close" class="piro_close" title="close"></a><a href="#next" class="piro_next" title="next"></a><a href="#prev" class="piro_prev" title="previous"></a></div><div class="div_reg"></div></div></td><td class="h_c_r"></td></tr><tr><td class="h_mb_l"></td><td class="h_mb_c"><div class="nav_container"><div class="nav_container_hide"><a href="#next" class="piro_next" title="next"></a><div class="piro_next_fake"></div><div class="piro_close" title="close"></div><a href="#prev" class="piro_prev" title="previous"></a><div class="piro_prev_fake"></div><a href="" target="_blank" class="piro_twitter" title="share on twitter"></a><a href="" target="_blank" class="piro_facebook" title="share on facebook"></a><a href="#ZoomIn" class="piro_zoomIn" title="ZoomIn"></a><a href="#ZoomOut" class="piro_zoomOut" title="ZoomOut"></a></div></div></td><td class="h_mb_r"></td></tr><tr><td class="h_b_l"></td><td class="h_b_c"></td><td class="h_b_r"></td></tr></table>');$("body").append(struct);$("body").append('<div class="piro_thumbs"></div>');var wrapper=$(".piro_html"),zoomIn=$(".piro_zoomIn"),zoomOut=$(".piro_zoomOut"),twitter=$(".piro_twitter"),facebook=$(".piro_facebook"),piro_next=$(".piro_next"),piro_prev=$(".piro_prev"),piro_next_big=$(".nav_big .piro_next"),piro_prev_big=$(".nav_big .piro_prev"),piro_next_fake=$(".piro_next_fake"),piro_prev_fake=$(".piro_prev_fake"),piro_close=$(".piro_close"),piro_bg=$(".piro_overlay"),piro_nav=$(".nav_container"),piro_nav_in=$(".nav_container_hide"),div_reg=$(".div_reg"),piro_loader=$(".piro_loader"),resize=$(".resize"),y=$(window).height(),x=$(window).width(),rz_img=0.9,position=-50;var my_gall_obj=$('*[class*="pirobox"]');var map=new Object();for(var i=0;i<my_gall_obj.length;i++){var it=$(my_gall_obj[i]);map["."+it.attr("class").match(/^pirobox\w*/)]=0}var gall_settings=new Array();for(var key in map){gall_settings.push(key)}for(var i=0;i<gall_settings.length;i++){if(gall_settings[i]==".pirobox"||gall_settings[i]==1){$(gall_settings[i]).addClass("single_fix")}else{if(gall_settings.length>1){$(gall_settings[i]+":first").attr("my_id","first");$(gall_settings[i]+":last").attr("my_id","last");$('*[class*="pirobox_gall"]').each(function(rev){this.rev=rev+0})}}}$.fn.piroFadeIn=function(speed,callback){$(this).fadeIn(speed,function(){if(jQuery.browser.msie){$(this).get(0).style.removeAttribute("filter")}if(callback!=undefined){callback()}})};$.fn.piroFadeOut=function(speed,callback){$(this).fadeOut(speed,function(){if(jQuery.browser.msie){$(this).get(0).style.removeAttribute("filter")}if(callback!=undefined){callback()}})};if(opt.zoom_animation==true){$("head").append('<script type="text/javascript" src="js/easing.js"><\/script>')}var piro_gallery=$(my_gall_obj);opt.padding=$(".piro_html .h_t_l").width();$(".piro_html .h_mb_c,.nav_container").animate({height:0},0);wrapper.css({left:(x/2)-(wrapper.width()/2),top:parseInt($(document).scrollTop())+(y-wrapper.height())/2});$(window).scroll(function(){wrapper.css({left:(x/2)-(wrapper.width()/2),top:parseInt($(document).scrollTop())+(y-wrapper.height())/2})});$(wrapper).add(piro_bg).hide();$(".nav_big").hide();piro_bg.css({opacity:opt.bg_alpha});$(piro_prev).add(piro_next).bind("click",function(c){$(".piro_html .h_mb_c, .nav_container").animate({height:0},0);$(".nav_big").hide();$(".div_reg").children().fadeOut(200);zoomOut.css("visibility","hidden");$(".piro_caption").remove();c.preventDefault();var obj_count=parseInt($('*[class*="pirobox_gall"]').filter(".item").attr("rev"));var start=$(this).is(".piro_prev")?$('*[class*="pirobox_gall"]').eq(obj_count-1):$('*[class*="pirobox_gall"]').eq(obj_count+1);start.click()});$("html").bind("keyup",function(c){if(c.keyCode==27){c.preventDefault();if($(piro_close).is(":visible")){close_all()}}});$("html").bind("keyup",function(e){if($(".item").attr("my_id")=="first"){}else{if($(".item").attr(opt.attribute)=="single"){piro_nav.show()}else{if(e.keyCode==37){e.preventDefault();if($(piro_close).is(":visible")){piro_prev_big.click()}}}}});$("html").bind("keyup",function(z){if($(".item").attr("my_id")=="last"){}else{if($(".item").attr(opt.attribute)=="single"){piro_nav.show()}else{if(z.keyCode==39){z.preventDefault();if($(piro_close).is(":visible")){piro_next_big.click()}}}}});function get_position(){var new_y=$(window).height(),new_x=$(window).width(),new_h=wrapper.outerHeight(true),new_w=wrapper.outerWidth(true);if(flag_scroll==false){wrapper.css({left:((new_x/2)-(new_w/2))+"px"})}else{if(flag_scroll==true){wrapper.css({left:((new_x/2)-((new_w)/2)),top:parseInt($(document).scrollTop())+(new_y-new_h)/2})}}}$(piro_gallery).each(function(){function nav_position(){piro_nav_in.each(function(){var nav_children=$(this).children(":visible").not(".piro_caption");var nav_children_not=$(this).children().not(".piro_caption").not(":visible");var increase=0;$(nav_children).each(function(){increase+=$(this).width()+6;$(this).css({visibility:"visible"});$(this).css({right:increase,"margin-right":"-20px"});zoomIn.css("margin-right","-30px");var zoom_pos=zoomIn.position();zoomOut.css({right:increase,visibility:"hidden","margin-right":"-30px"});$(nav_children_not).css("visibility","hidden")})})}var descr=$(this).attr("title"),params=$(this).attr(opt.attribute).split("-"),p_link=$(this).attr("href");$(this).unbind();$(this).bind("click",function(e){piro_bg.css({opacity:opt.bg_alpha});e.preventDefault();piro_next.add(piro_prev).hide();piro_next_fake.add(piro_prev_fake).hide();$(piro_gallery).filter(".item").removeClass("item");$(this).addClass("item");open_all();if(opt.share==true){twitter.add(facebook).show()}else{twitter.add(facebook).remove()}if($(this).attr("my_id")=="first"){piro_prev.add(piro_next_fake).hide();piro_next.add(piro_prev_fake).show()}else{piro_next.add(piro_prev).show();piro_next_fake.add(piro_prev_fake).hide()}if($(this).attr("my_id")=="last"){piro_prev.add(piro_next_fake).show();piro_next.add(piro_prev_fake).hide()}if($(this).is(".pirobox")||$(this).is(".single_fix")){piro_next.add(piro_prev).hide();$(".nav_big,.nav_big .piro_next,.nav_big .piro_prev").css("height",0).hide();piro_next_fake.add(piro_prev_fake).hide()}if($(this).attr("my_id")=="last"&&$(this).attr("my_id")=="first"){piro_next.add(piro_prev).hide();piro_next_fake.add(piro_prev_fake).hide();$(".nav_big .piro_next,.nav_big .piro_prev").css("height",0).hide()}});function open_all(){$.fn.hasAttr=function(name){return this.attr(name)!==undefined};wrapper.add(piro_bg).add(div_reg).add(piro_loader).show();function animate_html(){piro_nav_in.add(".piro_caption").hide();$(".nav_big").hide();$(".piro_zoomOut,.piro_zoomIn").css("visibility","hidden").hide();$(".nav_big").css("height",0);if(descr==""||descr===undefined||descr===false){$(".piro_caption").hide()}else{$(piro_capt_cont).appendTo(piro_nav_in)}if(params[1]=="full"){params[2]=$(window).height()-opt.padding*4;params[1]=$(window).width()-opt.padding*3}if(params[1]<=1&¶ms[2]<=1){params[2]=Math.ceil($(window).height()*(params[2]));params[1]=Math.ceil($(window).width()*(params[1]))}var y=$(window).height();var x=$(window).width();if(parseFloat(params[2])+70>y){var top=0;flag_scroll=false}else{if(params[1]=="full"){flag_scroll=opt.piro_scroll;var top=(parseInt($(document).scrollTop())+(y-params[2])/2+position)}else{var top=(parseInt($(document).scrollTop())+(y-params[2])/2+position);flag_scroll=opt.piro_scroll}}piro_close.hide();resize.add(div_reg).animate({height:+(params[2]),width:+(params[1])},opt.piro_speed);wrapper.animate({height:+(params[2])+(opt.padding*2),top:top,width:+(params[1])+(opt.padding*2),left:((x/2)-((params[1])/2+opt.padding))},opt.piro_speed,function(){$(".nav_big").hide();$(".piro_caption").html("<p>"+descr+"</p>").hide();$(".piro_html .h_mb_c,.nav_container").animate({height:41},300);piro_nav_in.show();piro_loader.hide();piro_close.show();div_reg.fadeIn(400);$(window).resize(function(){get_position()});$(window).scroll(function(){get_position()});$(".piro_caption").fadeIn(100,function(){if($(".piro_caption p").height()>28){$(".piro_caption p").css({background:"url(css_pirobox/style_12/caption_up_down.png) top right no-repeat","padding-right":"18px"});var piro_nav_length=piro_nav_in.children(":visible").not(".piro_caption").length;$(".piro_caption").css("width",params[1]-(45*piro_nav_length));$(".piro_caption").live("mouseenter",function(){$(this).stop().animate({height:$(this).children("p").outerHeight(true)},400)});$(".piro_caption").live("mouseleave",function(){$(this).animate({height:28},200)})}else{$(".piro_caption p,.piro_caption").removeAttr("style")}});nav_position()})}function animate_image(){flag_scroll=opt.piro_scroll;piro_nav_in.hide();$(".nav_big").hide();$(".nav_container, .h_mb_c").css("height",0);if(descr==""||descr===undefined||descr===false){$(".piro_caption").hide()}else{$(piro_capt_cont).appendTo(piro_nav_in)}var img=new Image();$(".div_reg img").remove();img.onerror=function(){$(".piro_caption").remove();twitter.add(facebook).hide();img.src="js/error.jpg";img.width="368";img.height="129"};img.onload=function(){var this_h=img.height,this_w=img.width,y=$(window).height(),x=$(window).width(),imgH=img.height,imgW=img.width;if(imgH+100>y||imgW+100>x){var _x=(imgW+opt.padding*2)/x,_y=(imgH+opt.padding*2)/y;if(_y>_x){imgW=Math.round(img.width*(rz_img/_y));imgH=Math.round(img.height*(rz_img/_y))}else{imgW=Math.round(img.width*(rz_img/_x));imgH=Math.round(img.height*(rz_img/_x))}if(opt.zoom_mode==true){$(".piro_zoomIn").css("visibility","visible").show();$(".piro_zoomOut").css("visibility","hidden").hide()}else{$(".piro_zoomOut,.piro_zoomIn").remove()}}else{imgH=img.height;imgW=img.width;$(".piro_zoomOut,.piro_zoomIn").css("visibility","hidden").hide()}var top=parseInt($(document).scrollTop())+(y-imgH)/2+position;if(this_h+100>y&&opt.resize==false){$(".piro_zoomOut,.piro_zoomIn").css("visibility","hidden").hide();imgH=this_h;imgW=this_w;top=30;flag_scroll=false}if(this_w+100>x&&opt.resize==false){$(".piro_zoomOut,.piro_zoomIn").css("visibility","hidden").hide();var ratio=this_h/this_w;imgH=x*ratio-100;imgW=x-100;top=30;flag_scroll=false}var y=$(window).height(),x=$(window).width();$(img).height(imgH).width(imgW);$(img).addClass("immagine");resize.add(div_reg).animate({height:imgH,width:imgW},opt.piro_speed);wrapper.animate({height:imgH+(opt.padding*2),width:imgW+(opt.padding*2),top:top,left:((x/2)-((imgW/2)+opt.padding))},opt.piro_speed,function(){facebook.attr("href","http://www.facebook.com/sharer.php?u="+img.src);twitter.attr("href","http://twitter.com/share?url="+img.src);piro_loader.hide();var cap_w=resize.width();$(".nav_big,.nav_container").show();$(".piro_caption").html("<p>"+descr+"</p>").hide();$(".nav_big,.nav_big .piro_next,.nav_big .piro_prev").css({height:imgH});$(".nav_big .piro_close").css({height:26});$(".nav_big").css({width:imgW});div_reg.append(img);$(img).fadeIn(700,function(){$(".nav_container, .h_mb_c").animate({height:41},200);piro_nav_in.show();$(window).scroll(function(){get_position();if($(".piro_zoomOut").is(":visible")){div_reg.unbind("mousemove");$(img).css({width:imgW,height:imgH,top:0,left:0},0,function(){$(".immagine").css("cursor","auto");$(img).draggable({disabled:true});zoomOut.css("visibility","hidden");zoomIn.css("visibility","visible")})}});if(opt.move_mode=="drag"){$(".immagine").attr("title","Double click to resize").add(zoomOut).bind("dblclick",function(h){h.preventDefault();$(".nav_big").show();div_reg.unbind("mousemove");$(img).draggable({disabled:true});zoomOut.css("visibility","hidden");$(".immagine").css({cursor:"auto",visibility:"visible"});zoomIn.css({visibility:"visible"});$(img).animate({width:imgW,height:imgH,top:0,left:0},600)})}else{if(opt.move_mode=="mousemove"){$(".immagine").attr("title","Click to resize").add(zoomOut).bind("click",function(h){h.preventDefault();$(".nav_big").show();div_reg.unbind("mousemove");$(img).draggable({disabled:true});zoomOut.css("visibility","hidden");$(".immagine").css({cursor:"auto",visibility:"visible"});zoomIn.css({visibility:"visible"});$(img).animate({width:imgW,height:imgH,top:0,left:0},600)})}}zoomIn.bind("click",function(w){w.preventDefault();$(this).css("visibility","hidden");zoomOut.css({visibility:"visible"}).show();$(img).draggable({disabled:false});$(img).animate({width:this_w,height:this_h,top:-(this_h-imgH)/2,left:-(this_w-imgW)/2},600,function(){if(opt.move_mode=="drag"){$(".immagine").css("cursor","move");$(".nav_big").hide();var imgPos=div_reg.offset(),x1=(imgPos.left+imgW)-this_w,y1=(imgPos.top+imgH)-this_h,x2=imgPos.left,y2=imgPos.top;if(opt.zoom_animation==true){$(img).draggable({containment:[x1,y1,x2,y2],helper:function(){return $("<div></div>").css("opacity",0)},drag:function(event,ui){var p=ui.helper.position();$(this).stop().animate({top:p.top,left:p.left},1000,"easeOutCirc")}})}else{$(img).draggable({containment:[x1,y1,x2,y2]})}}else{if(opt.move_mode=="mousemove"){$(img).draggable({disabled:true});$(".immagine").css("cursor","crosshair");$(".nav_big").hide();var div_reg_w=div_reg.width(),div_reg_h=div_reg.height(),perc_x=(this_w-div_reg_w)/div_reg_w,perc_y=(this_h-div_reg_h)/div_reg_h,last_x=0,last_y=0;div_reg.bind("mousemove",function(e){var pos_x=e.pageX-div_reg.offset().left;var pos_y=e.pageY-div_reg.offset().top;if(Math.abs(last_x-pos_x)<=1&&Math.abs(last_y-pos_y)<=1){return}last_x=pos_x;last_y=pos_y;if(opt.zoom_animation==true){$(img).stop().animate({left:-(perc_x*pos_x),top:-(perc_y*pos_y)},500,"easeOutCirc")}else{$(img).css({left:-(perc_x*pos_x),top:-(perc_y*pos_y)})}})}}})});piro_close.show();$(".piro_caption").show(0,function(){var piro_nav_length=piro_nav_in.children(":visible").not(".piro_caption").length;if($(".piro_caption p").height()>28||$(".piro_caption p").width()>imgW-(43*piro_nav_length)){$(".piro_caption p").css({background:"url(css_pirobox/style_10/caption_up_down.png) top right no-repeat","padding-right":"18px"});$(".piro_caption").css("width",imgW-(43*piro_nav_length));$(".piro_caption").live("mouseenter",function(){$(this).stop().animate({height:$(this).children("p").outerHeight(true)},400)});$(".piro_caption").live("mouseleave",function(){$(this).animate({height:28},200)})}else{$(".piro_caption p,.piro_caption").removeAttr("style")}$(this).fadeTo(200,1)});nav_position()})})};img.src=p_link;var new_h=img.height,new_w=img.width;$(window).resize(function(){get_position()})}switch(params[0]){case"iframe":div_reg.html("").css("overflow","hidden");animate_html();div_reg.piroFadeIn(300,function(){div_reg.append('<iframe id="my_frame" class="my_frame" src="'+p_link+'" frameborder="0" allowtransparency="true" scrolling="auto" align="top"></iframe>');$(".my_frame").css({height:+(params[2])+"px",width:+(params[1])+"px"});twitter.add(facebook).hide().css("visibility","hidden")});break;case"content":div_reg.html("").css("overflow","auto");$(".my_frame").remove();animate_html();div_reg.piroFadeIn(300,function(){div_reg.load(p_link);twitter.add(facebook).hide().css("visibility","hidden")});break;case"inline":div_reg.html("").css("overflow","auto");$(".my_frame").remove();animate_html();div_reg.piroFadeIn(300,function(){$(p_link).clone(true).appendTo(div_reg).addClass("clone");$(".clone").css("margin-top","0").piroFadeIn(300);twitter.add(facebook).hide().css("visibility","hidden")});break;case"flash":$(".my_frame").remove();div_reg.html("").css("overflow","hidden");animate_html();var flash_cont=('<object width="'+params[1]+'" height="'+params[2]+'"><param name="movie" value="'+p_link+'" /><param name="wmode" value="transparent" /><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="menu" value="false" /><embed src="'+p_link+'" type="application/x-shockwave-flash" allowscriptaccess="always" menu="false" wmode="transparent" allowfullscreen="true" width="'+params[1]+'" height="'+params[2]+'"></embed></object>');div_reg.piroFadeIn(300,function(){$(flash_cont).appendTo(div_reg);twitter.add(facebook).hide().css("visibility","hidden")});break;case"gallery":div_reg.css("overflow","hidden");$(".my_frame").remove();animate_image();break;case"single":$(".my_frame").remove();div_reg.html("").css("overflow","hidden");animate_image();break}}});function close_all(){$(".my_frame").add(".piro_caption").remove();$(".piro_thumbs").html("");wrapper.add(div_reg).add(resize).stop();var ie_sucks=wrapper;if($.browser.msie){ie_sucks=div_reg.add(piro_bg);$(".div_reg img").remove()}else{ie_sucks=wrapper.add(piro_bg)}ie_sucks.piroFadeOut(200,function(){div_reg.html("");piro_loader.hide();piro_nav_in.hide();$(".piro_html .h_mb_c,.nav_container").animate({height:0},0);piro_bg.add(wrapper).hide().css("visibility","visible")})}piro_close.add(piro_loader).add(piro_bg).bind("click",function(y){y.preventDefault();close_all()})}})(jQuery);
//]]>
</script>
<b:if cond='data:blog.pageType == "static_page"'>
<script type='text/javascript'>
//<![CDATA[
$(window).bind("load", function() {
$('.separator a').attr({'class':'pirobox','data-pirobox':'gallery'});
$.pirobox_ext({
attribute: 'data-pirobox',
piro_speed : 800,
bg_alpha : .3,
resize : true,
zoom_mode : true,
move_mode : 'drag',
piro_scroll : true,
share: true
});
});
//]]>
</script>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
$(window).bind("load", function() {
$('.separator a').attr({'class':'pirobox','data-pirobox':'gallery'});
$.pirobox_ext({
attribute: 'data-pirobox',
piro_speed : 800,
bg_alpha : .3,
resize : true,
zoom_mode : true,
move_mode : 'drag',
piro_scroll : true,
share: true
});
});
//]]>
</script>
</b:if>
Selamat mencoba.. :)
Posting Komentar
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA...</i>
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA...</i>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA...</strong>
Link aktif akan dimatikan secara otomatis.
NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".
NB: Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (Out Of Topic) dengan menekan tombol OOT di bawah ini.