Nivo Slider es un plugin de JQuery que nos permite mostrar una galería de imágenes con diferentes efectos de transición entre ellas.




Para implementarlo nos bajamos de su página el archivo, subimos el plugin a nuestra web de alojamiento y editamos nuestra plantilla.

CSS

.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;
}


Script

Antes de </body> insertamos

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script src='URL ALOJAMIENTO/jquery.nivo.slider.js' type='text/javascript'></script>
<script type='text/javascript'>
$(window).load(function() {
$('#slider').nivoSlider({
effect:'random',
slices:15,
animSpeed:500,
pauseTime:3000,
directionNav:true,
directionNavHide:true,
controlNav:true,
beforeChange: function(){},
afterChange: function(){}
});
});
</script>

Se pueden ajustar las distintas opciones del slide, las arriba indicadas son las que muestra por defecto.


HTML

Añadimos un elemento HTML a nuestra plantilla y pegamos

<div id="slider">
<img src="URL ALOJAMIENTO IMAGEN 1" alt="" />
<img src="URL ALOJAMIENTO IMAGEN 2" alt="" />
<img src="URL ALOJAMIENTO IMAGEN 3" alt="" title="ESTO SE MOSTRARIA COMO CAPTION" />
<img src="URL ALOJAMIENTO IMAGEN 4" alt="" />
</div>

Podemos insertar el numero de imágenes que queramos y si añadimos texto en title, este aparecerá como caption en el slide.
Autor: . Consultor y auditor en posicionamiento web. Desarrollo de aplicaciones, diseño y programacion de plataformas y paginas web. Formación, profesor en el Programa SmmUs (Social Media Marketing) de la Universidad de Sevilla. Cursos sobre social media en Cámaras de Comercio de Málaga, Sevilla y Córdoba. Puedes encontrarme en Google Plus y Twitter .

¿Te gustó este post? No te pierdas los próximos, síguenos en redes sociales.

Te recomendamos también

