Home  ›  Tutorial Blog

Cara Mengganti LightBox dengan PiroBox

Written By PENDIDIDKAN Tuesday, September 30, 2014 Add Comment Edit
Sebelumnya saya pernah membahas tentang Cara Membuat Custom jQuery Lightbox pada Blog, tentunya memiliki Sedikit berbeda antara lighBox dan PiroBox, Untuk PiroBox/http://www.pirolab.it ini sudah dimodifikasi dan dilengkapi dengan fitur share facebook dan twitter tentunya tampilannya lebih keren. Berikut Screen shootnya :
Untuk penerannya berikut langkah-langkahnya:

L1- Nonaktifkan fitur Lightbox bawaan Blogger
Langkah pertama yang perlu anda lakukan menonaktifkan fitur Lightbox bawaan Blogger, dengan masuk login keakun Blogger anda ► Setelan ► Pos dan Komentar ► Kemudain ubah opsi lighbox menjadi Tidak ► simpan Template , Berikut adalah screen shootnya :

L2- Penerapan CSS
Denagn menggunkan ctrl+F anda cari kode ]]></b:skin>, lalu anda terapkan kode dibawah ini sesudah 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/AVvXsEjpve5eGpdoOqeC3-jQAmSdAbV0jkqm5wF-GBYqCnaOWt8wxgaEaeADZar56yxlbCFRi0NAHEVfru2h9-dnTXqgtg-WCdZK9-7Rw1MQsYHZIvbPNNo6spaJ9p6QDdkegA1NBStlKrAk39A/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/AVvXsEhesOJzBFFP3-f7w_LI73giuhONcB_VK22je7dqgLqfskgdqbDwbRHkmAaFVGWGTc2syZxOjrOx7TSUW4xEYeV3H937Lduy7C1u0ewJDKFjVL1fryftgjoqY6B3Ptc_2KVzhwf-A4gm0Go/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/AVvXsEhesOJzBFFP3-f7w_LI73giuhONcB_VK22je7dqgLqfskgdqbDwbRHkmAaFVGWGTc2syZxOjrOx7TSUW4xEYeV3H937Lduy7C1u0ewJDKFjVL1fryftgjoqY6B3Ptc_2KVzhwf-A4gm0Go/s1600/new_skin.png) top right no-repeat}

.piro_html .h_t_c{height:25px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlO6rPYUDdhgji9GFt8Ip9Ac8_KiWGto6Jm1DMpUE0Fm9d4hY6loaT2iTVekcS3a6Md9phwYb0sKE6klSA7tV93GMW2Gk-rMa6PS7QNsOzMba2VdyryccEszpSD0H56QvN8aqri7q6YFM/s1600/new_skin_top.png) top repeat-x}

.piro_html .h_c_l{width:25px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjBk6yThLBuKwY9uV-MN-rmwxYcdKWQEvQjqM_SiD_LV5ZkiUgyHgUGU1tARKSHHe0JnghaRnqWLwtsTqoecQmb8d1w75qXmorxmwtIayCOO7qKWLGPS8khTthzsfPxw1V9fBuwlSjcbI/s1600/new_skin_left.png) left repeat-y}

.piro_html .h_c_c{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZTXsY_4LhPEYoCSpGYGpeqb4IJMg0ZINJAvGIy7oUFFTq4W4ZzOUbSPnBH4J1wV90HU9wVEOGX1wCE0U2m6fHgmZhKxAF0PfJbttPHlH-oqyCuAh6jVc6_Usj4gpHTVsUIoj9OaHgIQA/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/AVvXsEhZTXsY_4LhPEYoCSpGYGpeqb4IJMg0ZINJAvGIy7oUFFTq4W4ZzOUbSPnBH4J1wV90HU9wVEOGX1wCE0U2m6fHgmZhKxAF0PfJbttPHlH-oqyCuAh6jVc6_Usj4gpHTVsUIoj9OaHgIQA/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/AVvXsEjjBk6yThLBuKwY9uV-MN-rmwxYcdKWQEvQjqM_SiD_LV5ZkiUgyHgUGU1tARKSHHe0JnghaRnqWLwtsTqoecQmb8d1w75qXmorxmwtIayCOO7qKWLGPS8khTthzsfPxw1V9fBuwlSjcbI/s1600/new_skin_left.png) right repeat-y}

.piro_html .h_mb_c{height:0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZTXsY_4LhPEYoCSpGYGpeqb4IJMg0ZINJAvGIy7oUFFTq4W4ZzOUbSPnBH4J1wV90HU9wVEOGX1wCE0U2m6fHgmZhKxAF0PfJbttPHlH-oqyCuAh6jVc6_Usj4gpHTVsUIoj9OaHgIQA/s1600/bg_mdl.png);position:relative}

