Nivo Slider es un plugin para jQuery muy popular, que nos permite crear un slideshow de fotografías o imágenes con diferentes efectos o estilos en las transiciones, lo que lo hace ver muy dinámico y atractivo. Es muy personalizable, y permite agregar leyendas y enlaces a las imágenes. AnimeXtremo me había comentado que quería implementarlo en su blog, así que llego la hora de ver cómo ponerlo.
Al descargar el archivo desde su página, encontraremos 3 temas o estilos disponibles que son el "Default", "Orman", y "Pascal", en mi demostración y en el código que agregaré en la explicación, usaré el "Default".
Lo que necesitamos:
1. jQuery
2. Alojar el script que funciona con jQuery, y ponerlo en el blog, aunque yo lo facilitaré desde aquí, es importante que tú lo alojes y los sustituyas en el código
3. El CSS
4. El HTML donde pondrás las imágenes, leyendas, etc,
Cómo poner Nivo Slider paso a paso
Paso 1. Vas a la edición de HTML de la plantilla, y antes de </head> agregas jQuery:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
Nota: Si ya lo tienes no lo agregues. Actualmente ya fué librerada la versión 1.7.0 de jQuery, pero según comprobé provoca ciertos problemas en el Slider, por ello puse la versión anterior.
Paso 2. Inmediatamente después agregas esto:
<script src='//sites.google.com/site/scriptskarla/archivos/Nivoslider.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(window).load(function() {
$('#slider').nivoSlider();
});
//]]>
</script>
IMPORTANTE: En el caso del script marcado de rojo, te recomiendo ampliamente que alojes el archivo, no vaya a ser que lo borre por accidente etc, etc, para ello, sólo copia la dirección del archivo, lo guardas en una carpeta de tu computadora para luego subirla al servidor, y obtener la dirección propia (URL), y luego la sustituyes.
Paso 3. Verifica en vista previa y si todo luce bien, guarda los cambios.
Paso 4. Ve a Diseño > Personalizar > Avanzado> Añadir CSS y en el campo, pega el siguiente CSS:
/*
* jQuery Nivo Slider v2.6
* http://nivo.dev7studios.com
*
* Copyright 2011, Gilbert Pellegrom
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* March 2010
*/
/* Los estilos del Nivo Slider */
.nivoSlider {
position:relative;
width: 618px;
height:246px;
}
.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:6;
display:none;
}
/* Las cajas de control deslizante */
.nivo-slice {
display:block;
position:absolute;
z-index:5;
height:246px;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
}
/* Estilos de la leyenda */
.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background:#000;
color:#fff;
opacity:0.8;
width:100%;
z-index:8;
}
.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:9;
cursor:pointer;
}
.nivo-prevNav {
left:0px;
}
.nivo-nextNav {
right:0px;
}
/* Controles (e.g. 1,2,3...) */
.nivo-controlNav a {
position:relative;
z-index:9;
cursor:pointer;
}
.nivo-controlNav a.active {
font-weight:bold;
}
/*
Skin Name: Nivo Slider Default Theme
Skin URI: http://nivo.dev7studios.com
Skin Type: flexible
Description: The default skin for the Nivo Slider.
Version: 1.0
Author: Gilbert Pellegrom
Author URI: http://dev7studios.com
*/
.nivoSlider {
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinahR-UYqqGB7nIcHhQvndxKo-V19L-nBgOomCrio95S2VGL2al4HPIosShmsgyIxH5Ui1tn2VzPrGoFQqRJ0eVGDenPpeG8uEWiXYLuZ-9-FtiVd29m_JzdU0xkQwFhbxyi-3fce8_ymR/s400/loading.gif) no-repeat 50% 50%; /*con fondo blanco*/
margin-bottom:50px;
-webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
-moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
box-shadow: 0px 1px 5px 0px #4a4a4a;
width: 618px; /* Ancho de la imagen*/
height:246px; /*Alto de la imagen */
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
.nivoSlider a {
border:0;
display:block;
}
.nivo-controlNav {
position:absolute;
left:50%;
bottom:-42px;
margin-left:-40px;
}
.nivo-controlNav a {
display:block;
width:22px;
height:22px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghjsBb8EL01yUVPqwR-yPk0yNQtJtc_QkuMpxKdKkAhfQXlFByb6qrs6EGd9S9q2wl_eRZ1UK0BVNG9ZXBrlIfiyNX4eSq0lJDIUmzVAJ3Jtj58fO_VQeoR18L1ON33U4AUoJ7LV83uPkj/s400/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOZq13bqu2I7QRy-a-mn4py_Dj7a1dkY7UVZNbjtgDOT4VTWQpL_67yWyxIu0dgOik0om7X7aJyOC87Iow53JYAu6D4gapPMCqLpFuktshkJTaW2CU9nZ6SCCSnTZwcXSMpbbPUB62W4Fv/s400/arrows.png) no-repeat 0 0;
text-indent:-9999px;
border:0;
}
a.nivo-nextNav {
background-position:-30px 0;
right:15px;
}
a.nivo-prevNav {
background-position:10px 0;
left:15px;
}
.nivo-caption {
font: inherit;
}
.nivo-caption a {
color:#fff;
border-bottom:1px dotted #fff;
}
.nivo-caption a:hover {
color:#fff;
}
Notas:
- Hay tres imágenes en el CSS que resalte de rojo, que te recomiendo que alojes en Blogger,para luego sustituirlas respectivamente.
- No remuevas los créditos, así lo pide el autor.
- Si quieres puedes comprimir el CSS
- Viene configurado para mostrar imagenes de 618 x 246 pixeles.
Paso 5. Guarda los cambios en aplicar al blog.
Paso 6. Finalmente lo que falta es agregar el HTML ya sea en una sección del blog o una página estática, en donde pondrás las imágenes, las leyendas, y direcciones web de las páginas que quisieras enlazar al hacer click sobre una imagen si lo necesitaras.
<div class="nivoSlider" id="slider">
<a href="#"><img alt="" src="imagen.jpg" /></a>
<img alt="" src="imagen.jpg" title="la leyenda de la imagen" />
<img alt="" src="imagen.jpg" title="la leyenda de la imagen" />
</div>
El código anterior está listo para mostrar tres imágenes. Sustituye los datos según se muestra y que están resaltados con rojo. En donde está la "#" pones la dirección web a donde quieres que te envié al hacer click sobre la imagen. Si no la quieres elimina:
<a href="#"> y </a> que envuelve el código de la imagen.
Si no quisieras leyenda en las imágenes, eliminas esta parte de cada imagen:
title="la leyenda"
Si vas a poner mas imágenes repite esto:
<img alt="" src="imagen.jpg" title="la leyenda de la imagen" />
Si quieres poner mas imágenes con enlace entonces usa esto:
<a href="#"><img alt="" src="imagen.jpg" title="la leyenda de la imagen"/></a>
De manera opcional, se pueden controlar algunos parámetros como la velocidad entre cada transición, el estilo de las transiciones, etc, y en su página los explican, no los usé en la demostración, pero estos son los que creo podrían interesar y están resaltados de azul:
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect: 'random', // el tipo de transición: 'fold,fade,sliceDown'
animSpeed: 500, // La velocidad entre cada transición
pauseTime: 3000, // Cuanto tiempo tardará en mostrar cada diapositiva
});
});
</script>
Ahora lo que sigue, es disfrutar del slideshow ;)
No hay comentarios:
Publicar un comentario