martes, 12 de abril de 2011

Más transiciones, sliders y slideshows - Vagabundia


Esta es una variación del ejemplo anterior donde se utilizaban transiciones para crear algo similar a un slider de imágenes.



En este caso, en lugar de desplazar el contenedor, intentaremos que las imágenes se muestren con un efecto de fade y por lo tanto, aunque los principios son los mismos, la forma de detectar las cosas variará y necesitaremos más datos para identificar cada imagen.




Otra vez, armamos una lista con imágenes del mismo tamaño con una serie de enlaces debajo de ella:
<div id="demoANIM2">
<div id="demoANIM2imagenes">
<img id="img_1" src="URL_IMAGEN1" class="visible" />
<img id="img_2" src="URL_IMAGEN2" class="novisible" />

<img id="img_3" src="URL_IMAGEN3" class="novisible" />
<-- agregamos todas las que se nos ocurran (en el ejemplo hay siete) -->
<img id="img_7" src="URL_IMAGEN7" class="novisible" />
</div>
</div>

<div id="demoANIM2links">
<a onclick="srcdemoANIM2(1);" href="javascript:void(0);">1</a>
<a onclick="srcdemoANIM2(2);" href="javascript:void(0);">2</a>
<a onclick="srcdemoANIM2(3);" href="javascript:void(0);">3</a>

<-- agregamos un enlace para cada una de las imágenes -->
<a onclick="srcdemoANIM7(7);" href="javascript:void(0);">7</a>
</div>


La diferencia básica es que acá le agregamos un ID distinto a cada imagen y una clase que será class="visible" en la primera o en aquella que querramos mostrar por defecto y class="novisible" en el resto de ellas.


Por supuesto, el CSS que puede ir antes que todo eso o en el HEAD de nuestro sitio:
<style>
#demoANIM2 { /* 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 */
}
#demoANIM2imagenes { /* es el contendor interno donde están las imágenes */
/* lo fijo arriba */
position:absolute;
left: 0;
top: 0;
/* le doy el tamaño de cada imagen */
height: 375px;
width: 500px;
/* 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;
}
#demoANIM2imagenes img { /* fuerzo a que las imágenes se vean todas iguales */
height: 375px;
width: 500px;
}
#demoANIM2imagenes img.visible { /* la imagen es visible */
opacity:1;
filter: alpha(opacity=100);
}
#demoANIM2imagenes img.novisible { /* la imagen está oculta */
opacity:0;
filter: alpha(opacity=0);
}
/* y le pongo un poc de estilo a los numeritos que sirven de enlace */
#demoANIM2links {
border-bottom: 1px solid #345;
margin: 0 auto;
padding: 10px 0;
text-align: center;
width: 500px;
}
#demoANIM2links a {
background-color: #345;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 0 4px #ABC inset;
margin: 0 2px;
padding: 4px 8px;
}
#demoANIM2links a:hover {
box-shadow: 0 0 8px #ABC inset;
color: #FFF;
}
</style>
Lo que haremos para que esto funcione como slideshow es variar la opacidad de las imágenes permutando su clase y eso lo haremos con JavaScript:
<script>
//<![CDATA[
// establezco cuál es la imagen visible inicial
var imgvisible = "img_7";

function srcdemoANIM2(num) {
// la imagen a ser mostrada
var id = "img_" + num;
var mostrar = document.getElementById(id);
// la que ahora esta visible
var actual = document.getElementById(imgvisible);
// si son la misma no hago nada
if(mostrar==actual) {return false;}
// permutos su clase ocultando la visible y mostrando otra
actual.className="novisible";
mostrar.className="visible";
// y guardo ese dato
imgvisible = id;
//]]>
</script>
En Firefox 4, Safari, Chrome y Opera veremos como las imágenes aparecencon un efecto de fade y en el resto de los navegadores se mostrarán de manera simple.





















TABLA - FUENTES - FONTS


SOUV2BalaramScaGoudyFOLIO 4.2Biblica Font








free counters


Disculpen las Molestias




TABLA - INFORMÁTICA - UTILIDADES

Publicado por en
Etiquetas:

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)

Correo Vaishnava

Mi foto
Correo Devocional

Archivo del blog