SlideShare una empresa de Scribd logo
1 de 4
Definiciongaleria de imagenes Para definir la galería hay que crear un array de elementos "Foto", tal como se puede ver en el fichero: fotos.js.  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...  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
Galeria de imagenes 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
Desarrollo del ejemplo 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
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

Más contenido relacionado

Similar a Definicion galeria de imagenes

Similar a Definicion galeria de imagenes (20)

Uso de after y diseño de los cards
Uso de after y diseño de los cardsUso de after y diseño de los cards
Uso de after y diseño de los cards
 
Programación web modelado en cajas
Programación web modelado en cajasProgramación web modelado en cajas
Programación web modelado en cajas
 
manualrapido_css.pdf
manualrapido_css.pdfmanualrapido_css.pdf
manualrapido_css.pdf
 
manua.pdf
manua.pdfmanua.pdf
manua.pdf
 
Manualrapido css
Manualrapido cssManualrapido css
Manualrapido css
 
css3
css3css3
css3
 
Lenguaje de programación II-Clase4.pptx
Lenguaje de programación II-Clase4.pptxLenguaje de programación II-Clase4.pptx
Lenguaje de programación II-Clase4.pptx
 
Guia bootstrap
Guia bootstrapGuia bootstrap
Guia bootstrap
 
Vistiendo a WordPress
Vistiendo a WordPressVistiendo a WordPress
Vistiendo a WordPress
 
Instructivo themewordpress
Instructivo themewordpressInstructivo themewordpress
Instructivo themewordpress
 
Introduccion css
Introduccion cssIntroduccion css
Introduccion css
 
Edición de documentos
Edición de documentosEdición de documentos
Edición de documentos
 
05_Estilos CSS y modelos de caja 02.pptx
05_Estilos CSS y modelos de caja 02.pptx05_Estilos CSS y modelos de caja 02.pptx
05_Estilos CSS y modelos de caja 02.pptx
 
Guia de css para principiantes
Guia de css para principiantesGuia de css para principiantes
Guia de css para principiantes
 
Capas en HTML
Capas en HTMLCapas en HTML
Capas en HTML
 
Capas
CapasCapas
Capas
 
Introduccion css
Introduccion cssIntroduccion css
Introduccion css
 
2-Diseñando el encabezado.pptx
2-Diseñando el encabezado.pptx2-Diseñando el encabezado.pptx
2-Diseñando el encabezado.pptx
 
Curso de Magento 1.9: Unidad Didáctica 08 Estructura de un Tema
Curso de Magento 1.9: Unidad Didáctica 08 Estructura de un TemaCurso de Magento 1.9: Unidad Didáctica 08 Estructura de un Tema
Curso de Magento 1.9: Unidad Didáctica 08 Estructura de un Tema
 
Estructura semantica Html5.pptx
Estructura semantica Html5.pptxEstructura semantica Html5.pptx
Estructura semantica Html5.pptx
 

Definicion galeria de imagenes

  • 1. Definiciongaleria de imagenes Para definir la galería hay que crear un array de elementos "Foto", tal como se puede ver en el fichero: fotos.js. 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... 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
  • 2. Galeria de imagenes 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
  • 3. Desarrollo del ejemplo 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
  • 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