.piro_html .h_mb_l{width:25px;height:0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjBk6yThLBuKwY9uV-MN-rmwxYcdKWQEvQjqM_SiD_LV5ZkiUgyHgUGU1tARKSHHe0JnghaRnqWLwtsTqoecQmb8d1w75qXmorxmwtIayCOO7qKWLGPS8khTthzsfPxw1V9fBuwlSjcbI/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/AVvXsEjjBk6yThLBuKwY9uV-MN-rmwxYcdKWQEvQjqM_SiD_LV5ZkiUgyHgUGU1tARKSHHe0JnghaRnqWLwtsTqoecQmb8d1w75qXmorxmwtIayCOO7qKWLGPS8khTthzsfPxw1V9fBuwlSjcbI/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/AVvXsEhlO6rPYUDdhgji9GFt8Ip9Ac8_KiWGto6Jm1DMpUE0Fm9d4hY6loaT2iTVekcS3a6Md9phwYb0sKE6klSA7tV93GMW2Gk-rMa6PS7QNsOzMba2VdyryccEszpSD0H56QvN8aqri7q6YFM/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/AVvXsEhesOJzBFFP3-f7w_LI73giuhONcB_VK22je7dqgLqfskgdqbDwbRHkmAaFVGWGTc2syZxOjrOx7TSUW4xEYeV3H937Lduy7C1u0ewJDKFjVL1fryftgjoqY6B3Ptc_2KVzhwf-A4gm0Go/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/AVvXsEhesOJzBFFP3-f7w_LI73giuhONcB_VK22je7dqgLqfskgdqbDwbRHkmAaFVGWGTc2syZxOjrOx7TSUW4xEYeV3H937Lduy7C1u0ewJDKFjVL1fryftgjoqY6B3Ptc_2KVzhwf-A4gm0Go/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/AVvXsEh8caqqLEIZugg5K_ZZU4JEbXnvcpoIBbZSY-klkJZ3B8faKW9Y7WnbDvSfXNTTyBa_UP8_nLdHzkHpVBKt777fsxuFMYNqr8xnJ2hzlq_RwaPHptMjHQ-e3OOqL77T-zWAzuBx9pKwFHc/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/AVvXsEjF3t90oPOXV72YDRi_nQu9hyphenhyphenA4OXkOpXRagdH2fXTRsb7QA97-0cG5UUk-dtzeBaaqgAgTdlR9LE4nfyqpNNY0D1yUetH8M_6lHFcFSx3HaSHQ3h6LOGPix_jHkt90BWDOZl8euI5NOl8/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/AVvXsEjpve5eGpdoOqeC3-jQAmSdAbV0jkqm5wF-GBYqCnaOWt8wxgaEaeADZar56yxlbCFRi0NAHEVfru2h9-dnTXqgtg-WCdZK9-7Rw1MQsYHZIvbPNNo6spaJ9p6QDdkegA1NBStlKrAk39A/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/AVvXsEjpve5eGpdoOqeC3-jQAmSdAbV0jkqm5wF-GBYqCnaOWt8wxgaEaeADZar56yxlbCFRi0NAHEVfru2h9-dnTXqgtg-WCdZK9-7Rw1MQsYHZIvbPNNo6spaJ9p6QDdkegA1NBStlKrAk39A/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/AVvXsEiyMCrBwvavwWvR3BisrIA-bchlfZ2Ik7UeMRqOgoP1_q2LV4sUuTAMVqeZYvzsifM2rsHq0GzhHoNsVMXC98rqsv4tsZTKf05udMDWLMkFNSpAlRISfw3AHvsg-Wf79N_n2nJQ_3qISQI/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/AVvXsEhnc2wTgKmWP0HSuChMP6MSOGShBZ-tmeVbf1eyitj-6xnLdZOtjV7YEwGipLFyBvoigjM8d8-mskEG7RKxWW4Jm12E4ljnVv5Rx3uyRb134sUAze5v4mwdehXhwSD1VHAqVgzMCim1NtI/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/AVvXsEih24R_FKcaQwx69PzZnrTPmEfMg1kRJylzMr8Dzm53HfcipV8Wm5vfTQViLOgV9XAhBGUQAbbn2fgjA04P_0BBssY8RH_NByqeMK4K_9evDiG8-_4rKLE4xQBid4C220a-qYvcAgssWpc/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>

L3- Penerapan jQuery
Selanjutnya anda cari kode </head>, silahkan anda terapkan kode dibawah ini sebelum 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'/> 

Penjelasan:
jika di template anda sudah terdapat kode jQuery.min dan jQuery-ui-min maka anda tidak perlu di pasang lagi, tidak boleh terdapat kode jQuery.min dan jQuery-ui-min lebih dari satu walaupun berbeda versi.


L3-Penerapan Script
Kemudian anda cari kode </body>, terapkan kode script dibawah ini sebelum 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>


Jika semuanya sudah anda lakukan, langkah terakhir anda simpan template.

Demikian Cara Mengganti LightBox dengan PiroBox, semoga bermanfaat!

0 Response to "Cara Mengganti LightBox dengan PiroBox "

Post a Comment

Subscribe to: Post Comments (Atom)

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel