SummArg | Cursos y recursos para webmasters

08/12/2010

Nivo Slider, múltiples efectos de transición para tu sitio o WordPress

Nivo Slider es un vistoso slider de imágenes escrito para el framework jQuery y permite efectuar entre 8 efectos de transición diferentes, además de permitirnos añadir texto en cada imagen. En esta oportunidad mostraremos como puede implementarse en cualquier website y luego cómo hacerlo funcionar en un theme WordPress.

Ver demo y descargar archivos.

Para utilizar Nivo Slider en cualquier website primero se debe descargar el script de este link e incluir en la página: jQuery, el archivo .js de Nivo y el .css.

Las llamadas a los archivos javascript y las opciones del slider pueden colocarse antes de la etiqueta </body> de la siguiente manera:

    <script type="text/javascript" src="scripts/jquery-1.4.3.min.js"></script>
   <script type="text/javascript" src="scripts/jquery.nivo.slider.pack.js"></script>
    <script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
    </script>

También es válido colocarlo entre etiquetas <head>.

El marcado HTML del slider será:

<div id="slider">
    <img src="images/slide1.jpg" alt="" />
    <a href="http://dev7studios.com"><img src="images/slide2.jpg" alt="" title="#htmlcaption" /></a>
    <img src="images/slide3.jpg" alt="" title="Ejemplo de titulo" />
    <img src="images/slide4.jpg" alt="" />
</div>
<div id="htmlcaption" class="nivo-html-caption">
    <strong>Ejemplo en negritas</strong>, con  <em>italica</em> y con un <a href="#">link</a>.
</div><

Como pueden observar, agregar títulos (captions) a las imagenes es sencillo, bastará con colocar el texto en el atributo title junto a cada imagen. Para el caso de que se desee utilizar un caption mas complejo que admita etiquetas, debemos colocar en el title con un hash el nombre del ID que debajo se explayará. Al abrir el <div> en cuestión para colocar el contenido, debemos colocarle la clase nivo-html-caption.

El CSS básico es el siguiente:

#slider {
    position:relative;
    width:618px; /* Cambiar segunr el ancho de imagenes deseado */
    height:246px; /* Cambiar segun el alto de imagenes deseado */
    background:url(images/loading.gif) no-repeat 50% 50%;
}
#slider img {
    position:absolute;
    top:0px;
    left:0px;
    display:none;
}
#slider a {
    border:0;
    display:block;
}

Hasta aquí nuestro slider funcionará con lo básico. Para personalizar sus opciones debemos modificar el primer código enunciado:

<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider({
        effect:'random', //Specify sets like: 'fold,fade,sliceDown'
        slices:15,
        animSpeed:500, // velocidad depigre transicion de los slides
        pauseTime:3000,
        startSlide:0, // slide de inicio (0 index)
        directionNav:true, //siguiente & anterior
        directionNavHide:true, //mostrar solo en hover
        controlNav:true, //1,2,3...
        controlNavThumbs:false, //usar miniaturas para el control de la nav
        controlNavThumbsFromRel:false, //usar image rel para miniaturas
        controlNavThumbsSearch: '.jpg', //formato de imagen
        controlNavThumbsReplace: '_thumb.jpg', //archivos de miniaturas
        keyboardNav:true, //usar flechas izquierda y derecha del teclado
        pauseOnHover:true, //frenar la animación cuando pasa el puntero del mouse
        manualAdvance:false, //Forzar transiciones manuales
        captionOpacity:0.8, //Opacidad de los captions
        beforeChange: function(){},
        afterChange: function(){},
        slideshowEnd: function(){}, //se dispara luego de que todas las slides se hayan mostrado
        lastSlide: function(){}, //se dispara cuando la ultima slide es mostrada
        afterLoad: function(){} //se dispara al cargar el script
    });
});
</script>

Los efectos que admite en “effect” son los siguientes:

  • sliceDown
  • sliceDownLeft
  • sliceUp
  • sliceUpLeft
  • sliceUpDown
  • sliceUpDownLeft
  • fold
  • fade
  • random

NivoSlider en WordPress

Existen varios métodos para incluir NivoSlider en WordPress, y todos corresponden a la necesidad del webmaster. Utilizaremos el modo que nos muestran en blogohblog pero no pierdan de vista que no es la única forma!

Primero se deben subir las imagenes y los scripts dentro de las carpetas del theme que utilizaremos. Creamos una categoría llamada destacados para subir entradas con imagenes desde donde nuestro slider tomará contenidos. Colocaremos la ruta de cada imagen en un campo personalizado llamado “nivo“.

El template tendrá un loop como el que sigue:

<div id="slider">
 <?php $my_query = new WP_Query('showposts=5&category_name=destacados'); while ($my_query->have_posts()) : $my_query->the_post(); ?>
 <a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
 <img src="<?php echo get_post_meta($post->ID, 'nivo', true); ?>" alt="" title="<?php the_title(); ?>" />
 </a>
 <?php endwhile; ?>
</div>
<br clear="all" />

En nuestro archivo footer.php, antes del cierre de la etiqueta <body>, colocaremos la llamada a los archivos jQuery y jQuery.nivo.slider que necesitamos, además de cargar la función con las opciones que deseamos :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="<?php bloginfo('template_directory'); ?>/jquery.nivo.slider.js" type="text/javascript"></script>
 <script type="text/javascript">
 $(window).load(function() {
 $('#slider').nivoSlider();
 });
 </script>

En el CSS del theme agregamos:

/* Nivo Slider */
.nivoSlider {position:relative;}
.nivoSlider img {position:absolute;top:0px;left:0px;}
.nivoSlider a.nivo-imageLink {position:absolute;top:0px;left:0px;width:100%;height:100%;border:0;padding:0;margin:0;z-index:60;display:none;}
.nivo-slice {display:block;position:absolute;z-index:50;height:100%;}
.nivo-caption {position:absolute;left:0px;bottom:0px;background:#000;color:#fff;opacity:0.8;/* la opcion captionOpacity sobreescribe esta */
width:100%;z-index:89;}
.nivo-caption p {padding:5px;margin:0;}
.nivo-caption a {display:inline !important;}
.nivo-html-caption {display:none;}
.nivo-directionNav a {position:absolute;top:45%;z-index:99;cursor:pointer;}
.nivo-prevNav {left:0px;}
.nivo-nextNav {right:0px;}
.nivo-controlNav a {position:relative;z-index:99;cursor:pointer;}
.nivo-controlNav a.active {font-weight:bold;}
#slider {position:relative;width:618px;height:246px;background:url(images/loading.gif) no-repeat 50% 50%;}
#slider img {position:absolute;top:0px;left:0px;display:none;}
#slider a {border:0;display:block;}
.nivo-controlNav {position:absolute;left:260px;bottom:-42px;}
.nivo-controlNav a {display:block;width:22px;height:22px;background:url(images/bullets.png) no-repeat;text-indent:-9999px;border:0;margin-right:3px;float:left;}
.nivo-controlNav a.active {background-position:0 -22px;}
.nivo-directionNav a {display:block;width:30px;height:30px;background:url(images/arrows.png) no-repeat;text-indent:-9999px;border:0;}
a.nivo-nextNav {background-position:-30px 0;right:15px;}
a.nivo-prevNav {left:15px;}
.nivo-caption {text-shadow:none;font-family: Helvetica, Arial, sans-serif;font-size:14px;}
.nivo-caption a {color:#efe9d1;text-decoration:underline;}

Existe la posibilidad de que se necesite cargar jQuery de otro modo, para lo que recomendamos leer estas indicaciones de implementación utilizando wp_enqueue_script en un tutorial realizado por los creadores de NivoSlider, o bien en nuestro tutorial  sobre cómo cargar el framework jQuery desde otra ubicación.

Dejar un comentario

  1. jose cordero

    fenomenal el aporte. Muy agradecido. Dios te bendiga.

  2. Bien. entendido como poner imagenes en el slider, pero si quiero insertar tambien videos de youtube o vimeo que debo hacer ???

  3. Una consulta, quiero agregarle una url a la imagen en el slide en php y no resulta. Saludos

  4. joaquin

    Exelente informacion.
    Consulta, como puedo manipular la secuencia en que se muestran las imagenes, quiero que una imagen se repita intercaladamente. 1-2-1-3-1-4-1

Dejar un comentario