Al crear su propio tema de WordPress, hay una serie de elementos a considerar. Uno de estos elementos de la página es una galería de imágenes dinámicas, ya sea mediante un lightbox o algún tipo de panel deslizante. Ambas interfaces de usuario se combinan perfectamente con el contenido de un artículo. Ya que ambos pueden trabajar en sitios web típicos, es bueno tener el código listo para usar en cualquier otro tema del blog.
Para este tutorial quiero centrarme en usar el efecto lightbox con un complemento llamado jQuery lightBox. Esto es muy fácil de configurar y personalizar en su propio sitio web. Por supuesto, hay algunas correcciones incómodas dentro del CSS, pero en general el complemento funciona perfectamente. Incluso hay algunos parámetros alternativos donde puede especificar propiedades como la velocidad de animación o la opacidad de fondo.
Demo en vivo - Descargar código fuente
Empezando
El primer paso es descargar una copia del código fuente principal de la página de inicio del complemento. También puede encontrar estos archivos dentro de mi código fuente de demostración anterior. Hay un archivo CSS personalizado que viene para formatear los diversos elementos de la caja de luz. De lo contrario, el encabezado del documento está bastante limpio de otras dependencias adicionales.
Para este ejemplo, descargué una copia local de la versión más reciente de jQuery. Este es el único requisito para que este plugin lightBox funcione sin problemas. Otro punto importante a tener en cuenta es el marcado de HTML en la página. Necesitamos formatear la galería de imágenes utilizando miniaturas que están vinculadas a la imagen de mayor resolución.
La sintaxis es bastante sencilla y la he copiado en una muestra a continuación. Esto debería ir a cualquier parte del cuerpo de tu página y teóricamente puedes usar cualquier elemento para contener las miniaturas. Fui con una lista desordenada porque el esquema tiene sentido en una lista de tomas Dribbble aleatorias.
El texto alternativo adjunto a cada imagen solo se mostrará cuando la miniatura no se haya cargado todavía. Pero el elemento de título se comporta como una información sobre herramientas y como un título para la imagen. Esta es una característica realmente interesante si te gusta la idea de galerías de lightbox con subtítulos. Y puede configurar manualmente el texto del título para que sea diferente del título utilizando los parámetros de la función.
Personalizando el CSS
Dentro del archivo jquery.lightbox-0.5.css Podemos encontrar una serie de selectores importantes para la interfaz de la caja de luz. No es necesario editar ninguno de estos códigos CSS para que el complemento funcione. Pero creo que vale la pena comprender a qué se dirigirá cada uno de los ID y las clases en la página. De esta manera, tiene la opción de agregar nuevos efectos CSS3 o cambiar el tamaño de los iconos según sea necesario.
Mi código CSS típico se incluye en la hoja de estilo del documento principal. Aviso en la parte superior tengo configurado otro selector para el # lightbox-container-image-data-box elemento. Esta división realmente contiene los datos de subtítulos de la imagen que realiza una animación desplegable. yo suelo casillero para todos los elementos de mi página y esto puede arruinar el título donde no se mostrará correctamente.
Pero se puede aplicar una solución rápida simplemente apuntando a este contenedor y reiniciando a caja de contenido. Entonces es mucho más fácil forzar a este elemento de la caja de luz a comportarse de manera normal, pero aún así mantener el diseño ajustado con los márgenes de la caja de borde y el relleno. Aparte de esta solución rápida, no tuve ningún otro problema con el complemento CSS.
Cómo ejecutar lightBox ()
El segmento final que debemos analizar es llamar a este complemento con su función de JavaScript. Solo hay un selector requerido que debe apuntar a todos los elementos usando esta técnica de lightbox. Mi ejemplo se adjunta a todos los enlaces de anclaje dentro de la #corientas elemento. Podría ser aún más específico y solo dirigir enlaces con ciertos nombres de clase.
Observe que la función en sí no requiere ningún parámetro adicional. Este es el comportamiento predeterminado básico absoluto del complemento. ¡Y ya que es tan fácil de configurar que fácilmente podría generar múltiples galerías separadas que se ejecutan en la misma página! Si tiene tiempo adicional, consulte la configuración adicional del complemento para tener una idea de lo que es posible.
Puede personalizar el estilo del botón, la opacidad del fondo, el texto del título de la imagen y mucho más. A continuación se muestra un fragmento de ejemplo del sitio web que utiliza solo algunos de estos parámetros. Juegue alrededor y vea lo que puede construir.
Demo en vivo - Descargar código fuente
Pensamientos finales
Espero que este tutorial pueda ser útil para algunos desarrolladores. Me encanta encontrar galerías de imágenes en publicaciones de blog porque puede ser una fantástica fuente de inspiración. Pero también requiere mucho trabajo duro y esfuerzo.Debe tener un plan desde el principio sobre cómo desea crear una interfaz de usuario limpia y equilibrada. Siéntase libre de descargar una copia del código fuente y ver si puede rediseñar este complemento para trabajar en su propio blog o diseño de sitio web.