Galería de imágenes con Orbit

Orbit es un slideshow bastante simpático y muy práctico ya que una de sus principales características es que nos permite tener mayor control sobre las imágenes que queremos mostrar, con sus enlaces de navegación en forma de flecha y una imagen en la parte superior izquierda que es la que nos indica cuál imagen es la que se muestra, y también un indicador de tiempo entre la transición de cada imagen con la opción de pausar su desplazamiento.

Este slide es apropiado para quienes quieran poner enlaces de publicidad en el sidebar del blog o bien tan solo mostrar unas cuantas imágenes del algún álbum que tengamos sin que nos ocupe demasiado espacio dentro del mismo, ya que este slide no es tan pesado y no nos retardará la carga del blog.

Mira la demostración en esta misma entrada en el sidebar de este blog.

Para ponerlo en el blog entra en Diseño, Edición html, y antes de </head> pega el siguiente código:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>

<!--[if IE]>
<style type="text/css">
.timer { display: none !important; }
div.caption { background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);zoom: 1; }
</style>
<![endif]-->

<script type='text/javascript'>
$(window).load(function() {
$(&#39;#featured&#39;).orbit({
advanceSpeed: 5000,
&#39;bullets&#39;: true,
&#39;timer&#39; : true,
&#39;animation&#39; : &#39;horizontal-slide&#39;
});
});
</script>

<script type='text/javascript'>
//<![CDATA[
/*
* jQuery Orbit Plugin 1.1
* www.ZURB.com/playground
* Copyright 2010, ZURB
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/

(function(e){e.fn.orbit=function(a){a=e.extend({animation:"fade",animationSpeed:800,advanceSpeed:4E3,startClockOnMouseOut:true,startClockOnMouseOutAfter:3E3,directionalNav:true,captions:true,captionAnimationSpeed:800,timer:false,bullets:false},a);return this.each(function(){function m(c){function g(){f.eq(h).css({"z-index":1});s=false}var h=b,k=c;if(h==k)return false;if(!s){s=true;if(c=="next"){b++;if(b==n)b=0}else if(c=="prev"){b--;if(b<0)b=n-1}else{b=c;if(h<b)k="next";else if(h>b)k="prev"}a.bullets&&
x();if(a.animation=="fade"){f.eq(h).css({"z-index":2});f.eq(b).css({opacity:0,"z-index":3}).animate({opacity:1},a.animationSpeed,g);a.captions&&o()}if(a.animation=="horizontal-slide"){f.eq(h).css({"z-index":2});k=="next"&&f.eq(b).css({left:t,"z-index":3}).animate({left:0},a.animationSpeed,g);k=="prev"&&f.eq(b).css({left:-t,"z-index":3}).animate({left:0},a.animationSpeed,g);a.captions&&o()}if(a.animation=="vertical-slide"){f.eq(h).css({"z-index":2});k=="prev"&&f.eq(b).css({top:u,"z-index":3}).animate({top:0},
a.animationSpeed,g);k=="next"&&f.eq(b).css({top:-u,"z-index":3}).animate({top:0},a.animationSpeed,g);a.captions&&o()}}}var b=0,n=0,t,u,s,d=e(this).addClass("orbit"),f=d.find("img, a img");f.each(function(){var c=e(this),g=c.width();c=c.height();d.width(g);t=d.width();d.height(c);u=d.height();n++});f.eq(b).css({"z-index":3});if(a.timer){d.append('<div class="timer"><span class="mask"><span class="rotator"></span></span><span class="pause"></span></div>');var j=e("div.timer"),p;if(j.length!=0){var C=
a.advanceSpeed/180,v=e("div.timer span.rotator"),y=e("div.timer span.mask"),z=e("div.timer span.pause"),l=0,A,w=function(){p=true;z.removeClass("active");A=setInterval(function(){var c="rotate("+l+"deg)";l+=2;v.css({"-webkit-transform":c,"-moz-transform":c,"-o-transform":c});if(l>180){v.addClass("move");y.addClass("move")}if(l>360){v.removeClass("move");y.removeClass("move");l=0;m("next")}},C)},q=function(){p=false;clearInterval(A);z.addClass("active")};w();j.click(function(){p?q():w()});if(a.startClockOnMouseOut){var B;
d.mouseleave(function(){B=setTimeout(function(){p||w()},a.startClockOnMouseOutAfter)});d.mouseenter(function(){clearTimeout(B)})}}}if(a.captions){d.append('<div class="caption"><span class="orbit-caption"></span></div>');var r=d.children("div.caption").children("span").addClass("orbit-caption").show(),o=function(){var c=f.eq(b).attr("rel"),g=e("#"+c).html(),h=r.height()+20;r.attr("id","#"+c).html(g);g?r.parent().stop().animate({bottom:0},a.captionAnimationSpeed):r.parent().stop().animate({bottom:-h},
a.captionAnimationSpeed)};o()}if(a.directionalNav){d.append('<div class="slider-nav"><span class="right">Right</span><span class="left">Left</span></div>');j=d.children("div.slider-nav").children("span.left");var D=d.children("div.slider-nav").children("span.right");j.click(function(){a.timer&&q();m("prev")});D.click(function(){a.timer&&q();m("next")})}if(a.bullets){d.append('<ul class="orbit-bullets"></ul>');var E=e("ul.orbit-bullets");for(i=0;i<n;i++){j=e("<li>"+i+"</li>");e("ul.orbit-bullets").append(j);
j.data("index",i);j.click(function(){a.timer&&q();m(e(this).data("index"))})}var x=function(){E.children("li").removeClass("active").eq(b).addClass("active")};x()}})}})(jQuery);
//]]>
</script>

Ahora, antes de ]]></b:skin> pega los estilos del slider:

/* ORBIT SLIDER
----------------------------------------------- */
#featured {height: 1px; width: 1px; overflow: hidden;}
div.orbit {
width: 1px;
height: 1px;
position: relative;
overflow: hidden;
}

