Vistoso slideshow con JavaScript


Hace un tiempo habíamos hablado sobre NivoSlider, un slideshow que podiamos implementar en nuestro blog y que tenía varios efectos.

Hoy implementaremos en nuestro blog otro slideshow igual de vistoso que no necesita librerías adicionales sino que sólo requiere JavaScript. Este slideshow tiene un ribbon y un efecto de transición bastante interesante.
( DEMO)

Ahora veamos cómo agregarlo a nuestro blog:

1.§ Vamos a Plantilla - Edición de HTML.

2.§ Buscamos la etiqueta </head> y antes de éste, pegamos el siguiente script o si gustan pueden guardalo en un documento y subirlo en algún alojamiento:


3.§ Para agregar los estilos CSS, buscamos ]]></b:skin> y encima de éste pegaremos el siguiente código:
#mcis {
display: none;
}

#sliderFrame {
position: relative;
width: 600px;
margin: 0 auto;
border:5px solid #000;
}

#ribbon {
width: 111px;
height: 111px;
position: absolute;
top: -4px;
left: -4px;
background: url(http://2.bp.blogspot.com/-7UWjKFwFNTw/UXHJCL8UbaI/AAAAAAAABv8/hJCFSoVD8_c/s1600/ribbon.png) no-repeat;
z-index: 7;
}

#slider {
width: 600px;
height: 300px;
background: #fff url(http://2.bp.blogspot.com/-R5fFEERWXCc/UXHJBuyILhI/AAAAAAAABvw/-QQjhm-ElZk/s1600/loading.gif) no-repeat 50% 50%;
position: relative;
margin: 0 auto;
box-shadow: 0px 1px 5px #999999;
}

#slider img {
position: absolute;
border: none;
display: none;
}

#slider a.imgLink {
z-index: 2;
display: none;
position: absolute;
top: 0px;
left: 0px;
border: 0;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}

div.mc-caption-bg, div.mc-caption-bg2 {
position: absolute;
width: 100%;
height: auto;
padding: 0;
left: 0px;
bottom: 0px;
z-index: 3;
overflow: hidden;
font-size: 0;
}

div.mc-caption-bg {
background-color: black;
}

div.mc-caption {
font: bold 14px/20px Arial;
color: #EEE;
z-index: 4;
padding: 10px 0;
text-align: center;
}

div.mc-caption a {
color: #FB0;
}

div.mc-caption a:hover {
color: #DA0;
}

div.navBulletsWrapper {
top: 330px;
left: 190px;
width: 150px;
background: none;
padding-left: 90px;
position: relative;
z-index: 5;
cursor: pointer;
}

div.navBulletsWrapper div {
width: 11px;
height: 11px;
background: transparent url(http://2.bp.blogspot.com/-YgGQin3X58Q/UXHJBQoHffI/AAAAAAAABvs/TyTEdPeae7s/s1600/bullet.png) no-repeat 0 0;
float: left;
overflow: hidden;
vertical-align: middle;
cursor: pointer;
margin-right: 11px;
_position: relative;
}

div.navBulletsWrapper div.active {
background-position: 0px -11px;
}

#slider {
transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}
4.§ Finalmente, para agregar las imágenes del slide, armaremos el siguiente HTML en el lugar donde queramos agregarlo (debajo de la cabecera, antes del footer, etc) :
<div id="sliderFrame">
<div id="ribbon">
</div>
<div id="slider">
<a href="#"><img src="imagen.jpg" alt="Texto"/></a>
<a href="#"><img src="imagen.jpg" alt="Texto"/></a>
<a href="#"><img src="imagen.jpg" alt="Texto"/></a>
</div></div>
5.§ Vamos a vista previa y si todo está bien le damos a Guardar.

24 opinaron:

Ovskura Dama
Este comentario ha sido eliminado por el autor.
Responder
Localiza Recursos Sociales en el Municipio de Oviedo

Hola es estupendo y lo has explicado muy bien para su implementación, pero donde modifico el tamaño de las fotos para que cubran toda la caja? Muchas gracias y recibe un saludo

Jéssica YK

» Localiza Recursos Sociales en el Municipio de Oviedo:
Muchísimas gracias por tu comentario. Respecto a tu consulta, te explico cómo modificar el tamaño de la caja.

Digamos que tus imágenes a usar son de las siguientes medidas: 800 px de ancho y 400 px de alto. Para adaptar la "caja" a esas medidas, tienes que modificar lo siguiente de los estilos CSS (el código que está en el paso 3.§) :

- Buscas #sliderFrame { y modificas el valor width: 600px; por el ancho de tus imágenes, en nuestro ejemplo lo cambiaríamos por 800px.

- Luego buscas lo siguiente:

#slider {
width: 600px;
height: 300px;

Cambias los valores en negrita. Siguiendo con nuestro ejemplo, cambiaríamos el 600 por 800 (el ancho) y el 300 por 400 (el alto).

- Finalmente, al darle en Vista previa, verás que tus imágenes ya encajan perfectamente, pero los botones no están en su lugar. Para centrarlos, busca esta parte:

