Mostrar en ventana emergente: imágenes, vídeos, webs
Hoy día parece extraño encontrar un tema que no incluya esta función tan cómoda como útil. La cual, permite que tus usuarios vean las imágenes, vídeos (no canales) o enlaces a otras webs (no redes sociales) que consideres, dentro de la sección donde se encuentran, sin necesidad de salirse de la misma.
De este modo, retienes a tus usuarios, donde realmente ellos mismos quieren estar y por tanto “no desconectan” de la información que están leyendo.
Así pues, si tu tema de WordPress no dispone por defecto de la opción para mostrar imágenes, vídeos ni webs, en una cómoda ventana emergente (tipo “lightbox”), hoy estás de suerte. Yo utilizo para otro sitio web, un plugin bien considerado, el cual permite precisamente esto.
Nota 1: Ten en cuenta si tu tema, ya tiene una opción para utilizar ventanas emergentes por defecto (llamada probablemente “lightbox” o “fancybox”), si quieres utilizar este plugin, debes desactivar esa opción de tu tema.
Índice
- Responsive Lightbox (plugin WordPress)
– Ventana opciones generales
– Cambios automáticos
– Cambios manuales
– Códigos comportamiento plugin
Ejemplo 1: Imágenes sueltas
Ejemplo 2: Galería imágenes
Ejemplo 3: iframe / Enlaces externos
Ejemplo 4: Google map
Ejemplo 5: Vídeos Vimeo
Ejemplo 6: Vídeos YouTube
Ejemplo 7: Ajax
Ejemplo 8: Inline (ventanas texto) - Videotutorial
Responsive Lightbox (plugin WordPress)
El plugin en cuestión se llama: Responsive Lightbox (Autor: subhansanjaya, desarrollador web ‘AppWolf’).
Si bien, ya hable de este plugin meses atrás, no había incorporado videotutorial para ver su activación y modo de empleo, tanto de forma automática como manual. Además, reviso como funciona en versión 4.4 de WordPress.
Una vez instalado y activado este plugin, vamos a señalar que opciones queremos habilitar, desde esta ruta:
– Ajustes > Responsive Lightbox Lite. Accederemos a una única ventana de opciones generales (versión gratuita).
Ventana opciones generales
Galleries (Galerías fotos)
– Enable (Permitir)
Add lightbox to WordPress image galleries by default.
(Añadir por defecto lightbox a la galería de imágenes de WordPress)
Video links (Enlaces a vídeos)
– Enable (Permitir)
Add lightbox to YouTube and Vimeo video links by default.
(Añadir por defecto lightbox a enlaces de video a Vimeo o YouTube)
Image links (Enlaces a imágenes)
– Enable (Permitir)
Add lightbox to WordPress image links by default.
(Añadir por defecto lightbox a enlaces de imagen WordPress)
Custom events (Eventos personalizados)
– Enable (Permitir) / Disable (No permitir)
Enable triggering lightbox on custom jquery events.
(Habilitar la activación de lightbox sobre acontecimientos jquery personalizados)
Loading place (Sitio carga)
– Header (Cabecera) / Footer (Pie de página)
Select where all the lightbox scripts should be placed.
(Selecciona el lugar donde todos los scripts seleccionados deben ser colocados)
Deactivation (Desactivación)
– Disable (No permitir)
Delete settings on plugin deactivation.
(Borrar opciones del plugin al desactivarlo)
Cambios automáticos
– Fotos.
– Galerías de fotos.
– Vídeos (antiguamente sí funcionaban, ahora sólo es posible desde la versión pro).
Cambios manuales
Os puede venir bien aprender un poco de código HTML, vais a ver que es más fácil de lo que parece.
Recomendación autor plugin:
Si prefieres añadir manualmente ‘lightbox’, primero necesitas deshabilitar automáticamente añadir opción desde el back-end (Ajustes > Responsive Lightbox) y en consecuencia añadir atributos rel y data-type a tus links.
Nota 2: Yo os recomiendo que lo tengáis activo de forma automática (enable=permitir), y donde comprobéis que no hace bien la función de abrir ventana emergente (por ejemplo con vídeos), pues incluyáis los siguientes atributos (ya en el videotutorial y ejemplo os los mostraré también).
Imágenes sueltas: rel="lightbox" Galería imágenes: rel="lightbox[galeria-0]" iFrame / Enlaces externos: rel="lightbox" data-lightbox-type="iframe" Google Map: rel="lightbox" data-lightbox-type="iframe" Vídeos Vimeo: rel="lightbox" data-lightbox-type="iframe" Vídeos Youtube: rel="lightbox" data-lightbox-type="iframe" Ajax: rel="lightbox" data-lightbox-type="ajax" Inline (ventanas texto): rel="lightbox" data-lightbox-type="inline"
Códigos comportamiento plugin
He habilitado una página de ejemplo, en la web ‘Universo OUTCAST Spain’, donde podréis ver en acción este plugin.
En este artículo (post) los códigos y en la página de ejemplo, podréis probar que mostrará la ventana emergente, de cada código que puse de ejemplo.
1. Imágenes sueltas
Normalmente esto es automático si lo tenéis activado de tal modo.
– Vía enlace/link a una imagen grande:
<a href="http://universo.outcastspain.com/wp-content/uploads/2015/02/Logo-WP-Universo-Outcast.jpg" target="_blank" rel="lightbox noopener">Enlace/Link a foto grande</a>
– Vía imagen pequeña a una imagen grande:
<a href="http://universo.outcastspain.com/wp-content/uploads/2015/03/cartel_outcast2_invasores_little.jpg" target="_blank" rel="lightbox noopener"><img class="aligncenter wp-image-2451 size-thumbnail" src="http://universo.outcastspain.com/wp-content/uploads/2015/03/cartel_outcast2_invasores_little-100x100.jpg" alt="" width="100" height="100" /></a>
2. Galería imágenes
También es automática la apertura si lo tenéis activado.
En mi caso concreto utilizo creación de galerías nativas por WordPress y estas ya utilizan shortcodes que aceptan este plugin para apertura de ventanas emergentes. Por lo que la función de ventana emergente es automática al hacer clic en cada imagen de las galerías 1 y 2.
3. iframe / Enlaces externos
<a href="https://joanmorci.com/" target="_blank" rel="lightbox noopener" data-lightbox-type="iframe">Enlace a web Joan Morci</a>
4. Google Map
<a href="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d47167.52796825192!2d-3.6472500000000005!3d42.364468!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd45fb0949db7045%3A0x1c05870aa54939c0!2s09007+Burgos%2C+Espa%C3%B1a!5e0!3m2!1ses!2ses!4v1450873272261" target="_blank" rel="lightbox noopener" data-lightbox-type="iframe">Google Map</a>
5. Vídeos Vimeo
<a href="https://vimeo.com/9822685" target="_blank" rel="lightbox noopener" data-lightbox-type="iframe">Video Vimeo</a>
6. Vídeos YouTube
<a href="https://www.youtube.com/watch?v=Hb4USkie0jQ" target="_blank" rel="lightbox noopener" data-lightbox-type="iframe">Video YouTube</a>
7. Ajax
Personalmente no lo utilizo pero si vosotros sí, me gustaría ver un ejemplo.
8. Inline (ventanas texto)
<a href="#inline-content" rel="lightbox" data-gall="gall-frame" data-lightbox-type="inline">Inline</a> <div id="inline-content" style="display: none;">Aquí pones el texto que quieras ver reflejado en una ventana emergente.</div>
Videotutorial
- WordPress: ventanas emergentes para varios links
‘Responsive Lightbox’. Plugin que permite abrir fotos, vídeos (no canales) y enlaces a otras webs (no redes sociales).
Fuente imágenes
Ver apartado relacionado en mi Pinterest.
Soy diseñador web con WordPress. También hago uso del diseño gráfico (edición imágenes) e implementación de vídeos (puedo editar pero no grabar). Te ayudo a descubrir/potenciar la identidad de tu marca, otorgando distinción a tu sitio web. Hago buen uso del diseño visual y emocional. Estoy disponible para darte: servicio, formación, consultoría.