Conceptos básicos de diseño web: crear una galería de imágenes en HTML
Equipo editorial de IONOS
A menudo, la representación visual es esencial para el éxito de las páginas web, tanto blogs como tiendas online. Aun cuando la famosa frase “Content is King” siempre suele hacer referencia a contenidos de calidad, no se puede perder de vista el aspecto visual. Los textos desorganizados desalientan a los espectadores incluso antes de haber leído sus contenidos. A este respecto, los gráficos y las imágenes son, por lo tanto, una parte fundamental de toda página web y se usan para ilustrar o hacer aclaraciones sobre los contenidos, para conseguir cierto nivel personal y emocional o para visualizar las ventajas de los productos que se ofertan.
Las galerías de imágenes son herramientas populares para integrar imágenes en las páginas web con facilidad. Para la inclusión de tales series de imágenes se puede recurrir a diversas posibilidades: los usuarios pueden, por ejemplo, integrar un sencillo Lightbox en la página web por medio del código fuente y crear, así, una galería de imágenes usando HTML. Sin embargo, dicha integración resulta todavía más sencilla si se recurre a un sistema de gestión de contenidos (CMS). En los casos concretos de TYPO3 o de WordPress, por ejemplo, es necesario encontrar la aplicación adecuada e integrarla en la estructura básica.
- Certificado SSL Wildcard
- Registro privado
- 1 cuenta de correo electrónico por contrato
Cómo integrar galerías de imágenes HTML mediante Lightbox
El script Lightbox, que es una de las opciones más sencillas para presentar imágenes en páginas web, se programa como HTML dinámico en JavaScript. Al hacer clic en la imagen de vista previa, se abre la imagen en tamaño grande sobre la página web oscurecida como fondo de pantalla. Un script de tales características se puede integrar sin problemas en la página web e implementar con otras funciones. El requisito previo para ello es tener una versión actual de la propia aplicación y contar con las imágenes y las vistas en miniaturas (thumbnails) que se quieran integrar en la página web.
Lightbox fue programado por el desarrollador Lokesh Dhakar en 2005 y protegido por una licencia de Creative Commons poco tiempo después. Sin embargo, hay muchas versiones y modelos del script, entre ellos, scripts independientes y plugins para las bibliotecas de JavaScript o extensiones para los sistemas de gestión de contenidos.
1. Descarga de Lightbox
El script de Lightbox puede descargarse de manera gratuita desde la página web de Lokesh Dhakar. Una vez descomprimido el archivo .zip, puedes acceder al archivo index.html (instrucciones en inglés) y a las tres carpetas css, images y js.
2. Integrar archivos CSS y JavaScript
El siguiente paso consiste en copiar el archivo lightbox.css de la carpeta CSS en el directorio CSS de la página web y el archivo .js en el directorio JavaScript. Además, se tienen que insertar las siguientes líneas en el encabezamiento de la página web correspondiente:
<link href="tu-directorio-css/lightbox.css" rel="stylesheet">La siguiente línea tiene que insertarse en el último renglón antes de la etiqueta de </body>:
<script src="tu-directorio-js/lightbox.js"></script>Cuidado: para utilizar Lightbox es necesario contar con jQuery. Si todavía no tienes esta biblioteca de JavaScript, lo recomendable es que la integres y la cargues en el script.
3. Atributos de Lightbox para integrar galerías de imágenes en HTML
Cada imagen que se quiera visualizar con Lightbox necesita un atributo adecuado para ello en el código fuente con el objetivo de que le facilite la información necesaria al script. A cada enlace a la imagen se le otorga el atributo data-lightbox y un nombre individual para cada galería. Las imágenes que han de aparecer en la misma serie de diapositivas (diashow) necesitan el mismo atributo data-lightbox. Adicionalmente, si se quiere integrar un título de imagen, se utilizará el atributo data-title con el texto correspondiente.
Ejemplo para una imagen:
<a href="images/imagen-1.jpg" data-lightbox="imagen-1" data-title="título de imagen">
<img src="images/imagen-1-vistaprevia.jpg" alt="texto alternativo">
</a>Ejemplo de una diapositiva con varias imágenes:
<a href="images/imagen-2.jpg" data-lightbox="show-1" data-title="por la mañana"><img src="images/imagen-2-vistaprevia.jpg" alt="texto alternativo"></a>
<a href="images/imagen-3.jpg" data-lightbox="show-1" data-title="por la tarde"><img src="images/imagen-3-vistaprevia.jpg" alt="texto alternativo"></a>
<a href="images/imagen-4.jpg" data-lightbox="show-1" data-title="por la noche"><img src="images/imagen-4-vistaprevia.jpg" alt="texto alternativo "></a>Ahora Lightbox ya está integrado en la página web. No hay que olvidar que hay otras posibilidades para individualizar las diapositivas o la visualización de Lightbox. Esto puede adaptarse tras cargar el script recurriendo al comando “opción” y especificando allí los valores correspondientes.
Ejemplo:
<script src="tu-directorio-js/lightbox.js"></script>
<script>
lightbox.option({
'resizeDuration': 200,
'wrapAround': true
});
</script>Resumen de las opciones más importantes:
| Opción | Estándar | Descripción |
|---|---|---|
| alwaysShowNavOnTouchDevices | false | Al cambiar a true, las flechas de navegación que solo aparecen cuando el ratón se desplaza por la página, permanecen visibles en dispositivos con pantalla táctil. |
| disableScrolling | false | Al cambiar a true, ya no se puede desplazar el ratón por la página cuando se abre Lightbox. |
| fadeDuration | 500 | Con esta opción se determina cuánto tiempo necesita la superposición para visualizar u ocultar imágenes (Periodo de tiempo en milisegundos). |
| maxWidth | Se fija la anchura máxima de imagen (en píxeles). | |
| maxHeight | Se fija la altura máxima de imagen (en píxeles). | |
| positionfromTop | 50 | Se establece la distancia hasta el borde superior de la ventana (en píxeles). |
| resizeDuration | 700 | Se determina el tiempo que necesita el contenedor para la transición entre dos imágenes de tamaños diferentes (Periodo de tiempo en milisegundos). |
| showImageNumberLabel | true | Al cambiar a false ya no se mostrará la cifra total de imágenes en la presentación de diapositivas (p. ej., imagen 3 de 33). |
| wrapAround | false | Si se opta por true, la presentación de diapositivas vuelve a reproducirse desde el principio tras la última imagen. |
Como alternativa, hay otros muchos programas que puedes integrar en tu página web y con los que se pueden crear galerías de imágenes en HTML. En general, el uso de las herramientas es muy sencillo e intuitivo, y es que, en la mayoría de los casos, estas cuentan con un editor drag and drop.
Extensiones de galerías de fotos para CMS
A la hora de crear sus páginas web, muchas empresas y autónomos se deciden por un sistema de gestión de contenidos, lo que conlleva muchas ventajas. La razón de ello reside en el hecho de que los CMS ya ofrecen una “estructura predeterminada” y la mayoría de sistemas hacen posible la creación de páginas web profesionales sin necesidad de contar con amplios conocimientos sobre programación e informática.
Además de un manejo intuitivo y de una interfaz sencilla, muchos valoran la presencia de una estructura flexible como la de sistemas como Jommla! o TYPO3, por ejemplo. Gracias a la tan común estructura modular, estos sistemas pueden implementarse y adaptarse a las necesidades individuales. Esto es posible, sobre todo, gracias a la gran comunidad que hay detrás de muchos sistemas (de código abierto) y que desarrolla numerosas extensiones y plugins. No hay que olvidar, asimismo, que también hay numerosas extensiones para crear galerías de imágenes profesionales y para integrarlas en las páginas web. A continuación, te mostramos algunas soluciones para los sistemas Joomla!, WordPress y TYPO3.
Galerías de imágenes para WordPress
WordPress es el CMS de código abierto más utilizado a nivel mundial. Aunque fue creado para elaborar blogs, hoy en día WordPress es un sistema de gestión de contenidos completamente válido para usarse en otros ámbitos debido a su gran cantidad de extensiones y actualizaciones. Esto no significa, sin embargo, que ya no se use para seguir creando blogs. En ámbitos como el de la moda, el estilo de vida o la belleza, la representación gráfica de los temas juega un papel muy importante, por lo que no es de extrañar que en un total de más de 18.000 extensiones haya algún que otro plugin para crear galerías de fotos para páginas web.
NextGen Gallery
NextGen Gallery es uno de los plugins para WordPress más populares. Con él, se pueden crear galerías de miniaturas (thumbnails) y presentaciones de diapositivas y también permite la incorporación de Lightbox, todo ello teniendo en cuenta el diseño web responsivo. En el caso de galerías de gran tamaño, el plugin ofrece numerosas opciones y facilitan la carga de mayores cantidades de fotos, así como la gestión de las imágenes gracias a su estructura sencilla y a su facilidad de uso. Con este plugin también se pueden seleccionar los parámetros más importantes, como tamaño, cantidad o intervalo, y se pueden insertar fácilmente marcas de agua. En general, NextGen destaca por su usabilidad y por tener una interfaz de usuario claramente estructurada. La versión gratuita de NextGen Gallery se puede descargar de forma gratuita de la colección de plugins de WordPress. En la página web del desarrollador se pueden encontrar las versiones de pago Plus y Pro, que presentan características adicionales para el uso profesional, además de funciones interesantes para el ámbito del eCommerce.
Envira Gallery
El plugin Envira Gallery (Lite) permite, asimismo, crear galerías de fotos para páginas web. Con él, los usuarios pueden elaborar galerías individuales para comentarios individuales o para páginas, pero también tienen la opción de crear galerías globales. En Envira Gallery, el diseño responsivo es una característica out of the box, implementada tanto para galerías como para Lightbox. La particularidad de Envira es que el programa recarga los contenidos de las imágenes de manera asíncrona, por lo que ni el tiempo de carga ni el rendimiento se reducen en el caso de galerías de imágenes de gran magnitud. En calidad de plugin para crear galerías de imágenes, Envira también ofrece ventajas desde el punto de vista del SEO, puesto que la velocidad de carga es un factor de posicionamiento importante. La versión gratuita de Envira Gallery Lite se puede descargar desde el directorio de plugins de WordPress. Los packs con más funcionalidades son de pago y ofrecen, por ejemplo, opciones de uso compartido y de redes sociales, así como otras características SEO y funciones basadas en el ámbito del eCommerce. Para saber más, visita la página web de Envira Gallery.
Polaroid Gallery
El último plugin de WordPress para la implementación de galerías de imágenes en HTML que te presentamos en esta guía es la Polaroid Gallery. Como su propio nombre indica, los usuarios pueden crear galerías de imágenes con el formato Polaroid y con su característico marco blanco, lo que resulta perfecto para los aficionados al diseño y al estilo retro que quieren elaborar galerías con CSS3 y jQuery, y se basa en un sistema de plantillas a través del que los usuarios pueden crear sus propios diseños de manera sencilla. El plugin accede directamente a la biblioteca multimedia de WordPress, de modo que las imágenes que ya se hayan subido se pueden integrar sin problemas. Polaroid es una solución rápida y sencilla para crear galerías de imágenes en HTML que contiene las funciones básicas más importantes para ello y un diseño clásico, pero que, además, permite su individualización en todo momento. El plugin se puede descargar de manera gratuita desde el directorio de WordPress.
Galerías de imágenes para Joomla!
La popularidad de Joomla! ha ido en aumento con el paso de los años y hoy se cuenta entre los CMS más utilizados. Al igual que en el caso de WordPress, Joomla! está respaldado por una amplia comunidad y una gran cantidad de extensiones y de plugins.
sigplus
La Simple Image Gallery Plus, cuya abreviatura es sigplus, hace honor a su nombre y respalda a los usuarios en lo relativo a la creación de galerías de imágenes simples. Este sencillo plugin cumple su finalidad y es apto, sobre todo, para páginas web de pequeña envergadura y para galerías con una cantidad razonable de imágenes. Los usuarios inexpertos pueden obtener beneficios de su sencilla gestión y de su manejo intuitivo, pero si se opta por el modo avanzado o advanced modus, los usuarios pueden recurrir a otros ajustes para imágenes en miniatura, caché, etc. El plugin es gratuito y se puede descargar desde el directorio de extensiones de Joomla!.
Phoca Gallery
La extensión Phoca Gallery también es gratuita, pero tiene una mayor funcionalidad que sigplus. Phoca Gallery ofrece la posibilidad de integrar galerías de imágenes y diapositivas en páginas creadas con Joomla!, aunque su manejo no se lleva a cabo de un modo tan intuitivo. Por ello, particularmente los principiantes necesitan una fase de adaptación para poder aprender a usar todas sus funciones. Una vez superada dicha fase, los usuarios pueden recurrir no solo a las características básicas, sino también a prácticas funciones, como por ejemplo la inclusión de marcas de agua o la opción de descargas para visitantes. Phoca Gallery puede descargarse de forma gratuita desde la página web de Joomla! y en la página del desarrollador puedes obtener documentación detallada y módulos y plugins adicionales para Phoca Gallery.
SIGE - Simple Image Gallery Extended
Otra de las posibilidades a tu alcance para integrar galerías de imágenes en HTML por medio de Joomla! es el plugin SIGE (Simple Image Gallery Extended). Su desarrollo e implementación está bajo la responsabilidad de una amplia comunidad. Entre sus características más importantes se encuentran el llamado modo turbo, que posibilita la carga de imágenes y galerías de imágenes de gran tamaño sin tiempos de carga prolongados y sin que esto influya de manera negativa en el rendimiento. Algunas características adicionales como, por ejemplo, solicitud de parámetro, función de marcas de agua, visualización de listas y clasificación inteligente en el servidor tan solo constituyen una pequeña parte de una lista casi interminable de extensiones a las que puedes acceder aquí (en inglés). Para descargar SIGE de manera gratuita, visita la página web de Joomla!.
Galerías de imágenes para TYPO3
Entre los sistemas de gestión de contenidos más utilizados no podía faltar TYPO3. Este CMS es un software ampliable y apto tanto para páginas web de pequeña y mediana envergadura como para grandes proyectos empresariales. Especialmente sorprendente es la comunidad de TYPO3 y es que apenas hay otro CMS que tenga tal poder de convicción en lo que a actualidad y continuo desarrollo se refiere. No obstante, TYPO3 no es la solución más sencilla cuando se trata de crear páginas web sin tener amplios conocimientos previos. Sin embargo, muchas empresas invierten tiempo y dinero en fases de adaptación o en personal especializado para poder hacer el mayor uso posible de las ventajas de este CMS. En lo concerniente a las galerías de imágenes, también hay soluciones profesionales para TYPO3.
Yet Another Gallery
Yet Another Gallery, conocida como YAG en su forma abreviada, es una de las extensiones más populares para la creación de galerías de imágenes HTML en TYPO3. Su principal ventaja es que la extensión está en continuo desarrollo y ofrece, por lo tanto, estándares actuales. YAG es válida, asimismo, tanto para proyectos pequeños y privados como para proyectos profesionales de gran envergadura, ya que ofrece un alto nivel de flexibilidad debido a sus posibilidades de configuración. Al igual que el propio CMS, con esta extensión se pueden crear galerías de imágenes en HTML para cada proyecto e implementarse de manera individual. Además, los usuarios pueden definir su propio diseño o seleccionar un gran número de temas ya predeterminados, que están disponibles en el repositorio de la extensión. Si quieres obtener información detallada (en inglés) sobre cómo gestionar, administrar o configurar YAG, haz clic aquí. Para descargar la extensión de forma gratuita, visita la página web de TYPO3.
Perfect Lightbox
En el sentido convencional, Perfect Lightbox no es una extensión dedicada a la creación de galerías de fotos para páginas web. Sin embargo, esta hace posible la visualización de los contenidos de una página en Lightbox en lugar de que para ello se tenga que abrir, como suele ser habitual, una ventana emergente. De un interés especial resulta el hecho de que con Perfect Lightbox no solo se pueden visualizar elementos individuales, sino que, opcionalmente, da la posibilidad de esquematizar todos los elementos de una página web en una galería común. Sus características adicionales son la presentación de diapositivas, un modo de presentación variable y la opción de descarga para los visitantes. Los usuarios pueden, asimismo, configurar la apariencia de Lightbox de manera flexible. La descarga de Perfect Lightbox puede realizarse desde la página de TYPO3 para la extensión.