div.navBulletsWrapper {
top: 330px;
left: 190px;
width: 150px;
background: none;
padding-left: 90px;

En esta parte, y dependiendo del tamaño de tus imágenes, deberás jugar con los valores que están en negrita -cursiva. Modificando el 330 estarás modificando la distancia de arriba a abajo de los botones. Cambiando el valor 90 estarás modificando la posición izquierda-derecha de los botones. Cambia los valores hasta que los botones están centrados. Dale en Vista previa las veces que sea necesario y cuando esté como desees, dale en Guardar y listo.

Si necesitas ayuda adicional, me avisas.

S@lu2

Localiza Recursos Sociales en el Municipio de Oviedo

Eres estupenda,Muchísimas gracias por facilitármelo de un modo tan sencillo.
Ha quedado genial
Un saludo

Jéssica YK

Gracias a ti por la visita y el comentario. Me alegra que te haya sido útil mi ayuda.

S@lu2

Responder
:)Anabel;)

que buen tutorial! :D Muchísimas gracias de verdad! he estado buscando este tutorial durante mucho tiempo!

Jéssica YK

» Anabel:
Me alegra muchísimo que el tutorial te haya sido de ayuda (:

S@lu2

Responder
sнιиε

Muchas gracias por este tuto, tenía ganas de encontrar uno así y por fin pude poner el slide :D
Te pongo créditos por supuesto, un saludo~

Jéssica YK

» Shine:
Qué bueno que te gustó el slide. La verdad es que es bastante bonito.

Gracias por tu visita y el comentario.

S@lu2

Responder
Úrsula

Hola Jessica,
Soy bastante nueva en esto y tengo una pregunta: como localizo un sitio determinado de la sidebar en el HTML de la plantilla? No se si me he explicado muy bien.
Buenisimo el tutorial, se entiende mucho! :)

Jéssica YK

» Úrsula:
No es necesario determinar el espacio en la plantilla. La parte 4.§ la puedes hacer en un gadget de tipo HTML/Javascript que encuentras cuando ingresas a la pestaña Diseño. Una vez que guardas el gadget lo puedes arrastrar y colocarlo en donde tu desees: debajo de la cabecera , en la sidebar, etc.

S@lu2

Responder
K-POP

Hola, gracias por el tuto me sirvio de mucho solo queria saber comoe limar la etiqueta que sale al costado del cuadro "What's hot" gracias!

Jéssica YK

» K-POP:
Para eliminar ese lazo pues mira, en el paso 3.§ que son los estilos CSS, busca esta url:

http://2.bp.blogspot.com/-7UWjKFwFNTw/UXHJCL8UbaI/AAAAAAAABv8/hJCFSoVD8_c/s1600/ribbon.png

Bórrala y guarda los cambios.

S@lu2

Responder
Alejandro smith johnson
Este comentario ha sido eliminado por el autor.
Responder
Alejandro smith johnson

hola; primero que todo gracias por el aporte, segundo me gustaría que me digieras como hago para modificar el tiempo que tarda en cambiar las fotos, y también me gustaría que me digieras como modificar el ancho y el alto del slideshow. Muchas gracias, mi correo electrónico es vertvonline2014@gmail.com

Responder
XelicRojas Sub

Hola Las imagenes como que se cortan en diferente secciones /: hice algo mal? o que pasa D;
Gracias(:

Responder
Garri Pacheco

Hola, gracias por el aporte, tengo una duda, intenté usar dos slide en un mismo post y hay conflicto, ya no permite cargar las imágenes en el segundo slider ¿Sabes como solucionarlo?

Garri Pacheco

Al parecer solo se puede colocar un Script por cada post...

Jéssica YK

Hola Garri.
¿Usaste el mismo script para los dos slide? ¿O son dos slides con códigos diferentes?.

Si usaste el mismo script en ambos, la solución sería, para el segundo slide, cambiar los nombres de los "id" (sliderFrame, ribbon, slider) tanto en la parte HTML como en el CSS, ya que no pueden haber dos id iguales y eso podría estar ocasionando conflicto.

Si estas utilizando dos slides que tienen librerías diferentes (digamos JQuery y Mootools), sí puede producirse un conflicto.

Si necesitas ayuda, me avisas.

S@lu2

Responder
Fedor Meinhardt

Hola,

No se si puedas echarle una vista a mi blog para ver cual es el problema con el slider, Saludos

fedormeinhardt.blogspot.com

Responder
Unidad Prensa

Porque no puedo descargar el segundo codigo, por favor chica, enviamelo, lo necesito.

Responder
Remakeat10

GRACIAS POR EL SLIDER TE AMO :)

Responder
frikizania

que genial buen blog saludos

Responder
Cartas.Frase Libros

tengo problemas al hacer la inserto de imagnes el video dices que el # debe ir la pagina no se a que te refieres y en la imagen.pj lo puse del url de internet y no me sale en mi vista solo me sale codigos http://evelindzarela.blogspot.pe/ lo puedes visulaizar por favor

Responder

Por favor, trata de tener habilitado tu perfil (has click en "Comenta con el antiguo editor" para iniciar sesión) o deja un enlace a tu blog escogiendo la opción "Nombre/URL", procura no dejar comentarios Anónimos.
Nota: Si es que se presenta algún problema con el formulario de comentarios, sólo has click en "Comenta con el antiguo editor"

Gracias por participar en el blog.

inicio