Orbit Slider (Versión Actual) en Blogger

En una entrada anterior mostraba una versión de Orbit Image Slider. En esta oportunidad enseñaré a insertar una nueva versión, la cual viene con algunas mejoras, pero contiene algunos bugs menores.

Puedes ver una muestra de éste plugin en mi blog de pruebas.

Advertencia:

El script es experimental, no cumple las funciones al 100%, pronto haré una versión a partir de la antigua librería para evitar problemas con esta mas nueva.

¿Cómo Insertarlo en Blogger?

Paso 1: Añadiendo el script y los estilos:

Primero, vamos a ''Diseño | Edición HTML'' en donde marcamos ''Expandir plantillas de artilugios''. Buscaremos la siguiente zona:

</head>

Sobre ésta, pegaremos el siguiente código:

<script src="https://sites.google.com/a/blogsydescargas.co.cc/ayudabloggers/scripts2/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="https://sites.google.com/a/blogsydescargas.co.cc/ayudabloggers/scripts2/jquery.orbit-1.2.3.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="https://sites.google.com/a/blogsydescargas.co.cc/ayudabloggers/scripts2/orbit-1.2.3.css" /> 

Paso 2: Haciendo la llamada al script y a las funciones:

Debajo del código anterior, pegaremos el siguiente código:

<script type="text/javascript">
$(window).load(function() {
$('#featured').orbit();
});
</script>
<script type="text/javascript">
$(window).load(function() {
$('#featured').orbit({
animationSpeed: 800,               
timer: false,
advanceSpeed: 4000,        
pauseOnHover: true,        
startClockOnMouseOut: false,    
startClockOnMouseOutAfter: 1000,    
directionalNav: true,        
captions: true,            
captionAnimation: 'fade',        
captionAnimationSpeed: 800,    
bullets: true,           
bulletThumbs: false,
});
});
</script>

Paso 3: Añadiendo Orbit Image Slider:

Ahora, buscaremos la siguiente zona:

<div id='content-wrapper'>

Debajo de esta, pegaremos el siguiente código:

<div id='featured'>
<img src="URL IMAGEN"  alt="HTML Captions" data-caption="#textoimagen1" />

<img src="URL IMAGEN"  alt="HTML Captions" data-caption="#textoimagen2" />

<img src="URL IMAGEN"  alt="HTML Captions" data-caption="#textoimagen3" />

</div>
<!-- Descripciones imágenes orbit jquery -->
<span class="orbit-caption" id="textoimagen1">Texto Ejemplo 1</span>
<span class="orbit-caption" id="textoimagen2">Texto Ejemplo 2</span>
<span class="orbit-caption" id="textoimagen3">Texto Ejemplo 3</span>

Guardamos los cambios y listo.

Aclaraciones:

Esta versión del script contiene atributos al igual que la versión anterior, en esta puedes configurar los siguientes:

• animation: 'fade' (Animación, cambiar por fade, horizontal-slide, vertical-slide, horizontal-push)
• animationSpeed: 800 (Velocidad de la animación)
• timer: true (Muestra u oculta el temporizador)
• advanceSpeed: 4000 (Tiempo entre imágenes)
• pauseOnHover: false (Pausa del slider al presionar)
• directionalNav: true (Muestra u oculta las flechas)
• captions: true (Permite mostrar textos)
• captionAnimation: 'fade' (Efecto textos, cambiar por ''fade, slideOpen, none'')
• captionAnimationSpeed: 800 (Velocidad animación textos)
• bullets: false (Muestra u oculta las ''bullets'' que se encuentran debajo del slider)

Consideraciones:

Este script es un poco mas tedioso que el anterior, así que deberás tener en cuenta lo siguiente:

• Deberás setear las dimensiones de todas las imágenes de forma manual y al mismo tamaño.
• Puedes añadir un enlace al slider, pero tiene problemas como textos sobrepuestos.
• Al intentar añadir una URL a la imagen, esta pierde el texto de descripción.

Sin duda, este slider es un dolor de cabezas, pero con creatividad y con un poco de ingenio se puede conseguir un resultado bastante prometedor.

Actualizaré la entrada con una variación del anterior creada a partir de las funcionalidades de esta nueva versión, ya que a pesar de que el mas antiguo es menos llamativo, se puede personalizar más. y Se puede obtener un resultado muy similar al de este Slider.

Página oficial:

Zurb.com

Tutorial a petición de deathdan93