Mengganti LightBox dengan PiroBox | OOM RIO
Home » All Tutorials » Desain » jQuery » Mengganti LightBox dengan PiroBox

Tuesday, December 25, 2012

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)  

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/AVvXsEgRHJG8sDvwV2HQX0KH_suMipfJxAKSBJSAki7zIBa43Us7h4wz9KH7X0nDv5tXJqVU-3qo2NsZ0h0i2wqjc7bbzmAmkLkRFV83t8-ue2dmLIZoYdn7ifz8yiKJizdKeIzbSn3p4JD-r8k/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/AVvXsEgxTZLArvnEFtuEDs0GsEg9FAUumKru4FKTFRWToinLiGFi7y8Z9lVPyPJpQX_gsyNxb0wfdn32hwDuzpW5TYzw20-HrFkaluYf4aC9E9gKWRKlhmE6vdeXndUCVmNh-aP57BeCswXCNB4/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/AVvXsEgxTZLArvnEFtuEDs0GsEg9FAUumKru4FKTFRWToinLiGFi7y8Z9lVPyPJpQX_gsyNxb0wfdn32hwDuzpW5TYzw20-HrFkaluYf4aC9E9gKWRKlhmE6vdeXndUCVmNh-aP57BeCswXCNB4/s1600/new_skin.png) top right no-repeat}
.piro_html .h_t_c{height:25px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuwBVenJyOEPas8TSNGxj8Yk2-qA2csfaoL5NIrKujgrko5fqnbduowUzcCFnwpasuneedgOPcuswk-TY_Nv24Efba7sAy2qwKBLdiyXDRF_oT0Vovei6__T-mXAl1eZ8VZWM-J7GZXtM/s1600/new_skin_top.png) top repeat-x}
.piro_html .h_c_l{width:25px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9ffr96OzaBOQV-J1Nxyin7FK1UoYjv2Rz0NeNHqfoynBt0Ki_JUmC_a6SOvI5r4TPavmIX8Mvm7JYcty2BeyUsxdL8PF6LByZZH0CtCBpsMNquK7Y79xuj-w_lm6KMmBRNIV1q3Qm1qk/s1600/new_skin_left.png) left repeat-y}
.piro_html .h_c_c{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBp80WDzP0P0-aMCoiWYWg4EfjEmIssBGQ5TygGWSkyK1m7NPQYTdDtfJdwdCoqkWRUPCBkLw-ToKFvyRGM0Bb1HF_6CNSjA2rtTHn0Z-6VO-9QufZvVbvJQ_A3Bv5lpAwFjEMX0zuyFw/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/AVvXsEgBp80WDzP0P0-aMCoiWYWg4EfjEmIssBGQ5TygGWSkyK1m7NPQYTdDtfJdwdCoqkWRUPCBkLw-ToKFvyRGM0Bb1HF_6CNSjA2rtTHn0Z-6VO-9QufZvVbvJQ_A3Bv5lpAwFjEMX0zuyFw/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/AVvXsEj9ffr96OzaBOQV-J1Nxyin7FK1UoYjv2Rz0NeNHqfoynBt0Ki_JUmC_a6SOvI5r4TPavmIX8Mvm7JYcty2BeyUsxdL8PF6LByZZH0CtCBpsMNquK7Y79xuj-w_lm6KMmBRNIV1q3Qm1qk/s1600/new_skin_left.png) right repeat-y}
.piro_html .h_mb_c{height:0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBp80WDzP0P0-aMCoiWYWg4EfjEmIssBGQ5TygGWSkyK1m7NPQYTdDtfJdwdCoqkWRUPCBkLw-ToKFvyRGM0Bb1HF_6CNSjA2rtTHn0Z-6VO-9QufZvVbvJQ_A3Bv5lpAwFjEMX0zuyFw/s1600/bg_mdl.png);position:relative}
.piro_html .h_mb_l{width:25px;height:0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9ffr96OzaBOQV-J1Nxyin7FK1UoYjv2Rz0NeNHqfoynBt0Ki_JUmC_a6SOvI5r4TPavmIX8Mvm7JYcty2BeyUsxdL8PF6LByZZH0CtCBpsMNquK7Y79xuj-w_lm6KMmBRNIV1q3Qm1qk/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/AVvXsEj9ffr96OzaBOQV-J1Nxyin7FK1UoYjv2Rz0NeNHqfoynBt0Ki_JUmC_a6SOvI5r4TPavmIX8Mvm7JYcty2BeyUsxdL8PF6LByZZH0CtCBpsMNquK7Y79xuj-w_lm6KMmBRNIV1q3Qm1qk/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/AVvXsEjuwBVenJyOEPas8TSNGxj8Yk2-qA2csfaoL5NIrKujgrko5fqnbduowUzcCFnwpasuneedgOPcuswk-TY_Nv24Efba7sAy2qwKBLdiyXDRF_oT0Vovei6__T-mXAl1eZ8VZWM-J7GZXtM/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/AVvXsEgxTZLArvnEFtuEDs0GsEg9FAUumKru4FKTFRWToinLiGFi7y8Z9lVPyPJpQX_gsyNxb0wfdn32hwDuzpW5TYzw20-HrFkaluYf4aC9E9gKWRKlhmE6vdeXndUCVmNh-aP57BeCswXCNB4/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/AVvXsEgxTZLArvnEFtuEDs0GsEg9FAUumKru4FKTFRWToinLiGFi7y8Z9lVPyPJpQX_gsyNxb0wfdn32hwDuzpW5TYzw20-HrFkaluYf4aC9E9gKWRKlhmE6vdeXndUCVmNh-aP57BeCswXCNB4/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/AVvXsEiM-Puhl5QxMVmX4nnjVViCklGMHDB4oJjjuwWipxAayePYJ8AjCNtAnAua0cUWVxtyHFfWkSffNSse3qCx5O7uj8eghyD9pCl2QmN8Z6OOgYUbcw7xvK2KWifPqXaARJZt2RF_l29xbCY/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/AVvXsEgU5tTmn8p416Xt8vy6z5Dc-2KoO3tINyWF_vRtw-PCpXjpRBlaxfPI1GWy5AJTkcLvChdX2tA_941ZNj6CgDniS2W8luhJOeq15oekLsh4XfogKozYnJT94KbL2STykpKPPsdLMlOwA90/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/AVvXsEgRHJG8sDvwV2HQX0KH_suMipfJxAKSBJSAki7zIBa43Us7h4wz9KH7X0nDv5tXJqVU-3qo2NsZ0h0i2wqjc7bbzmAmkLkRFV83t8-ue2dmLIZoYdn7ifz8yiKJizdKeIzbSn3p4JD-r8k/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/AVvXsEgRHJG8sDvwV2HQX0KH_suMipfJxAKSBJSAki7zIBa43Us7h4wz9KH7X0nDv5tXJqVU-3qo2NsZ0h0i2wqjc7bbzmAmkLkRFV83t8-ue2dmLIZoYdn7ifz8yiKJizdKeIzbSn3p4JD-r8k/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/AVvXsEgKZxS2uCtqbsC-Rp3Mi3ILJrpH6t7CjFUvgS02z9etrps6tsv94ha-j9TPgft1jopbEF7_f1uuZM-2a5F93CL2G7f-x5Q6E_8_RQ_qj9jyHbFgUUBD8I-fD8aAlWKHMi5j5nuQBSfjqYM/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/AVvXsEgvShPAh8Z7c51okdF5YzlD9TsgqO-Qi4ZMf3EQ5kQDpC288jhBnG2_73qrHhohkK4WtchX-eam3mYX9TMKq22EgodmR-80bc-oviKN3K2aCL3yVQUlbJx2zGnNfM7V1ywKK16JlKkbGAA/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/AVvXsEiZl3khn4Go0Vx6B1594m5Y7GXkLBHzwaqxSvsQxqGEYOaMVux1xFCVYE9Dx0bBiYdmJbPtxp0tnUG_NDZj1jtIUH6jsdeENOQaa0awFH2qQ1jPOftJdUMKe7FAvYH4CgT6dzxC0nSKNRA/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'>
//<![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&&params[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 == &quot;static_page&quot;'>
<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 == &quot;item&quot;'>
<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>
Terakhir Simpan template, kemudian lihat hasilnya.
Selamat mencoba.. :)


Judul: Mengganti LightBox dengan PiroBox; Ditulis oleh Unknown; Rating Blog: 5 dari 5

Dengan memasukan alamat email dibawah ini, berarti anda akan dapat kiriman artikel terbaru dari Blogger Tutorial | SEO | Free Blogger Templates | OOM RIO.com di inbox anda:


Posted by at 9:47 PM
Labels: , ,

0 comments:

Post a Comment

Informasi Pilihan Identitas:
Google/Blogger : Khusus yang punya Account Blogger.
Lainnya : Jika tidak punya account blogger namun punya alamat Blog atau Website.
Anonim : Jika tidak ingin mempublikasikan profile anda (tidak disarankan).

Subscribe to: Post Comments (Atom)