El diario de Pepe Molina (Caricatos)

Teniendo ya suficientes transiciones, vamos a mostrar como aplicar el efecto en un caso concreto.

Última caricatura

IV Asamblea de la AEC: IV Asamblea General de la Asociación Española de Caricaturistas

RSS de las imágenes:

La Cita

El zoo: un lugar excelente para estudiar el comportamiento humano

Evan Esar, humorista estadounidense (1899-1995).

En esta zona están las páginas personales del autor.

Mis Enlaces

Mis clientes ahora también son mis amigos (aunque les cobre).

Mis Clientes

En Mis amigos Informáticos hay una pequeña colección de páginas de colegas webmasters..

Mis Amigos Informáticos

En Mis amigos artistas podemos encontrar artistas de cualquier índole (dibujantes, pintores, escritores...)

Mis Amigos Artistas

Las recomendaciones que proponemos son de índole variada.

Mis recomendaciones

Aquí un cajón de sastre de enlaces.

Interés General

Nos referencian desde sitios de toda índole.

Referencias externas

Puede contribuir a mantener esta página con su donativo.

Diapositivas en sucaricatura.com

Publicado el día 24 de noviembre de 2011
id=57; categorías: Vicisitudes de un Webmaster, Globalización, Programación

Teniendo ya suficientes transiciones, vamos a mostrar como aplicar el efecto en un caso concreto. Podemos verlo en este enlace: Diapositivas. Nótese que la página no tiene ningún contenido salvo las transiciones debido a que se trata de código para incrustar en recuadros con iframes, u otras ventanas del tipo popup.

Tres capas para miles de imágenes

Para el funcionamiento tan solo hemos necesitado tres capas dentro de la contenedora. Véase la estructura básica más abajo:

<body>
	<div id="todo">
		<div id="proyector" >
			<div id="capa2" class="paspartus" >
				<div id="imagen2" class="imagen">
				</div>
			</div>
			<div id="capa3" class="paspartus" >
				<div id="imagen3" class="imagen">
				</div>
			</div>
			<div id="capa1" class="paspartus" >
				<div id="imagen1" class="imagen">
				</div>
			</div>
		</div>
		<div id="precarga">
			<div id="preProyector" >
				<div id="porcentaje" ></div>
			</div>
		</div>
	</div>
</body>

Sobre la precarga sólo diremos que esa capa no influirá en las transiciones, y estos efectos de transición comenzarán cuando haya terminado esa precarga.

Como ya hemos comentado, después de la precarga comienzan las transiciones con datos que pueden pasarse como parámetros. Entre esos datos podemos modificar el tamaño de las diapositivas, el tiempo de las transiciones, también el tiempo de espera entre ellas y el número de fotogramas. Se puede ver en una página nueva desde este enlace: miniaturas. En el recuadro adjunto hemos aumentado el tamaño de las miniaturas, simplemente cambiando el parámetro max de la dirección (también hemos dado valores de dimensionado en los estilos del recuadro).

El formato de "diapositiva" se consigue simplemente con el estilo de borde del recuadro exterior del tipo outset; y del tipo inset el interior.

Sobre la alternancia de las imágenes, tan solo tenemos que actualizar en cada transición la capa no influenciada de la misma.

Actualización constante

Para que puedan verse el mayor número de imágenes, sin que sea una carga muy grande de recursos, hemos usado tan solo una treintena de las mismas al principio, y las deshechamos a medida que las mostramos; pero al quedar solo diez sin mostrar, volvemos a cargar otra treintena mediante rutinas Ajax.

<< primer apunte < apunte anterior apunte siguiente > último apunte >>