div.orbit img {
position: absolute;
top: 0;
left: 0;
}
div.orbit a img {border: none;}

div.timer {
width: 40px;
height: 40px;
overflow: hidden;
position: absolute;
top: 10px;
right:10px;
opacity: .6;
cursor: pointer;
z-index: 1001;
}

span.rotator {
display: block;
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: -20px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpBXyZjsywcQP_impMv_-9Mg-87HL9YA5o2pX__SoUaX_rcbFslWL4NBVjJbd_VsG8ZahH9qLjDysYgMRciSqFZ0qhDpirzBRm1StZ5TcRxgQHvKtYH3iHGLlSD0u32365kmvr9GCVxZ2o/s1600/rotator-black.png);
background-repeat: no-repeat;
z-index: 3;
}

span.mask {
display: block;
width: 20px;
height: 40px;
position: absolute;
top: 0;
right: 0;
z-index: 2;
overflow: hidden;
}

span.rotator.move {left: 0;}
span.mask.move {
width: 40px;
left: 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuY5CACRbwJ_kP-RpkDCLWtUJr5bibOJPvKg7Zcg68zSqVBG9p0aDeedHNJYMDjldpnJnFiJE1NsBS7jxgk8RRodUluUYNqoUjjugJEwtTXKYJ9cq-7qxAf5LzqSO93qfqWJlwIpQDajtn/s1600/timer-black.png);
background-repeat: repeat;
background-position: 0px 0px;
}

span.pause {
display: block;
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: 0px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkqQ5h8bjcVvZT11GRLZYpNAOMYeRPBgxHdXZ2vwOrGlSB5oiHhysNqGkneYjtK5t9fQVXEnTdknCt-Ts9WGdff3RBenG8hQc4rJwrnq6dhcAeU9qD9BdVXfeXeMDxXoe1im4w5kjuhtBH/s1600/pause-black.png);
background-repeat: no-repeat;
z-index: 4;
opacity: 0;
}

div.timer:hover span.pause,
span.pause.active,
div.timer:hover span.pause.active { opacity: 1; }

div.caption {
background: #000;
background: rgba(0,0,0,.6);
width: 100%;
z-index: 1000;
position: absolute;
bottom:-100px;
color: #fff;
padding: 8px 0;
text-align: center;
}

