Lightbox To Pirobox

Kamis, 31 January 2013 jam 15:29 sore

Mengganti LightBox dengan PiroBox

Updated: 2 bulan kemaren

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 dpinggir...

Step

1. Anda harus menonaktifkan LightBox bawaan blogger terlebih dahulu.
caranya: Masuk pada Setelan » 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.<span class="searchword">google</span>apis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/><br /><script src='http://ajax.<span class="searchword">google</span>apis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js' type='text/javascript'/> </span>

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>

/* Piro Box
----------------------------------------------- */
.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;width:620px;height:620px;display:none;z-index:150001;margin:0;padding:0}.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/AVvXsEgKYSE3To6cCeFeXAUGq6jVAvFNTSHdVuPirLnKvj9gQHYqs4S4KnpnsNQnzQt1pUY8UtSSAAqWk3M2P7LUTkSyVY67Em03DVA2h9EQbHcfbZwMZ0zinEquVoOwnqXCLEZ5IpH7V5l_C_U/s1600/caption.png);margin:0 0 0 4px;padding:5px}.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{border:none;vertical-align:top!important;margin:0;padding:0}.piro_html img{border:none;margin:0;padding:0}.piro_html .h_t_l{width:25px;height:25px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjixCUjVFNCgM3DCr2w_gS41r8tZbUH11zITZxWis9HGO_dy7kVPhsQKFuDrete8iikuBkS3ihsi1WPHG36jcEJCB0UBJonHUnE2HTQ9eI7OYlYlHJ8zLx5Dg0lK_Udnyc2XDi2jqVqOZQ/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/AVvXsEjixCUjVFNCgM3DCr2w_gS41r8tZbUH11zITZxWis9HGO_dy7kVPhsQKFuDrete8iikuBkS3ihsi1WPHG36jcEJCB0UBJonHUnE2HTQ9eI7OYlYlHJ8zLx5Dg0lK_Udnyc2XDi2jqVqOZQ/s1600/new_skin.png) top right no-repeat}.piro_html .h_t_c{height:25px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw_vwM4RhES9MlAAY5j31vLDQNqwSpy3Qr7awqg4ayiBrSOz9YDSynsjQI8N3baboQqv9Ezv4cxyFOBLjdG2hobQ26277fKuIkM_YVEyl7tCSWA_mr3ibG_Ajwyl-yvMUdWznxUrpU6Jk/s1600/new_skin_top.png) top repeat-x}.piro_html .h_c_l{width:25px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVSFX4TCJZHsVs8XPaRaqs-C5EB5HvBHjhlUHaj1WDcw6rmEeBiaUdxeOgRyK8WqYVq6EhiZ6b0fxtRd4zoPQrNPO3rNGoRhjVzwpoCL_6l7S6fcxdkGbccj1cp94y0yjBMAA4G1Pckq4/s1600/new_skin_left.png) left repeat-y}.piro_html .h_c_c{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiVtY9fJDMuprwqfWTu_IJb0UWPefrtwT5KOgA_DKSU0Ap08k20i8m7AQU3xsYadIHJFZDTj0-2WyT1QeUHEDmdlYXm690cDCbpHKtjgg3WQfqRO-fjs07wqKsxZaqLNhkP5Bs7bCs7xA/s1600/bg_mdl.png);position:relative;margin:0;padding:0}.piro_html .h_c_c .div_reg{width:560px;height:560px;position:relative;z-index:1500190;margin:0;padding:0}.piro_html .h_c_c .resize{position:relative;z-index:1500190;margin:0;padding:0}.piro_html .h_c_r{width:25px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVSFX4TCJZHsVs8XPaRaqs-C5EB5HvBHjhlUHaj1WDcw6rmEeBiaUdxeOgRyK8WqYVq6EhiZ6b0fxtRd4zoPQrNPO3rNGoRhjVzwpoCL_6l7S6fcxdkGbccj1cp94y0yjBMAA4G1Pckq4/s1600/new_skin_left.png) right repeat-y}.piro_html .h_mb_c{height:0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiVtY9fJDMuprwqfWTu_IJb0UWPefrtwT5KOgA_DKSU0Ap08k20i8m7AQU3xsYadIHJFZDTj0-2WyT1QeUHEDmdlYXm690cDCbpHKtjgg3WQfqRO-fjs07wqKsxZaqLNhkP5Bs7bCs7xA/s1600/bg_mdl.png);position:relative}.piro_html .h_mb_l{width:25px;height:0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVSFX4TCJZHsVs8XPaRaqs-C5EB5HvBHjhlUHaj1WDcw6rmEeBiaUdxeOgRyK8WqYVq6EhiZ6b0fxtRd4zoPQrNPO3rNGoRhjVzwpoCL_6l7S6fcxdkGbccj1cp94y0yjBMAA4G1Pckq4/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/AVvXsEiVSFX4TCJZHsVs8XPaRaqs-C5EB5HvBHjhlUHaj1WDcw6rmEeBiaUdxeOgRyK8WqYVq6EhiZ6b0fxtRd4zoPQrNPO3rNGoRhjVzwpoCL_6l7S6fcxdkGbccj1cp94y0yjBMAA4G1Pckq4/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/AVvXsEhw_vwM4RhES9MlAAY5j31vLDQNqwSpy3Qr7awqg4ayiBrSOz9YDSynsjQI8N3baboQqv9Ezv4cxyFOBLjdG2hobQ26277fKuIkM_YVEyl7tCSWA_mr3ibG_Ajwyl-yvMUdWznxUrpU6Jk/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/AVvXsEjixCUjVFNCgM3DCr2w_gS41r8tZbUH11zITZxWis9HGO_dy7kVPhsQKFuDrete8iikuBkS3ihsi1WPHG36jcEJCB0UBJonHUnE2HTQ9eI7OYlYlHJ8zLx5Dg0lK_Udnyc2XDi2jqVqOZQ/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/AVvXsEjixCUjVFNCgM3DCr2w_gS41r8tZbUH11zITZxWis9HGO_dy7kVPhsQKFuDrete8iikuBkS3ihsi1WPHG36jcEJCB0UBJonHUnE2HTQ9eI7OYlYlHJ8zLx5Dg0lK_Udnyc2XDi2jqVqOZQ/s1600/new_skin.png) bottom right no-repeat}.piro_loader{position:absolute;top:47%;left:50%;width:40px;height:40px;display:block;z-index:1500197;cursor:pointer;background:transparent no-repeat;margin:-20px 0 0 -20px}.piro_loader span{position:absolute;top:50%;left:50%;margin-top:-20px;margin-left:-20px;width:40px;height:40px;display:block;z-index:1500198;background:url(https://fbstatic-a.akamaihd.net/rsrc.php/v2/y9/r/jKEcVPZFk-2.gif) center center no-repeat;padding:0}.nav_container{position:relative;float:left;height:0;width:100%;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKYSE3To6cCeFeXAUGq6jVAvFNTSHdVuPirLnKvj9gQHYqs4S4KnpnsNQnzQt1pUY8UtSSAAqWk3M2P7LUTkSyVY67Em03DVA2h9EQbHcfbZwMZ0zinEquVoOwnqXCLEZ5IpH7V5l_C_U/s1600/caption.png) repeat;z-index:1500202;margin:5px 0 0}.piro_caption{position:absolute;bottom:4px;left:3px;display:block;cursor:text;z-index:1500197;width:auto;height:28px;overflow:hidden;margin:0;padding:2px 8px}.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;min-height:28px;text-align:left;font-weight:400;font-size:12px;z-index:150019;color:#FFF;margin:0;padding:0}.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/AVvXsEgUgUxL96yfDmJ5DJUxQlsKI5zrCjP4ZBKNGAsao1W7Qh7FBCCQoMvfgWDPv08limVWBFpKY62bnAZqEBJqsrIJ3NLPLxv-NmKHSSXEsMmnCSx4jbwJXeiheCNrLsLa5c5s7d9YMwupFL8/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;border:none;cursor:pointer;z-index:1500220;margin:0}.nav_big a.piro_prev{position:absolute;height:0;width:50%;background:transparent;top:0;left:0;text-indent:-999em;outline:none;display:none;border:none;cursor:pointer;z-index:1500221;margin:0}.nav_big a:hover.piro_prev,.nav_big a:hover.piro_next{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLD3okvwvkA0sibn_PqhH6ALBwolM8cH-4WsEulqFGSm602h8MIbRZoCdfJtV2WTMSMLTDMAi1fbqo71KSUBfz2Eh2rscj1TvQkuqvJQmNmCR1I9DMmUxSLptmDu9ydIOXIf2mwfDy15g/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/AVvXsEj2zqCD9iKTcZuMvN5HVKKAGGgvbXdEa6zwPhA1dJLLrZLYxqUBsxkCummuyHTbt87uCKF47eptGDmKjiOqaix7R9RoRTEJ44Y8WQjhHsx7rWtWEQ8GGJX56RDfXldORLRhLXArO1IuFuI/s1600/close_p.png) no-repeat;background-position:0 0;top:-22px;right:-22px;text-indent:-999em;outline:none;display:none;border:none;cursor:pointer;z-index:1500222;margin:0}.nav_big a:hover.piro_close{opacity:.8}.piro_next_fake{outline:none;text-indent:-999em;display:none;background-position:-52px -26px;border:none;cursor:auto;z-index:150020;margin:0}.nav_container a.piro_next{right:10px;text-indent:-999em;outline:none;display:block;background-position:-52px 0;border:none;cursor:pointer;z-index:150023;margin:0}.nav_container a:hover.piro_next{background-position:-52px -26px}.piro_prev_fake{outline:none;text-indent:-999em;display:none;background-position:0 -26px;border:none;cursor:auto;z-index:150020;margin:0}.nav_container a.piro_prev{text-indent:-999em;outline:none;display:block;background-position:0 0;border:none;cursor:pointer;z-index:150024;margin:0}.nav_container a:hover.piro_prev{background-position:0 -26px}.nav_container .piro_close{background-position:-26px 0;cursor:pointer;z-index:150022;display:none;margin:0}.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:#FFF;float:left;position:relative;margin:0;padding:10px}

4. Letakan kode berikut ini diatas kode </body>

/**
* 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=('<img src="//img2.blogblog.com/img/video_object.png" style="background-color: #b2b2b2; height: '+params[2]+'px; width: '+params[1]+'px; " class="BLOGGER-object-element tr_noresize tr_placeholder" id="BLOGGER_object_0" data-original-id="BLOGGER_object_0" />');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>

sumber : http://mdf-blog.blogspot.com/2012/12/mengganti-lightbox-dengan-pirobox.html

Comment
2

Restu Nugroho mengatakan...: wew,, keren bgd mas, kayak loading fb.. hehe..
mantep dehh..; 6 April 2013 02.41
Wis4nto mengatakan...: Okeh makasih :D; 3 Mei 2013 16.55

Poskan Komentar

Search This Blog

Ingat Waktu Coy

NavBar

Ext CSS

28 October 2013