Orbit - jQuery Image Slider Plugin para Blogger

Comparteme :

Este tutorial le mostrará cómo agregar otro deslizador de imágenes hermosas para Blogger / BlogSpot creado con jQuery y, por supuesto, con HTML y CSS. Este control deslizante, llamado Órbita, es un complemento jQuery liviano que mostrará múltiples imágenes en un espacio limitado usando las flechas de navegación (botones anterior-siguiente). En la esquina superior izquierda de la presentación de diapositivas de Orbit, tenemos algunos pequeños iconos de viñetas que indican la imagen actual que estamos viendo y, en la esquina superior derecha, la opción de pausa y un temporizador que nos informa cuándo se mostrará la siguiente imagen.

Si quieres ver este deslizador de imagen genial en acción, visita este blog de demostración:

Cómo agregar el Control deslizante de la imagen de Orbit a Blogger

Paso 1. Desde su Panel de control de Blogger, vaya a Plantilla;
Editar HTML; haga clic en cualquier lugar dentro del área de código y presione las teclas CTRL + F para abrir el cuadro de búsqueda de blogger.
Pega o escribe la etiqueta debajo del cuadro de búsqueda y presiona Enter para encontrarla.

</head>

Paso 2. Justo encima de </head> agregue los siguientes scripts:

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



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

Nota: Puede cambiar la velocidad de transición entre cada imagen modificando el valor: 5000 de la linea verde: un numero más alto hará que cada imagen permanezca mas tiempo en la cada transición.

¡Importante! Si ya tiene una versión de jQuery en su plantilla, elimine la línea en rojo, de lo contrario, la presentación de diapositivas podría no funcionar.

Paso 3. Ahora es el momento de agregar el CSS. Encuentra (CTRL + F) esta etiqueta:

]]></b:skin>

Paso 4. Justo arriba de ]]> </ b: skin> agregue éste código:

#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/AVvXsEjYMgOb4kxu1O6oSKEKyKlM3uucZbxQMvfIj0N1xYKK_mtCqsafAj4Ji0a93gwhmJxSrncEG4wyb9M4zyVIpRRD0ajmuGSE7FTWPaVxr1Xd1DVLV4qS2yW2dUhc4iUqq39DZf5MDVSHAsRk/s1600/timer-icon.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/AVvXsEjwkF7tDIU0a9cNOvxhAK0gc6n6AOO2865NOxZvwLQ8F4nvkHXTz8rGpsPaffLB0JhOtzeNH3OSW43DTeu_KBxLiGZqcmBQO8sUCxClZ9OaPAARbCF6uGeg3-ELaKVw88-vqi1vmYEdaT8a/s1600/timer-right.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/AVvXsEiANwxoXSt8hf4sSGm00rM1ZjCtE-VImkdCzS8nxU9FpMOJ_RYxMoOQGJuNc6uaDaYpKyb_Vkv7E5eWxCa8sp_7LtJa8xUdowrXDmi2XlPPfL9EuZQP0q8CObCYE2FpQjSp1rHQkv2YeaMm/s1600/pause-icon.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/AVvXsEg6rqdgIO-zf0P5yONvp3wFe4QBpF4m4jLw6ol3F8Ib19bQ6NyV4X7fQGFP2aOqtJhhU7u_qyTEf82s7arzZQX8MHU-WRxIDkMGgF_3U0KVAvChsi9p7wlxPciL9h0zk8iUMhYR-_vPJn_D/s1600/arrow-right.png);
right: 10px;
}
div.slider-nav span.left {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7wivaxU3ILj7NgUbtyegdetlWYQU2BPegi5RtXybnKXS6KRRNg8_7L5O6_unn6M3hGYLpDwZVSmwUEsWAsR3Pvkie7_CHCrwQhOD4oyuJZO0ImV2_Kl3GvU3oMSVIAcd-JyBiJuxCwPOO/s1600/arrow-left.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/AVvXsEj1UynYLB33e6vvhyphenhyphenkjr0IA8630BNx5c0ZU4uaas1JPQFzminUYSSEK9AwC-DF9tf69B_fGceeY-zuabQlnvBFfKQMtGCZmWldgMULpAdLQ9EquHHAuqZVg5wxpB_lgMxDo2IRIKnjK52ym/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; }

