Cómo crear un álbum de fotos con CSS

Escrito por deborah lee soltesz Google | Traducido por contributing writer
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo crear un álbum de fotos con CSS
Add interactivity to your web photo album with CSS. (photo album image by timur1970 from Fotolia.com)

Cascading Style Sheet (CSS) proporciona una manera de crear una galería fotográfica interactiva sin programación JavaScript. Usando como enlace "flotar", junto con un poco de HTML y la magia de CSS, puedes crear una visualización de fotos. No sólo se verá increíblemente atractivo, sino que les permitirá a los visitantes ver rápidamente versiones ampliadas de las fotografías sin ventanas emergentes, marcos o cargas de una nueva página.

Nivel de dificultad:
Moderadamente difícil

Otras personas están leyendo

Necesitarás

  • Editor de texto o de código HTML

Lista completaMinimizar

Instrucciones

  1. 1

    Abre tu página web en tu editor de texto o de código HTML favorito.

  2. 2

    Agrega el siguiente código HTML en tu página web, en donde quieres que aparezca la galería: <div class="gallery"> <ul class="thumbs"> <li> <a href="#" class="thumbnail pic1"> <span class="fullpic"></span> <img src="thumbs/myimage1.jpg"/></a> </li> <li> <a href="#" class="thumbnail pic2"> <span class="fullpic"></span> <img src="thumbs/myimage2.jpg"/></a> </li> <li> <a href="#" class="thumbnail pic3"> <span class="fullpic"></span> <img src="thumbs/myimage3.jpg"/></a> </li> </ul> </div>

  3. 3

    Edita los códigos de los elementos de la lista para que las imágenes de cada uno hagan referencia a la galería con imágenes en miniatura. Si necesitas más elementos de la lista para más imágenes, copia y pega cada uno de los elementos, y cambia el "pic#", para que "#" siga contando (dándole a cada enlace un único estilo).

  4. 4

    Agrega el siguiente código CSS a la sección de estilo de tu página web. Estilizará la galería haciendo que las imágenes se alineen correctamente: div.gallery { position: relative ; border: 1px solid silver ; height: 350px ; width: 750px ; }

  5. 5

    Agrega el siguiente código CSS a la sección de estilo. Estiliza las miniaturas en una red de flujo libre a la derecha de la imagen principal: ul.thumbs { list-style-type:none; width: 250px ; float: right ; } ul.thumbs li { float: left ; }

  6. 6

    Agrega el siguiente código CSS a la sección de estilo. Se moverán y amontonarán los códigos vacíos en el lado izquierdo de la galería, ocultándolos efectivamente: span.fullpic { width: 1px ; height: 1px ; position: absolute ; top: 5px ; left: 5px ; }

  7. 7

    Agrega el siguiente código CSS a la sección de estilo. Esto creará el efecto de movimiento. Cuando pasas el cursor sobre la miniatura (identificada con el enlace "pic#"), la etiqueta asociada se amplía para hacerse visible. Las imágenes de mayor tamaño se establecen como fondo, haciendo que aparezca por arte de magia en el lado izquierdo del área de la galería: a.pic1:hover span.fullpic { background:url(images/myimage1.jpg); background-repeat: no-repeat ; height:300px; width:300px; } a.pic2:hover span.fullpic { background:url(images/myimage2.jpg); background-repeat: no-repeat ; height:300px; width:300px; } a.pic3:hover span.fullpic { background:url(images/myimage3.jpg); background-repeat: no-repeat ; height:300px; width:300px; }

  8. 8

    Edita las referencias de imagen de fondo en el código CSS. Ten en cuenta el estilo de enlace "pic#". Estos estilos corresponden a los enlaces en torno a las imágenes en miniatura y a las etiquetas en el código HTML de la página. Establece la imagen de fondo "URL" para el archivo de imagen de mayor tamaño que corresponde a la miniatura asociada con cada enlace "pic#". Si agregaste más imágenes en miniatura en los pasos anteriores, agrega correspondiente al estilo "a.pic#:hover span"

Consejos y advertencias

  • Toma ventaja de los atributos de "href" que nunca se usa, en los enlaces alrededor de las imágenes en miniatura en el código HTML para mejorar la galería. Usa las ventanas emergentes de JavaScript o una nueva ventana para abrir nuevas páginas o agregar una acción cuando los usuarios hagan clic en la miniatura. Proporciona información de la imagen, poder cargar el tamaño completo, o agregar fotos seleccionadas al carrito de compra de tu visitante.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles