En un primer ejemplo, armamos una especie de lista con imágenes del mismo tamaño que funcionará de manera similar a un slider:
<div id="demoANIM1"> <div id="demoANIM1imagenes"> <img src="URL_IMAGEN1" /> <img src="URL_IMAGEN2" /> <img src="URL_IMAGEN3" /> <-- agregamos todas las que se nos ocurran (en el ejemplo hay siete) --> <img src="URL_IMAGEN7" /> </div> </div>
No importa, ahora le agregaremos algunos enlaces para "navegar" ya sea arriba o abajo de lo anterior:
<div id="demoANIM1links"> <a onclick="srcdemoANIM1(0);" href="javascript:void(0);">1</a> <a onclick="srcdemoANIM1(1);" href="javascript:void(0);">2</a> <a onclick="srcdemoANIM1(2);" href="javascript:void(0);">3</a> <-- agregamos un enlace para cada una de las imágenes --> <a onclick="srcdemoANIM1(6);" href="javascript:void(0);">7</a> </div>
<style> #demoANIM1 { /* es el DIV contenedor */ /* lo dimensiono del mismo tamaño que la imagen (en este ejemplo de 500x375) */ height: 375px; width: 500px; margin: 0 auto; /* lo centro */ overflow: hidden; /* impido que se deborde */ position: relative; /* establezco esta propiedad para poder ubicar las imágenes de manera absoluta */ } #demoANIM1imagenes { /* es el contendor interno donde están las imágenes */ /* lo fijo arriba */ position:absolute; left: 0; top: 0; /* le digo que su ancho es igual a la suma del ancho de todas imágenes */ width: 3500px; /* 500 * 7 = 3500 */ /* y le digo que cualquier cambio sea animado */ -moz-transition:all 1s ease-in-out; -webkit-transition:all 1s.ease-in-out; -o-transition:all 1s.ease-in-out; transition:all 1s ease-in-out; } #demoANIM1imagenes img { /* fuerzo a que las imágenes se vean todas iguales */ height: 375px; width: 500px; } /* y le pongo un poc de estilo a los numeritos que sirven de enlace */ #demoANIM1links { border-bottom: 1px solid #345; margin: 0 auto; padding: 10px 0; text-align: center; width: 500px; } #demoANIM1links a { background-color: #345; border-radius: 4px 4px 4px 4px; box-shadow: 0 0 4px #ABC inset; margin: 0 2px; padding: 4px 8px; } #demoANIM1links a:hover { box-shadow: 0 0 8px #ABC inset; color: #FFF; } </style>
Para eso necesito un script que es lo que se ve en el atributo onclick de los enlaces.
<script> //<![CDATA[ function srcdemoANIM1(num) { var mover = num * 500; document.getElementById("demoANIM1imagenes").style.left = -mover + "px"; } //]]> </script>
10 comentarios:
Encantador :D
Dices: "Nos falta el CSS que puede ir antes que todo eso o en el HEAD de nuestro sitio"
Mi pregunta es, con antes de todo eso. Te refieres en el mismo post, en la misma entrada. Estas diciendo que eso se puede colocar en una entrada?
Sin colocar el scrip fuera de ella?
Porque publico en un blog.. me gustaría saber, si se puede hacer eso.
¿Yo podría implementar esto dentro de una entrada?
Bueno, por ahora no fui capaz de conseguirlo... pues.
Esto es un blog y el ejemplo está en la entrada misma.
Cualquier CSS se puede colocar dentro de una entrada entre etiquetas STYLE.
Lo mismo ocurre con los scripts aunque depende de si el código utiliza caracteres no admitidos en cuyo caso, se debe cargar desde un archivo externo.
@JMiur
Ajammm sabes que hise?
Me saque todo para un .txt y tome una captura de toda la página xP
Ando experimentándolo proximamente pues,
aunque a mi me aparecen las imágenes a lo largo, no me funcionaba el script o eso es lo que parecía, quizás sea como dices por algo de carácteres; seguiré investigándolo.
Realmente es un poco latoso, pero me parece muy bueno para poder insertar varias capturas.
Una vez este el código acoplado, sería redimensionar, cambiar las Url, copiar y pegar no más. Haber si lo consigo.
S2 xP
no lo puedo lograr
1 los numeros para navegar me salen verticales
2 no me funciona el scrpts ( se coloca tambien debajo del head?)
gracias y el blog es exelente
Tendría que ver tu ejemplo para decirte dónde está el error.
hola, y donde esta el precargador (preload), son imagenes y seria bueno que tuviera un precargador o no es necesario?. alguna ayuda por favor.
No hay ninguno. Si quieres agregarlo, lo agregas.
Hola, estoy diseñando una web de productos y buscaba algo como esto pero en vez de numeritos de enlace busco la opción de colocar las imágenes en miniatura. He visto varios pero cuando vos explicáis algo yo me entero.saludos
Hay varios como ese que describes; para adaptar este, habría que pensar y rehacer el script.
¿Quiere dejar un comentario?
recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...
Nota: sólo los miembros de este blog pueden publicar comentarios.
Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.
Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...