Paso 5. Haz clic en el botón "Guardar plantilla" para guardar los cambios.

Finalmente, usaremos el código HTML que muestra las imágenes.
Tenemos las opciones de agregar deslizante dentro de una de nuestras publicaciones o paginas, o mostrarlo como un gadget en la barra lateral del blog o debajo de la cabecera.

Si desea agregarlo dentro de sus publicaciones, cambie la pestaña HTML y pegue el código debajo de la casilla HTML de su publicación.

Si desea agregarlo en la barra lateral del blog/debajo de la cabecera, vaya a "DISEÑO" haga clic en Agregar un enlace gadget"> elija "HTML/JavaScript" en la ventana emergente y pegue éste html dentro del cuadro:

<div id='featured'>

<a href='Enlace URL'><img rel='photo1' src="URL de la imagen" style='height: 348px; width: 590px;'/></a>
<span class='orbit-caption' id='photo1'>Texto que mostrar debajo de la imagen#1</span>

<a href="Enlace URL"><img rel='photo2' src="URL de la imagen" style='height: 348px; width: 590px;'/></a>
<span class='orbit-caption' id='photo2'>Texto que mostrar debajo de la imagen#2: <a href='Descripción de Enlace URL' style='color: #09A7EA;'>Bloguero Tutorial Demo 1</a></span>

<a href="Enlace URL"><img rel='photo3' src="URL de la imagen" style='height: 348px; width: 590px;'/></a>
<span class='orbit-caption' id='photo3' style='text-align:center;'>Texto que mostrar debajo de la imagen#3</span>

<a href='Enlace URL'><img rel='photo4' src="URL de la imagen" style='height: 348px; width: 590px;'/></a>
<span class='orbit-caption' id='photo4'>Texto que mostrar debajo de la imagen#4: <a href='Descripción de Enlace URL' style='color: #09A7EA;'>Bloguero Tutorial Demo 2</a></span>

</div>

Este código contiene las imágenes, enlaces y descripciones de cada imagen. Lo que está en celeste, son las URL de los enlaces y las imágenes que se debe reemplazar con las suyas.
Dentro del código HTML de cada imagen, tiene el tamaño de cada imagen que puede modificarse modificando los valores de ancho (590) y alto (348). Para agregar la descripción de sus imágenes, reemplace el texto en rojo.

Si desea agregar mas imágenes, agregue este código HTML antes de la etiqueta </div>:

<a href="Enlace URL"><img rel='photo5' src="URL de la imagen" style='height: 348px; width: 590px;'/></a>
<span class='orbit-caption' id='photo5' style='text-align:center;'>Texto que mostrar debajo de la imagen#5</span>

Tenga en cuenta que cada imagen y descripcion tiene tiene un identificador único(ID) y no debe repetirse.
Por ejemplo, en el texto descriptivo de la primera imagen, tenemos el id="photo1" y dentro del codigo de la imagen está el atributo "rel" con el nombre del id, que es rel="photo1".

Después de que haya agregado sus imágenes, haga clic en el botón "Guardar" o "Publicar" y listo.
Ahora puedes disfrutar este genial deslizador de imagen de órbita para blogger

Demostración

Comparteme :

Author : Bloguero Tutorial

Soy el creador y editor de éste blog, cree este blog porque me encanta escribir sobre tecnología e internet, diseño web, y recursos para webmasters y Bloggers. Además, mi único propósito, es divertirme y de paso si ayudo a otras personas, mucho mejor. , click aquí ?

Orbit - jQuery Image Slider Plugin para Blogger.

Comparte