Nivo Slider: Slideshow de imagenes JQuery

<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>

<div id="slider">
<img src="images/slide1.jpg" alt="" />
<a href="http://dev7studios.com"><img src="images/slide2.jpg" alt="" /></a>
<img src="images/slide3.jpg" alt="" title="This is an example of a caption" />
<img src="images/slide4.jpg" alt="" />
</div>

<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect:'random',
slices:15,
animSpeed:500,
pauseTime:3000,
directionNav:true, //Next & Prev
directionNavHide:true, //Only show on hover
controlNav:true, //1,2,3...
pauseOnHover:true, //Stop animation while hovering
beforeChange: function(){},
afterChange: function(){}
});
});
</script>

Este artículo tiene 31 comentarios

1. 
   carlos, hace 553 días atras:

   hola que tal buen tutorial pero un pregunta el no me funciona todo lo demas esta perfecto pero no manda a la liga gracias

2. 
   Source, hace 550 días atras:

   Quedo cortada la pregunta, si quieres puedes preguntar de nuevo

3. 
   Fabian, hace 538 días atras:

   Como se configura los botones de siguiente y anterior con consigo hacerlo HELP!!!!!!!!!!!!

4. 
   Laru, hace 537 días atras:

   [php]<script type="text/javascript">
   $(window).load(function() {
   $(‘#slider’).nivoSlider({
   effect:’random’,
   slices:15,
   animSpeed:500,
   pauseTime:3000,
   directionNav:true, //Next & Prev
   directionNavHide:true, //Only show on hover
   controlNav:true, //1,2,3…
   pauseOnHover:true, //Stop animation while hovering
   beforeChange: function(){},
   afterChange: function(){}
   });
   });
   </script>[/php]

   Si haces todos los pasos que indicamos te queda genial el Slider, en esa porción del código se activan los botones de previo y siguiente.
   Saludos!!

5. 
   Chris, hace 476 días atras:

   Funciona en wp 3.0.1?

6. 
   Source, hace 476 días atras:

   Hola Chris, el NivoSlider que esta en el post no es un plugin para wordpress pero lo puedes colocar manualmente en el código, sin embargo hay una versión para wordpress que la puedes descargar aquí, por lo que dice soporta hasta la versión 2.9 de wordpress pero lo han probado en 3.0.1 y ha funcionado.

   Saludos

7. 
   Esther, hace 471 días atras:

   Hola, me gustaría saber si se puede utilizar este slider en blogger, y si se puede, cómo se hace?

   Muchas gracias!

8. 
   Source, hace 468 días atras:

   Hola Esther, no creo que tengas problemas en colocar el Slider en blogger, para colocarlo solo sigue los pasos del tutorial

   Cualquier cosa nos consultas.

   Saludos!

9. 
   Esther, hace 463 días atras:

   Hola Source, muchas gracias por tu respuesta, pero no consigo que funcione
   Esto lo he subido antes de

   [quote]

   $(window).load(function() {
   $(‘#slider’).nivoSlider
   ({effect:’random’,
   slices:15,
   animSpeed:500,
   pauseTime:3000,
   directionNav:true,
   directionNavHide:true,
   controlNav:true,
   beforeChange: function(){},
   afterChange: function(){}
   });
   });

   [/quote]

   Esto en el CSS

   [quote]
   /*–NIVO SLIDER–*/
   .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;
   width:100%;
   z-index:89;
   }
   .nivo-caption p {
   padding:5px;
   margin:0;
   }

   .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;
   }
   #slider img {
   position:absolute;
   top:0px;
   left:0px;
   }

   [/quote]

   Y esto en la entrada donde quiero poner el Slider

   [quote]

   
   
   
   

   [/quote]

10. 
    Esther, hace 463 días atras:

    jo, puse los quote a ver si salía todo el código, pero no sale

11. 
    Source, hace 455 días atras:

    Hola Esther!

    Disculpa la demora en responderte!

    Fijate si tienes el ultimo jQuery cargado en tu blogger, si tienes otros plugins en jQuery o Mootools puede estar haciendo conflicto.
    Ademas de esto tienes que chequear que tengas la direccion de los archivos jQuery y CSS de Nivo Slider colocados correctamente en el header.

    Saludos!