div.caption span {
padding: 0 10px;
font-size: 14px;
text-shadow: 0px 1px 0px rgba(0,0,0,.8);
margin: 0;
}
.orbit-caption { display: none; }

div.orbit:hover div.slider-nav { display: block; }
div.slider-nav { display: none; }
div.slider-nav span {
width: 33px;
height: 33px;
text-indent: -9999px;
position: absolute;
z-index: 1000;
top: 43%;
cursor: pointer;
}

div.slider-nav span.right {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvz0Gm0t3Nec_FPoT1FHAbXKD6wX6-zK23FJirbTDUa1ITYMhILYly5tI3fT47pI3LQrTa6pS7bmnpJgaXQeEBkJV4gknXPcxviyeeJoi93Oj4WnpONZ8hEHlmIMwJY9k1tgW5hZgrIjpC/s1600/right-arrow.png);
right: 10px;
}
div.slider-nav span.left {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyf8kjtUX-LZErfiud3P1eSaM6F8u2EVlJ0NQKYUEsVGupf001MML-StmIW6uhghy7if1rN3ExE2eXCfOxrNSvlffL59CMxuk_TAy7cqIj1onhN1ZAwOMLL5RGwLSjfrp-AN2vWmJElpYI/s1600/left-arrow.png);
left: 10px;
}

.orbit-bullets {
position: absolute;
z-index: 1000;
list-style: none;
top: 10px;
left: 7px;
margin: 0;
padding: 0;
}

.orbit-bullets li {
float: left;
margin-left: 5px;
cursor: pointer;
color: #999;
text-indent: -9999px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-FiZRjHpC7PjicnDITyBiEhbMB6dMNGJcOrJgYOzyPPRQPdTyEeEhs067Xq7GThUxjijSU4OhrtmjSY4EV3XOS2FBQPC4kSrv6Hk5qxPxs_s1SyEcVSSAchhqW2_mB4RX25qovgOPmYNg/s1600/bullets.png);
background-repeat: no-repeat;
background-position: 0 0;
width: 7px;
height: 7px;
overflow: hidden;
}

