logo El diario de Pepe Molina (Caricatos)

yo

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

IV Asamblea de la AEC

RSS de las imágenes: rss


La Cita

Un hombre que comete un error y no lo corrige es propicio a cometer nuevamente el mismo error

Confucio, filósofo chino (551-479 a. C.).


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


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


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


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


Las recomendaciones que proponemos son de índole variada.


Aquí un cajón de sastre de enlaces.


Nos referencian desde sitios de toda índole.


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


botón pay-pal

Diapositivas en sucaricatura.com

emoticón de Caricatos 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.

Zona de comentarios

Este apunte aún no tiene comentarios.

Evaluación

Valoración de esta página: (apunte.57) valor

Valoración evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar

Respuesta: Zona de mensajes (proceso de evaluación)

Historial de navegación

Esta página ha sido visitada en 3374 ocasiones


Disponemos de rss sindicar

Y del Mapa del sitio, además del sitemap.xml.


Aquí podemos encontrar los apuntes más visitados.

"Top 10" reemplaza a la sección Últimos apuntes.


Una buena forma de buscar un apunte es a partir de su categoría.


También es posible buscar apuntes por medio de las etiquetas (tags).


Hemos decidido poner al alcance de todos algunos comodines.

Adjuntamos una versión reducida del "buscador interno" que vemos en la lista anterior:

Buscar en apuntes

También estamos recopilando antiguas páginas del sitio.


Desde este recuadro se puede hacer una búsqueda cronológica.


Se puede crear una postal nueva desde el enlace del sector "Otras páginas del dominio", o editar la que sale en el recuadro, pulsando sobre ella..

../diario.imagen.php?id=2
http://www.pepemolina.com/postales/Navidad/TgC_Navidad_31.gif
enlace a la postal
Copyright © 2002-2018 www.pepemolina.com
RSS rss | Ver Mapa del sitio