12. 
    Milton, hace 454 días atras:

    Es un magnifico rotador de imagenes al igual que el Slideshow Floom http://nouincolor.com/floom/1.0/Demos/, pero queria hacerte una pregunta, hay alguna manera de implementar un codigo adicional y hacer que la imagenes se visualicen aleatoriamente…

    Slds.
    MMM

13. 
    Laru, hace 454 días atras:

    Hola Milton, poniendo el siguiente código debería funcionarte como deseas:
    En el header.php
    [php]<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js&quot; type="text/javascript"></script>
    <script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>[/php]
    Luego en donde desees colocar el plugin:

    [php]<?php

    $numero = 1 ; // Número de imágenes que vas a utilizar
    $random = rand(1,$numero); //-No cambiar
    $img = array(); //Esto indica que utilizarás una imagen
    $url = array(); //Indica que cada imagen apuntará hacia un determinado lugar (enlace)
    $txt = array(); //El "alt" de la imagen es lo que aparece cuando uno se posiciona sobre la misma
    $title = array(); //Título de la imagen

    //De aquí en más colocas las imágenes y sus respectivos anexos

    $img[1] = " http://www.tusitio.com/images/1.jpg ";
    $url[1] = " http://www.tusitio.com/";
    $txt[1] = " Imagen 1";
    $title[1] = " Imagen 1";

    //Para agregar más simplemente cambias [1] por [2], [3], etc. Debe corresponder con el número superior ($numero = 3)

    //Llamar las imágenes en la div del slider

    echo "<div id=\"slider\">";
    echo "<a href=’$url[$random]‘ target=’ _blank ‘><img src=’$img[$random]‘ alt=’$txt[$random]‘ title=’$title[$random]‘ border=’ 0 ‘></a>";
    echo "</div>";

    ?>[/php]

    Finalmente, colocamos el script:
    [php]<script type="text/javascript">
    $(window).load(function() {
    $(‘#slider’).nivoSlider({
    effect:’random’,
    slices:15,
    animSpeed:500,
    pauseTime:3000,
    directionNav:true, //Next & Prev
    directionNavHide:true, //Only show on hover
    controlNav:true, //1,2,3…
    pauseOnHover:true, //Stop animation while hovering
    beforeChange: function(){},
    afterChange: function(){}
    });
    });
    </script>[/php]

    Espero que te sirva, cualquier consulta que tengas estamos a las órdenes ^^

14. 
    eduardo buendia, hace 447 días atras:

    Buen dia. Solo para comentar que estoy tratando de usar su script pero, me salen 2 errores, cabe mencionar que entiendo bien la logica de programacion pero no le doy al error. Esto es lo que se visualiza en mi navegador, que por (cierto he probado con 4 nav. explorer,mozilla,zafari y crome), 1.- lsolo estou usando 4 imagenes y me salen numeradas 1234, en la esquina sup. derecha, y 2.- al pasar por la imagen las flechas de avance o retroceso salen como en texto.
    Pregunta: Que estoy haciendo mal..?? me podrian ayudar. He subido una pagina de ejemplo para que vean mi caso, de antemano gracias y saludos.
    http://www.grupo-cecs.com.mx/demos/nuevo.html
    pd: me gusto mucho la interfas de su sitio, felicidades.

15. 
    Laru, hace 447 días atras:

    Hola Eduardo, gracias por pasar por nuestro sitio. Me alegro de que te haya gustado la estética
    El problema que se te presenta a ti no es de programación, sino de estilo CSS.
    Lo arreglas de la siguiente manera:

    [php]<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" /> [/php]
    Ese es tu CSS, allí podrás darle estilo a las flechas para que no se vean como texto. Deberías poder agregar algun ícono, color, tamaño que desees.

    Si se te presenta algún otro problema nos avisas Saludos!

16. 
    Kro, hace 334 días atras:

    alguien sabe como cambiar la velocidad para que vaya más lento? por mas que le busco no doy bien con la opción. creo que tiene algo que ver con animSpeed….help!

17. 
    Source, hace 334 días atras:

    Hola Kro, para manejar la velocidad tienes dos elementos:

    animSpeed:500,
    pauseTime:3000,
    

    No recuerdo bien pero seguramente el que precisas debe ser pauseTime.

    Saludos.