.orbit-bullets li.active { color: #222; background-position: -7px 0; }

Esto fue lo más difícil (aunque resultó bastante sencillo, ¿verdad?) Ahora, si todo está ok en vista previa, guarda los cambios, y vamos a Diseño, Añadir Gadget, Html Javascript y pega lo siguiente:

<center><div id='featured'>

<a href='URL-del-enlace'><img rel='foto1' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMkabyV9qSeGAdpcG6UsasZ3hdlkvYZDCvfS01mU_AXpVDkXcMaYbSUazw3WDdnxPfwIqoP9PzpvUnmY61tLtkJTnWki9l9xvRIKWSqgXKG0ZhCvO7Omxa07eQlVjC5h5RofPiju6_E9U/s250/bloger%2520%2526%2520bloger%25202.jpg' style='width:200px; height:125px;'/></a>

<span class='orbit-caption' id='foto1'>Esto es un Demo de la publicidad</span>

<a href='URL-del-enlace'><img rel='foto2' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGGL6PtrvoJ_NU7K7atZmpupeEwc_ZvHDAjfMAa-kw7WPCPMbWv-LHO5OcpgffyOMXQzZYa03CNLlUUQoLgsXMifE4kQ1-hrwDuC8Qn_OS765gEJhWPUKQQA1PG6JZlPWtR6HwWBB0g7A/s250/bloger%2520%2526%2520bloger%25205.jpg' style='width:200px; height:125px;'/></a>

<span class='orbit-caption' id='foto2'>Este es un 2do. Demo de la publicidad</span>

<a href='URL-del-enlace'><img rel='foto3' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0JXfGBjmE8c717nvWwAKVd9bl_Nmy8Ig9JghghhDyFXI_FsE2dYCrhBkb1syScl177MZMZD6ipFfoX5TS1XGKSudRW7D4dEbeGd7g3RPqlCMyfIb87DoK2QRzJpnAlhc6mmNzHZOEFn8/s250/bloger%2520%2526%2520bloger%25204.gif' style='width:200px; height:125px;'/></a>

<span class='orbit-caption' id='foto3' style='text-align:center;'>Este es un 3er. Demo de la publicidad</span>

<a href='URL-del-enlace'><img rel='foto4' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWtV8VxWwHvyef-yjxyj5Au_jzL3EaAebIoEuxYUf74KjTCIXKvfCWzxtOnMtS_z4TnmCg8ss1BXGpD8tjRtBp8_RJNrkx_bpy_pOnhati41BDP7zHhhxLdqeqL7U-nOS0Bkzd3TXQbGk/s250/bloger%2520%2526%2520bloger.jpg' style='width:200px; height:125px;'/></a>

<span class='orbit-caption' id='foto4'>Este es un 4to. Demo de la publicidad</span>

<a href='URL-del-enlace'><img rel='foto5' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVWtOxhyphenhyphen-4OMNftVj5utSr1BUdvpGpQ00Z0a_9Utl3QlBd7nLyZZrXjUzW3U9wBzcvFeaxxpAdaTi2s3HBK4LeCfE4byxPFVQ1vc2jngFKeQId47tJcME-Etyxryq-GvMOSL1ZEsdyH2w/s250/bloger%2520%2526%2520bloger%25206.jpg' style='width:200px; height:125px;'/></a>

<span class='orbit-caption' id='foto5'>Este es un 5to. Demo de la publicidad</span>

<a href='URL-del-enlace'><img rel='foto6' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2KZ679MCAzyk1y3zRVJUkwQYxK5QeCRxfEsr2Z4EOQrB72xE-ekX6uTHFJ17t7V5vf93m96A8h-aQGU4v6APbZ_dvee10bSLEFocmkCl7L8fE46BgTxbjwx5g64wxqobDGJiISP1NXX0/s250/bloger%2520%2526%2520bloger1.jpg' style='width:200px; height:125px;'/></a>

<span class='orbit-caption' id='foto6'>Este es un 6to. Demo de la publicidad</span>

</div></center>

Lo que está en verde en el primer código, es JQuery, y como este slider funciona con esta librería, tenemos que ponerla, pero si ya la tienes en el blog no es necesario que la vuelvas a poner.

Puedes variar el tiempo de transición que dura de una imagen a otra cambiando advanceSpeed: 5000, por el valor que prefieras; a mayor número las imágenes cambiarán más lento.

En los enlaces del Gadget cambia URL-del-enlace por la dirección del blog que vayas a enlazar y la url-de-la-imagen que quieras poner (lo que está enmarcado en celeste) y lo que está en café es la descripción de la foto o del sitio que enlazas. El tamaño de las imágenes en este ejemplo son de 250x125px, puedes variar el tamaño (más ancho o más alto dependiendo de tu gusto) pero si lo pones en un gadget del sidebar ten en cuenta que no exceda el tamaño de éste o las imágenes se distorsionarán.

Y por último, si quieres agregar más imágenes (no pongas más de 10 para no abusar de tu blog) sólo agrega antes del último cierre de </div> lo siguiente:

<a href='URL-del-enlace'><img rel='foto7' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2KZ679MCAzyk1y3zRVJUkwQYxK5QeCRxfEsr2Z4EOQrB72xE-ekX6uTHFJ17t7V5vf93m96A8h-aQGU4v6APbZ_dvee10bSLEFocmkCl7L8fE46BgTxbjwx5g64wxqobDGJiISP1NXX0/s250/bloger%2520%2526%2520bloger1.jpg' style='width:200px; height:125px;'/></a>

<span class='orbit-caption' id='foto7'>Este es un 7to. Demo de la publicidad</span>

Si agregas más imágenes ten muy en cuenta de seguir la secuencia de la rel='' y la id='' de las imágenes (lo que está remarcado de fucsia)  rel=’foto7’ id=’foto7’,  rel=’foto8’  id=’foto8’,  rel=’foto9’  id=’foto9’ , etc., que está en dos partes en cada enlace para que todo resulte bien.