24 comentarios:

  1. Muy bonito, me gusta y voy a probarlo :)

    ResponderEliminar
  2. Me gustó mucho, el problema es que la explicación es algo pobre, y no he podido hacerlo funcionar, incluso he visitado la página del autor, que obviamente explica como insertarlo para una página web, y los que manejamos blogspot, es algo más complicado de implementar, cabe decir que yo tengo una mínima experiencia con diseño del blog, así que no soy un novato completamente, por lo que me atrevo a decir, que la explicación es bastante pobre, pues el CSS, nunca comentas que va antes de /head o bien antes de /skin, no mencionas el onload que debe ir para que arranque al abrir el blog, o que el código debe ir entre estas // , para que blogger no cambie el código a su manera, en fin, no quiero sonar desagradecido ni muy sabiondo, como dije, apenas llevo en esto pocos meses, pero no soy alguien que no sepa nada de nada, y eso es lo que debería llamarles la atención, que tienen visitas de principiantes hasta avanzados, y que alguien que se considera en un nivel medio, no entendió ni p, imaginense, alguien que apenas va empezando en esto, si me gustaría que mostrarán como hacerlo, porque no he podido hacerlo funcionar, aunque sigo intentando, con lo poco que sé, en fin, gracias por la idea, espero poder hacerla funcionar, o regresar aquí, para ver que ustedes ya lo lograron, nos vemos...

    ResponderEliminar
  3. Muy interesante, lo he echado a andar facilmente, el comentario anterior es de alguien que obviamente no sabe ni html, a una cosa se te escapo, en la web original en ingles te da un .zip para un css y 2 imagenes que son para las flechas.

    ResponderEliminar
  4. Proteo catalogo mis entradas de tres distintas formas, principiantes, intermedio y avanzado. Para el nivel avanzado no doy ninguna explicacion, y el 99% de las entradas que hago sobre java las catalogo asi porque considero que es mejor saber lo que se hace que correr riesgos en la plantilla.

    Siempre he dicho que en esto de los blogs hay que ir paso a paso y no correr, siento que la explicacion no te sea suficiente pero es la adecuada para el nivel avanzado, tal vez te interese mas leer otras entradas de otros niveles.

    ResponderEliminar
  5. Mario ☺☺☺, suelo siempre obviarlo...

    ResponderEliminar
  6. Gracias y que bueno que me hiciste entender que este blog no es para aprender, sino para presumir que "naciste" con el conocimiento y que si no entendí algo no pregunte, me conforme con lo que sepa, como dices, si no entiendes, amuélate, y conformate con tu diseño, no trates de aprender más, si no los "grandes" te pisarán, y eso de riesgos en plantilla, bueno, seré algo tonto, pero siempre tengo plantilla de respaldo, y un slide como este lo he buscado por algún tiempo, pero...
    Y por cierto, lo de avanzado, ni lo había visto, ya ves como somos de tontos los novatos, yo sólo vi lo que había estado buscando...
    No pierdas tu tiempo en bloquearme, no creo que regrese por aquí, para eso está el maestro Jmiur en Vagabundia, que sí recuerda que todos empezamos de cero...
    Y así como yo no me fijé que esto era para "avanzados", tu también deberías haber notado, que espedifiqué que llevo poco en esto, y por lo menos, podrías haber dado un poco más de detalles en los comentarios, en vez de realzar tu superior conocimiento, see ya...

    ResponderEliminar
  7. Proteo si se comenta con respecto yo no bloqueo a nadie, siento que no te gustase mi contestacion. En muchas entradas he explicado porque lo hago asi, si tu crees que es para presumir, pues bien, peo mis motivos estan mas que expicado.

    Una cosa es aprender y otra copiar/pegar, este blog no es para quienes buscan eso, todos hemos empezado de cero pero hay una diferencia importante entre los que quieren entender como hacer las cosas y los que no, entre los que se preocupan de buscar informacion, leer, probar, equivocarse, volver a probar y los que quieren todo a la primera.

    Tal vez te interese leer esto Como Aprender, es una entrada de hace mas de un año y veras que en ella publico lo mismo que te he comentado.

    ResponderEliminar
  8. porfavor como hago para insertarlo en un blogger

    ResponderEliminar
  9. Que tal Pizcos es la primera vez que escribo más no que consulto tu buen blog! Simplemente quisiera saber que agregar para que pudiera enlazar además con una entrada la imagen o el texto del slide? Muchas Gracias

    ResponderEliminar
  10. Lo he tratado varias veces y nada, el problema es donde estoy metiendo los código, la explicación no es tan específica, crees que puedes ayudarme? Tienes dividido los código en 3 grupos diferentes CSS-SCRIP-HTML en alguno de esos estoy malinterpretando el lugar donde ponerlos, por favor ayudame, el primer bloque de código lo tienes en CSS específicamente antes de que van esos códigos? Ayuda please...

    ResponderEliminar
  11. Liliana..
    CSS antes de ]]></b:skin>
    HTML añades un elemnto HTML desde la pagina de añadir elementos
    Script antes de </body>

    pero creo que debes leer una entrada titulada JQuery antes ☺☺☺

    ResponderEliminar
  12. Secretriado, no me olvido de ti, solo que he de probarlo antes y ando escaso de tiempo ultimamente...☺☺☺

    ResponderEliminar
  13. Gracias por tu explicación, siguiendo tu consejo prueba y error, he aprendido cosas extras. Gracias por tu tiempo.

    ResponderEliminar
  14. No entiendo como se coloca :S podrias explicar detalladamente porfavor?

    ResponderEliminar
  15. el css ou script tiene algun error o esta incorrecto. mira todos saben que es un blogger expert pero nosotros somos "noobs" podrias explicar detalladamente

    ResponderEliminar
  16. Excelente!!! Funciona de Maravillas... y lo mejor es que se adapta automáticamente al tamaño de la imagen... Gracias maestro tenia tiempo pensando en algo como esto..
    bye

    ResponderEliminar
  17. Voy a probar ;)
    Por cierto, tu blog no me carga bien en Firefox (ahora estoy en Chrome). El slideshow de últimas entradas me aparece excesivamente desplazado hacia la esquina superior-derecha y se posiciona sobre los enlaces de suscripción; y la sidebar está debajo del main-wrapper. Quizás haya algún problema en la plantilla.
    Salu2, elSant0

    ResponderEliminar
  18. Elsanto actualiza tu firefox...tengo probado el blog y debe verse bien ☺☺☺

    ResponderEliminar
  19. Tengo el firefox 100% actualizado y todas las configuraciones correctas. Funciono "on linux", puede que eso tenga algo que ver porque acabo de probar en otro y ocurre igual. Sobre Chrome y Opera OK, pero sobre Firefox nanai. Seguiré usando Chrome para visitarte. Por cierto, gran blog.

    ResponderEliminar
  20. según un comentario que leí dice que una persona no sabe DE HTLM pues me parece bien mal que comenten eso porque la persona que dijo eso no nacio aprendido y por culpa de gente que deja esos comentarios la gente deja de preguntar para evitarse patadas de burro como esa
    TODO EL QUE NO SABE TIENE DERECHO A PREGUNTAR NINGUNA PREGUNTA ES MENOS VALIOSA QUE OTRA Y MENOS ENTRE GENTE QUE SABE DE LA MATERIA así que dejemos la arrogancia y expliquemos a los que están aprendiendo porque por eso pasamos todos NADIE NACIÓ APRENDIDO ....
    SALUDOS

    ResponderEliminar
  21. es una entrada vieja pero hare el intento, lo hize funcionar perfectamente en una pagina, pero luego, al querer ponerlo en otra, y con la unica diferencia del tamaño de las imagenes, no funciona la transicion boxRainGrow. me puedes ayudar

    ResponderEliminar
  22. Hola, quería preguntarte algo.
    Añadí un gadget a mi blog y puse el código html que pusiste. Obviamente no me funciona porque me falta subir el plug in. Lo descargué pero no sé en qué parte de blogger hay que subirlo. Podrías explicarme eso por favor? Muchas gracias.

    ResponderEliminar
  23. Papelpintado metelo en el mismo elemento html..deberia funcionar

    ResponderEliminar