Efeito ShadowBox para Parceiros

Esse é um efeito em javascript legal, que cria uma janela ShadowBox para exibir a página do seu parceiro dentro do seu site.

Para você ver como é, clique no banner abaixo:

Para adcionar no seu blog é simples:

Crie um Gadget sem título de HTML/JavaScript em qualquer lugar do blog e cole o script abaixo:

<!-- JavaScript Slider Horizontal - Inicio-->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function() {
//Set Default State of each portfolio piece
$(".paging").show();
$(".paging a:first").addClass("active");

//Get size of images, how many there are, then determin the size of the image reel.
var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;

//Adjust the image reel to its new size
$(".image_reel").css({'width' : imageReelWidth});

//Paging + Slider Function
rotate = function(){
var triggerID = $active.attr("rel") - 1; //Get number of times to slide
var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
$(".paging a").removeClass('active'); //Remove all active class
$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)

//Slider Animation
$(".image_reel").animate({
left: -image_reelPosition
}, 500 );

};

//Rotation + Timing Event
rotateSwitch = function(){
play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
$active = $('.paging a.active').next();
if ( $active.length === 0) { //If paging reaches the end...
$active = $('.paging a:first'); //go back to first
}
rotate(); //Trigger the paging and slider function
}, 7000); //Timer speed in milliseconds (3 seconds)
};

rotateSwitch(); //Run function on launch

//On Hover
$(".image_reel a").hover(function() {
clearInterval(play); //Stop the rotation
}, function() {
rotateSwitch(); //Resume rotation
});

//On Click
$(".paging a").click(function() {
$active = $(this); //Activate the clicked paging
//Reset Timer
clearInterval(play); //Stop the rotation
rotate(); //Trigger rotation immediately
rotateSwitch(); // Resume rotation
return false; //Prevent browser jump to link anchor
});

});
></script>
<!-- JavaScript Slider Horizonta - Fim-->
<!-- Prototype y Scriptaculous-->
<script src='http://www.google.com/jsapi'></script>
<script>
google.load("prototype","1.6.0.3");
google.load("scriptaculous", "1.8.2");
</script>
<!-- Prototype y Scriptaculous-->
<!-- Script do Shadowbox -->
<link href='http://pokemonstation.co.cc/shadowbox.css' rel='stylesheet' type='text/css'/>
<script src='http://pokemonstation.co.cc/shadowbox.js' type='text/javascript'></script>
<script type='text/javascript'>
Shadowbox.init({
handleOversize: "drag",
modal: true
});
</script>
<!-- Fim do script do Shadowbox -->
<script type="text/javascript">(function(){var a;var b=navigator.userAgent;a=-1!=b.indexOf("Mobile")&&-1!=b.indexOf("WebKit")&&-1==b.indexOf("iPad")||-1!=b.indexOf("Opera Mini")?!0:!1;if(a){var c;a:{var d=window.location.href,e=d.split("?");switch(e.length){case 1:c=d+"?m=1";break a;case 2:c=0<=e[1].search("(^|&)m=")?null:d+"&m=1";break a;default:c=null}}c&&window.location.replace(c)};})();
</script><script type="text/javascript">
if (window.jstiming) window.jstiming.load.tick('headEnd');
</script>


Pronto, agora que ja temos o nosso "minúsculo" Script vamos adcionar o banner.

O código do banner terá de ser assim:

<a href="LINK_DO_PARCEIRO" target="_blank" rel="shadowbox[parceiros];" title="TÍTULO_DO_PARCEIRO"><img src="LINK_DO_BANNER" border="0" /></a>

Preencha os campos de acordo com as indicações e pronto, você ja tem o seu efeito ShadowBox.