18. 
    Fernando Molinari, hace 276 días atras:

    que tal maestro.. mira te comento… puse todo lo que me decis pero no consiguo que funcione.. es decir.. lo previsualizo y se queda girando el gif sin cargar nada.
    te dejo mi codigo:

    Documento sin título

    $(window).load(function(sliceUpLeft) {
    $(‘#slider’).nivoSlider({
    animSpeed:500,
    pauseTime:3000,
    directionNav:true,
    directionNavHide:true,
    controlNav:true,
    pauseOnHover:true,
    });
    });

    This is an example of a HTML caption with a link.

19. 
    Fernando Molinari, hace 276 días atras:

    Documento sin título

    $(window).load(function(sliceUpLeft) {
    $(‘#slider’).nivoSlider({
    animSpeed:500,
    pauseTime:3000,
    directionNav:true,
    directionNavHide:true,
    controlNav:true,
    pauseOnHover:true,
    });
    });

20. 
    higicel Dominguez, hace 275 días atras:

    Hola ya llevo más de 6 meses usando el nivo slider y todo muy bien, pero en las últimas semanas he tenido que agregar el modulo de agrandar texto en mi página pero usa el mootools.js el cual hace conflicto con el jquery.js, actualicé a las últimas versiones tanto el mootools y jquery y jalo en firefox y chrome pero sigue sin jalar en explorer. ¿alguien sabe alguna solución para que puedan convivir estos dos archivos? se los agradecería mucho.

21. 
    Edi, hace 245 días atras:

    Hola, tengo un problema con el nivo slider, provoca que no se me vea el fondo de la página…y solo me sucede en IE, en firefox va bien…por q podría ser??

22. 
    fuser, hace 188 días atras:

    Necesito saber como hago para que un vinculo externo en la misma pagina muestre el slide que yo le diga, osea si son 4 slide, que el vinculo especifico ejecute el 2.

23. 
    Nicolas Seijas, hace 179 días atras:

    Hola Fuser, no entiendo del todo tu duda, pero trataré de ayudarte. Lo que podrías hacer es colocar cada slider en una página diferente (page de WordPress) así linkeas en este vínculo externo la página del slider que deseas. Por ejemplo: “http://tusitio.com/slider-2″. Saludos!!

24. 
    yerson, hace 161 días atras:

    Hola tengo un problema con el nivo slider funciona muy bien mozilla firefox, opera, chrome perno no carga en internet explorer 8 y 9, cual podria ser el problema y como podria solucionarlo. cualquier sugerencia sera bienvenida…

25. 
    yerson, hace 160 días atras:

    Al parecer el problema es el ancho de banda de la conexion a internet en los demas navegadores funciona pero el explorer al parecer quiere una buena linea para funcionar bien.

26. 
    Claudio, hace 130 días atras:

    No se si puedas ayudarme, tambien trate de colocarlo en blogger y de hecho funciona pero las imagenes quedan sin un margen entre los demas elementos de el blog y no posee las flechas para navegar en el slide y los puntos, de hecho no se si pudieras ayudarme a que el slider quede identico al que maneja la pagina http://www.gameplanet.com, por lo que pude investigar tambien es el slider nivo, gracias por tu atencion

27. 
    Oscar, hace 115 días atras:

    Quería saber como poner nivo slider en joomla! Necesito alguna extensión o algo? gracias!

28. 
    Oscar, hace 115 días atras:

    ya está solucionado

29. 
    javitxu, hace 6 días atras:

    pues a mi me funciona bien, lo unico que cuando hago click en algun boton del menu de la pagina se extienden todas las imagenes y vuelve a reproducirse.. como se soluciona eso??? gracias

30. 
    Bernard Millán, hace 3 días atras:

    Hola coloque el script y funciona, pero tego un menu estilo ipod y por mas que busco y arreglo el estilo no se despliega, el menu que coloque es el flatmenu y es tambien un plugin de jquery que podria hacer, se le agradece toda la ayuda mil gracias. Bernard Millán…

31. 
    Roger, hace 1 día atras:

    Buen tuto, gracias por el aporte; soy sincero, encontré su sitio casi por casualidad y la verdad que me gusta mucho, soy diseñador web bueno recién empezando en todo este mundo. Bueno nada saludos y muchos éxitos.