Definicion galeria de imagenes

10,839 views

Published on

2 Comments
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total views
10,839
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
5
Comments
2
Likes
0
Embeds 0
No embeds

No notes for slide

Definicion galeria de imagenes

  1. 1. Definiciongaleria de imagenes<br />Para definir la galería hay que crear un array de elementos "Foto", tal como se puede ver en el fichero: fotos.js. <br />Otro elemento importantísimo de la galería es la definición de la carpeta donde estarán las miniaturas. Pero también es importante considerar si no se quiere crear cada miniatura, ya que si se dispone de soporte php y las librerías GD, se pueden generar las miniaturas de forma dinámica... <br />Se puede ver una implementación de este script en el fichero: carpeta.js. Y si se dispone de soporte php + librerias GD + mini.php el script está implementado en este otro fichero: phpCarpeta.js. El fichero mini.php se puede encontrar comprimido en esta otra dirección: mini.zip<br />
  2. 2. Galeria de imagenes<br />La galería de imágenes constará de una serie de imágenes en miniatura (thumbnails) alineadas en forma ordenada en dos columnas. Cuando se pasa el puntero por estas imágenes, aparece en un recuadro ubicado a la derecha de estas dos columnas la imagen ampliada. Para realizar esto, debemos emplear una etiqueta y uno de sus posibles valores, que para este ejemplo es fundamental<br />
  3. 3. Desarrollo del ejemplo<br />Como pueden apreciar, para que el tema quede más claro se han definido todos los atributos CSS que están relacionados con la galería en si misma, en un archivo CSS diferente (“galería.css”) del que contiene los atributos de los restantes componentes de la página, de forma que el tema pueda verse con mayor claridad<br />
  4. 4. Podemos definir un estilo para la capa de la galería, y redefinir la hoja de estilos de las diapositivas. En este caso se han re-definido los estilos para los marcos y el fondo de la capa de la siguiente manera<br />

×