Este es un carrusel de im?genes de Brian R. Miedlar que muestra las im?genes con un efecto de deslizamiento y regresa al inicio una vez llegado a la ?ltima imagen. Est? hecho con Scriptaculous as? que quienes usen jQuery ya saben que deber?n aplicar un hack para que ambos scripts funcionen.
Puedes ver un ejemplo funcionando en este blog de pruebas.
Para poner este carrusel de im?genes en tu blog primero necesitas descargar este archivo, descomprimirlo, y subir los archivos a un hosting.
Luego, entra en la Edici?n HTML de tu plantilla y agrega antes de </head> esto:
<!-- Prototype y Scriptaculous-->
<script src='http://www.google.com/jsapi'></script>
<script>
google.load("prototype","1.7.0.0");
google.load("scriptaculous", "1.9.0");
</script>
<!-- Prototype y Scriptaculous-->
<script language='javascript' src='URL del archivo os.js' type='text/javascript'/>
<script language='javascript' src='URL del archivo carousel.js' type='text/javascript'/>
<script language='javascript' src='URL del archivo application.js' type='text/javascript'/>
Si ya tienes Scriptaculous y Prototype no hace falta que agregues el c?digo gris, pero el resto s?. Ah? coloca donde se indica en color rojo las URLs de los archivos que subiste previamente.
Ahora antes de ]]></b:skin> pega los estilos.
.carousel {Despu�s entra en Dise?o | Elementos de la p?gina | A?adir un gadget | HTML/Javascript, o si usas la nueva interfaz entra en Dise?o | A?adir un gadget | HTML/Javascript, y ah? pega la estructura del carrusel:
position:relative;
clear:both;
left:20px; /* Distancia desde la izquierda */
margin-top:10px;
margin-bottom:20px; /* Margen inferior */
border:2px solid #D8D8D8; /* Borde del carrusel */
background-color:#F2F2F2; /* Color de fondo */
}
.carousel .navButton {cursor:pointer; display:block; text-indent:-9999px; background-repeat:none; z-index:10;}
.carousel .container { position:absolute; overflow:hidden; }
.carousel .items { position:absolute; }
#Carousel2 {
height:88px; /* Alto del contenedor */
width:685px; /* Ancho del contenedor */
}
#Carousel2 .container {
left:26px;
top:12px;
width:630px; /* Ancho del contenedor de las im?genes */
height:100px; /* Alto del contenedor de las im?genes */
}
#Carousel2 .items { top:0; left:2px;
width:1700px; /* Ancho total de todas las minaturas */
}
#Carousel2 .item { height:70px; width:70px; float:left; clear:right; }
#Carousel2 .item .icon img { position:relative; left:0px; width:65px !important; height:65px; cursor:pointer;}
#Carousel2 .navButton { position:absolute; bottom:0px; width:24px; height:87px; }
#Carousel2 .navButton.previous { left:0px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcAaG-5zq4o3_Eop8qVgeqX3Xvh2SxKr8NeFRzmw85flGt1KyNdCZ8mSwsVaehdAlKaakX9JJ2CoQkUnd4y2FYTR8Izu93szVc7RgZTjQJy0eDqJ2YN8sv6pHrDVpaBoB_Gk3poMkyoVU/s87/button-left.png); }
#Carousel2 .navButton.next { right:2px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAQvG6XwqU9fYYAGNUIRtp_MyP61ZNqUnYwMA6jH1dq7RPmzz4AvkEUjEn4srsf6lxECi2rUwMmAHGs0QA8jFUEsmr-p2u_mpELG2TCXFYLUK2lw7syxzmWlcEGLC0saWef2lfhcZAlMw/s87/button-right.png); }
#Carousel2 .item .key { display:none;}
#Carousel2 .item .picture { display:none;}
<div id="Carousel2" class="carousel">
<div class="button navButton previous" style="display:none;">Atr?s</div>
<div class="button navButton next" style="display:none;">Adelante</div>
<div class="container">
<div class="items">
<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>
<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>
<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>
<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>
<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>
<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>
<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>
<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>
<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>
<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>
<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>
<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>
<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>
<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>
<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>
<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>
<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>
<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>
<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>
</div>
</div>
</div>
Ah? agrega las URLs de los enlaces y las URLs de las im?genes. La URL del enlace es opcional por si deseas que la imagen enlace a alguna entrada.
En el segundo c?digo he puesto en color verde algunos estilos que puedes personalizar tales como el color del borde y el color de fondo. Las flechas son im?genes as? que si quieres cambiarles su color o usar otras, tendr?s que cambiar las dos URLs que se encuentran en ese c?digo.
El tama?o.
El ancho del carrusel yo lo he puesto de 685px, as? que debajo de la cabecera podr?a quedar muy bien. Si quieres cambiar la longitud entonces tendr?s que cambiar el /* Ancho del contenedor */ (que es el tama?o de todo el carrusel), el /* Ancho del contenedor de las im?genes */ (que es el ?rea donde se muestran las miniaturas), y el /* Ancho total de las miniaturas */ que es el ancho real que ocupan todas las miniaturas juntas.
Si agregas m?s im?genes o si quitas algunas, tambi�n tendr?s que modificar el ancho total de las miniaturas, de lo contrario se mostrar?n algunas im?genes debajo de otras.
<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>
Para alinear el gadget s?lo cambia la distancia desde la izquierda (en color verde) por otro valor, uno m?s grande har? que se recorra hacia la derecha.
El carrusel muestra grupos de 5 im?genes en cada avance o retroceso, si deseas modificar este valor deber?s editar el archivo application.js y ah? dentro buscar esta parte:
El carrusel muestra grupos de 5 im?genes en cada avance o retroceso, si deseas modificar este valor deber?s editar el archivo application.js y ah? dentro buscar esta parte:
setSize: 5,Ese 5 es el n?mero de im?genes que se muestran en cada avance, s?lo c?mbialo por el que quieras.
A modo de consejo: como los scripts son tres pueden ser lentos en cargar as? que se recomienda alojar los scripts en la plantilla.
Y ahora s?, es todo.
No comments:
Post a Comment