FancyBox fácil - KolMitE

FancyBox fácil

FancyBox fácil

noviembre 29, 2018 Populares 0

easy fancybox shortcode

El complemento Easy FancyBox para sitios web de WordPress le brinda una solución de caja de luz flexible y estética para casi todos los enlaces de medios en su sitio web. Easy FancyBox utiliza una versión actualizada de la extensión tradicional FancyBox jQuery y es compatible con WP 3+ Multi-Site. Después de la activación puedes encontrar una nueva sección. Caja lujosa en tu Ajustes> Medios Página de administración donde puede administrar las opciones del cuadro de luz multimedia.

Después de la activación, todos los enlaces a Imágenes JPG, GIF y PNG. se abren automáticamente en la caja de luz de estilo FancyBox Mac / Gnome que flota sobre la página web.

Privacidad GDPR / EU

Este complemento no recopila ningún dato y no establece ninguna cookie del navegador. Sin embargo, la versión PRO ofrece una opción para deshabilitar la ventana emergente automática después de la primera visita, que necesita una cookie del navegador. Esta cookie almacena la marca de tiempo y la ruta del primer sitio web de los visitantes en el lado del cliente. No se comparte ni se almacenan datos en el lado del servidor o en otro lugar.

CARACTERISTICAS

Medios soportados y tipos de contenido:

  • Todos los formatos de imagen comunes. incluso webp
  • Video alojado en Youtube, Vimeo y Dailmotion
  • Archivos PDF (incrustados con etiqueta de objeto, en iframe o en el Visor de documentos de Google externo)
  • Archivos SWF (Flash)
  • Imágenes de medios SVG (gracias a Simon Maillard)
  • Contenido HTML en línea (consulte las instrucciones en las Preguntas frecuentes)
  • Páginas web externas (consulte las instrucciones en las preguntas frecuentes)

También soporta:

  • Las galerías de WordPress (la opción “Vincular a” se debe establecer en “Archivo de medios”)
  • Galerías NextGEN (consulte las instrucciones en las Preguntas frecuentes)
  • Mapas de imagen
  • Elementos del menú de WordPress (ver instrucciones en las preguntas frecuentes)
  • Jetpack Infinite Scroll

Características adicionales:

  • Opción de ventana modal (vea las instrucciones en las preguntas frecuentes)
  • Detección automática de enlaces de archivos multimedia
  • Detección automática de galerías.
  • Ventana emergente en carga de página opcional (consulte las instrucciones en las Preguntas frecuentes)
  • Efectos popup desvanecimiento o elástico
  • Opciones de estilo para superposición de caja de luz (color y opacidad) y ventana (tamaño de borde y color)

por opciones avanzadas y apoyo prioritario, hay un Extensión profesional disponible. Ver características Pro a continuación.

Consulte las Preguntas frecuentes para obtener instrucciones sobre cómo administrar películas de YouTube, Dailymotion y Vimeo (y servicios similares) y consejos para hacer que el contenido en línea se muestre en una superposición de FancyBox.

Obtenga asistencia en la página web de Easy FancyBox o en el foro de WordPress.

Visita FancyBox para más información y ejemplos.

PRO CARACTERÍSTICAS

  • Soporte prioritario en foro dedicado
  • Efecto Slideshow para galerías (autorotación)
  • Efecto proyector para la superposición de la caja de luz.
  • FacetWP, formas de gravedad y compatibilidad con TablePress
  • Más opciones de estilo: esquinas redondeadas, fondo de contenido en línea y colores de texto
  • Más opciones de ventanas emergentes automáticas: activadas por el hash de URL, primer enlace por tipo de medio, ocultar ventana emergente después de la primera visita
  • Pase la configuración de la caja de luz dedicada por enlace de medios a través de la clase de enlace (consulte las instrucciones de metadatos en las Preguntas frecuentes)
  • Más efectos elásticos (suavizantes) en apertura y cierre
  • Mostrar / ocultar el título de la imagen con el mouse
  • Ajuste el enlace de medios y la autodetección de la galería para que coincida con su marca de origen del tema para permitir galerías por publicación, por ejemplo

Para estas características adicionales, necesita instalar el Extensión profesional Junto a este plugin gratuito.

Contribuir

Si está satisfecho con este complemento tal como está, considere escribir una calificación rápida o ayudar a otros usuarios en el foro de soporte.

Si desea ayudar a construir este complemento, puede traducir Easy FancyBox a su idioma o contribuir con informes de errores, sugerencias de funciones y / o código en Github.

PROBLEMAS CONOCIDOS

General

  • Enlaces salientes o seguimiento de descargas. En algunos de los complementos de estadísticas puede interferir con FancyBox. Deshabilite dicha opción o excluya los enlaces manualmente con una clase (consulte las instrucciones para SlimStat a continuación)
  • La mayoría de los complementos y temas que ya incluyen un script de caja de luz. Continúe leyendo para ver si está utilizando uno de los conocidos o siga los pasos de solución de problemas para averiguar qué está en conflicto en su sitio.
  • Cualquier tema que falte lo obligatorio. llamar en la plantilla footer.php.
  • Cuando muestre un iframe como contenido en línea en FancyBox, no se recomienda, use fancybox-iframe en su lugar. – el iframe quedará en blanco después de abrirlo y cerrarlo. La solución es enlazar directamente a la fuente de iframe y usar class = "fancybox-iframe" en lugar.
  • El contenido flash incorporado que no tiene wmode o wmode ‘ventana’, se muestra sobre la superposición y otro contenido renderizado de javascript como los menús desplegables. WordPress NO verifica la falta de wmode en el código de inserción generado oEmbed. Desde la versión 1.3.4.5, este complemento agrega el wmode faltante para incrustaciones WP (auto-) pero no para otro contenido incrustado por el usuario. Asegúrese de configurar el parámetro wmode en “opaco” (mejor rendimiento) o “transparente” (solo cuando necesite transparencia) para su contenido incrustado.

Conflictos de plugins

  • jQuery Updater mueve jQuery a la versión 2+ que es incompatible.
  • Todo en un paquete de SEO y Analytics para WordPress con el seguimiento de enlaces salientes habilitado. Desactiva esa característica.
  • WP Slimstat con la opción Hacer clic en Salir de salida, romperá el efecto de la caja de luz en algunos navegadores. Añadiendo caja lujosa (o cualquiera de las otras clases como fancybox-youtube, fancybox-iframe, fancybox-inline para resolver el problema, se informa de qué medios se deben mostrar en FancyBox) al campo No rastrear. Slimstat también podría interferir con la conversión de la URL de YouTube. Al hacer clic en un enlace de Youtube, la película se abre en una superposición como se supone, pero inmediatamente después de eso, la página completa se redirige a la página original de YouTube. Añadiendo un class = "noslimstat" Se informa al enlace para trabajar alrededor del problema.
  • Google Analytics para WordPress convierte enlaces como href = "# anyID" a href = "http: //yoursite.url/page/#anyID", deshabilitando el contenido en línea mostrado en FancyBox.
  • Ambos uBillBoard y Pase de diapositivas de la cámara tienen su propia secuencia de comandos codificada, que está en conflicto con la de Easy FancyBox. La única forma de evitar el conflicto es configurar las opciones de Facilitar y Deshacer en la página Configuración> Medios para Oscilación.
  • WordPress Firewall 2 bloquea el acceso a los archivos de imagen necesarios para la visualización adecuada de la superposición de FancyBox en IE antiguos y otros navegadores que no sean css3.
  • WordPress Amazon Associate: Un script proporcionado por Amazon y el script FancyBox son incompatibles. Deshabilitar Vista previa del producto en el WP – Amazon> Configuraciones La página debería solucionar el problema.
  • WP Supersized utiliza la extensión jQuery de Animate Enhanced que causa un conflicto con la extensión Easing utilizada por FancyBox que da como resultado un marco de lightbox de 0px y / o algún tipo de problema de posicionamiento con autocentrado.

Conflictos de tema

  • Versiones anteriores de Temas elegantes ha integrado FancyBox de forma codificada, lo que los hace incompatibles con Easy FancyBox. En las últimas versiones de estos temas, hay una opción para deshabilitar el FancyBox incluido. Utilice esta opción para hacer que su tema sea compatible con Easy FancyBox
  • los Misterio El tema tiene dos opciones llamadas “Lightbox” y “Optimizar el sitio web para una carga más rápida” que romperá Easy FancyBox. Desactiva ambas opciones en Mystique> Advanced.
  • Desequilibrio y otros temas que usan la extensión Photo Galleria jQuery: gire de la opción JSGallery.
  • Temas como Ideado, Camaleón y muchos otros tienen FancyBox incorporado. No hay otra solución que eliminar el tema de todos los códigos relacionados con FancyBox o más: deshabilite el complemento y use la versión proporcionada por el tema …
  • Temas basados ​​en la Tesis marco podría ver problemas en IE 8, para los cuales se ha propuesto un hack

Capturas de pantalla

youtube fancybox

  • Imagen de ejemplo con Cubrir subtítulo. Esta es la forma predeterminada en que Easy FancyBox muestra las imágenes. Otras opciones son Dentro y el viejo Fuera de.

  • Ejemplo de una película de YouTube en superposición.

Instalación

WordPress

Instalación rápida: Instalar ahora!

… o …

Busca “fancybox fácil” e instala con esa mancha Plugins> Añadir Nuevo página de back-end.

… o …

Sigue estos pasos:

  1. Descargar archivo.
  2. Cargue el archivo zip a través de los complementos> Agregar nuevo> Cargar página … O … descomprima y cargue con su cliente FTP favorito en la carpeta / complementos /.
  3. Activa el complemento en la página de complementos.

¡Hecho! De forma predeterminada, cualquier imagen que esté vinculada directamente (no a una página de WordPress) desde sus publicaciones y páginas, ahora debería abrirse en una superposición de FancyBox 🙂

¿No está satisfecho con la configuración predeterminada? Echa un vistazo a las nuevas opciones en Ajustes> Medios.

WordPress MU / WordPress 3+ en modo Multi sitio

Igual que el anterior pero haz un Activar la red para activar las superposiciones de imágenes de FancyBox en cada sitio de su red. No se crean ni manipulan tablas de base de datos y no es necesario ejecutar un gancho de activación para que funcione con la configuración predeterminada.

Preguntas más frecuentes

BASIC
¿Qué es FancyBox?
Básicamente, es una forma elegante de presentar imágenes, películas, documentos portátiles y contenido en línea en su sitio web. Por ejemplo, si tiene imágenes reducidas en sus publicaciones que están vinculadas a la versión grande original, en lugar de abrirlas en una página en blanco, FancyBox las abre en una superposición suave. Visita FancyBox para más información y ejemplos.
¿Qué versión de FancyBox utiliza este complemento?
Este plugin utiliza un Versión actualizada Del original FancyBox 1.3.4, mejor adaptado a la era móvil.
Instalé el plugin. ¿Ahora que?
Primero, asegúrese de que las miniaturas de imágenes en sus publicaciones y páginas estén vinculadas a su contraparte de tamaño completo directamente. Abra cualquier publicación con imágenes en miniatura para editarla y seleccione la primera miniatura. Haga clic en el Editar imagen botón que aparece y elige Enlace a: archivo multimedia. De ahora en adelante, al hacer clic en esa miniatura se debe abrir la versión de tamaño completo en FancyBox.

Lo mismo ocurre con las galerías de WordPress. Escoger Enlace a: archivo multimedia al insertar una etiqueta de galería.

¿Dónde está la página de configuración?
No hay una página de configuración nueva, pero hay muchas opciones que puedes cambiar. Encontraras un nuevo Caja lujosa sección sobre Ajustes> Medios. Para ver el valor predeterminado, echa un vistazo al ejemplo en Capturas de pantalla …
¡Ayuda! No funciona…
Siga los pasos de resolución de problemas cerca del final de la descripción del complemento anterior para determinar la causa. Si eso no funciona, solicite asistencia en el foro de WordPress de Easy FancyBox o vaya al sitio de desarrollo
AVANZADO
¿Se mostrará una galería de WordPress en una superposición de FancyBox?
Sí, pero solamente si usaste la opción Enlace a: archivo multimedia Al insertar la galería! La galería quicktag / shortcode debería verse como [ gallery link="file" ].
La caja de luz no se ve bien en dispositivos móviles. ¿Qué puedo hacer al respecto?
La secuencia de comandos original FancyBox 1.3.4 no se desarrolló teniendo en cuenta los dispositivos móviles y, aunque la versión utilizada en este complemento tiene algunas adaptaciones para dispositivos móviles, aún podría ser menos óptima para pantallas muy pequeñas. La única forma de solucionar este problema es deshabilitar FancyBox para tamaños de pantalla pequeños en Ajustes> Medios en la sección Misceláneos> Compatibilidad de navegador y dispositivo.
¿Puedo hacer una presentación de diapositivas desde mi galería?
En la extensión Pro, hay una opción avanzada llamada “Galería de rotación automática” para eso.
¿Puedo excluir imágenes u otros enlaces de la auto-atribución?
Sí. Todos los enlaces con clase nolightbox que normalmente se habilitaría automáticamente, se excluirá de abrir en una superposición de FancyBox.


¿Puede NextGEN Gallery trabajar con Easy FancyBox?
NetxGEN tiene su propia versión FancyBox incorporada junto con una selección de otros scripts de lightbox, pero si prefiere usar Easy FancyBox (debido a una mejor personalización y otro soporte de medios) entonces necesita tomar algunos pasos para hacer que los dos complementos sean compatibles.

  1. Vaya a la página de Configuración> Administración de medios y apague la opción “Galería automática” de FancyBox en la sección Imágenes;
  2. Vaya a Galería> Otras opciones y configure la opción Efectos de la caja de luz en “Personalizado” y haga clic en Mostrar configuración avanzada;
  3. Rellene el campo Código con
    class = “fancybox” rel = “% GALLERY_NAME%”
  4. Deje los otros campos vacíos y guarde su configuración.
¿Puedo usar UNA miniatura para abrir una galería completa?
Se puede hacer manualmente (usando la función de galería interna de WordPress, o no) o en combinación con NextGen Gallery.

Manual

A. Abra su publicación para editarla en modo HTML e inserte la primera miniatura de la imagen en el contenido de la publicación (enlace al archivo de imágenes, no a la página) para que sirva como la miniatura de la galería.

SEGUNDO. Coloque el siguiente código para iniciar un div oculto que contenga todas las demás imágenes que solo deberían estar visibles en FancyBox:

DO. Inmediatamente después de comenzar en una nueva línea, inserte todas las demás imágenes que desee mostrar en su galería. Incluso puede utilizar la función de galería interna de WordPress con el código corto [ gallery link="file" ]. NOTA: si la miniatura de la galería se adjunta a la publicación, se mostrará una segunda vez al hojear la galería en FancyBox. Si no quieres eso, usa una imagen que no esté adjunta a la publicación como miniatura de galería.

RE. Cierre el div oculto con el siguiente código en una nueva línea:

Con la galería de NextGEN

Puede elegir entre dos códigos cortos para mostrar una galería que (1) limita las imágenes por galería usando el código corto [nggallery id=x] o (2) por nombre de etiqueta (a través de galerías; debe configurar el nombre de la etiqueta manualmente => más trabajo pero más control) utilizando el código corto [nggtags gallery=YourTagName,AnotherTagName].

Pasos generales:

A. Coloque el código corto de su elección en el contenido de su página / publicación.

SEGUNDO. Configurar NextGen en Galería> Configuración de la galería para mostrar las galerías como “NextGEN Basic Thumbnails” y luego debajo de NextGEN Basic Thumbnails para tener al menos las siguientes opciones configuradas de esta manera:

  1. Número de imágenes por página: 1
  2. Utilice el efecto de generador de imágenes: No
  3. Añadir imágenes ocultas: sí

DO. Opcional: agregue la siguiente nueva regla de CSS a su hoja de estilo del tema (o instale Custom CSS o Jetpack y agréguela en la nueva Apariencia> Editar página de administración de CSS) para ocultar los enlaces de exploración de páginas debajo de la miniatura de la galería.

.ngg-navigation {
pantalla: ninguna;
}

¿Puedo reproducir películas de YouTube, Dailymotion y Vimeo en una superposición de FancyBox?

Sí. Simplemente cree un enlace usando la URL de Compartir (la URL de la página completa, la URL corta con o sin opciones como HD, etc.) a la página de YouTube / Vimeo / Dailymotion en el contenido de su publicación. Si tiene la detección automática habilitada, el complemento se hará cargo del resto por usted. 🙂

Si ha deshabilitado la detección automática, asigne al enlace un atributo de clase como class = "fancybox-youtube" para Youtube, class = "fancybox-vimeo" para Vimeo y class = "fancybox-dailymotion" para Dailymotion, para habilitar manualmente FancyBox para ello.

Tanto las películas de YouTube como las de Vimeo pueden reproducirse inmediatamente después de abrirse agregando el parámetro reproducción automática = 1 a la URL. Por ejemplo, un enlace de YouTube de url corto que debería reproducirse en modo HD, tener el botón de pantalla completa y el inicio automático al abrirlo, se vería como:

texto o miniatura

Quiero el botón “Mostrar en pantalla completa” en mis películas de YouTubeAdjuntar & fs = 1 a su URL de compartir de YouTube.

¿Puedo mostrar una lista de reproducción de Youtube en FancyBox?Sí, solo vaya a la página de Youtube de cualquier película que esté en la lista de reproducción y use el botón Compartir para obtener la URL compartida al igual que con películas individuales, pero esta vez coloque una marca de verificación en la opción “Compartir con lista de reproducción”.

¿Puedo vincular una miniatura de NextGEN a una película de Youtube en FancyBox?El usuario Mark Szoldan compartió un buen truco de cómo hacer esto:

  1. Siga las instrucciones para hacer que Easy FancyBox funcione sin problemas con NextGEN arriba y asegúrese de que todo funcione correctamente para las miniaturas normales vinculadas a su versión de tamaño completo.
  2. Luego, asigne a la página que desea vincular a una película de Youtube la URL a la página de Youtube como título.
  3. Finalmente, pegue el código a continuación en un widget HTML personalizado que estará en su barra lateral o barra de pie de página, o puede codificarlo en su tema, pero asegúrese de que venga antes de wp_footer () llamada…

    jQuery (‘. fancybox [title*=”www.youtube.com”]’). Cada (función () {
    var title = jQuery (this) .attr (‘title’);
    var desc = jQuery (this) .parent (). attr (‘title’);
    jQuery (this) .attr (‘title’, desc);
    jQuery (this) .parent (). attr (‘href’, título);
    });

Este fragmento de script escaneará los títulos de las imágenes y si encuentra una URL de Youtube allí, reemplazará el valor del atributo href de los enlaces en consecuencia.

¿Puedo crear una galería de miniaturas de Youtube que se abran en FancyBox?Puede hacerlo manualmente cargando miniaturas individuales que puede recuperar utilizando la ID de película única en estas URL para tres tamaños diferentes:

https://img.youtube.com/vi/UNIQUE-MOVIE-ID/default.jpg
https://img.youtube.com/vi/UNIQUE-MOVIE-ID/mqdefault.jpg
https://img.youtube.com/vi/UNIQUE-MOVIE-ID/hqdefault.jpg

Otros lugares pueden ser

https://img.youtube.com/vi/UNIQUE-MOVIE-ID/0.jpg (igual que hqdefault.jpg)
https://img.youtube.com/vi/UNIQUE-MOVIE-ID/1.jpg
https://img.youtube.com/vi/UNIQUE-MOVIE-ID/2.jpg
https://img.youtube.com/vi/UNIQUE-MOVIE-ID/3.jpg
https://img.youtube.com/vi_webp/UNIQUE-MOVIE-ID/0.webp (igual que hqdefault.webp)
etc ...

Pero un método más fácil es este, compartido por Shashank Shekhar (¡gracias!):

Para crear las galerías de miniaturas de Youtube, instale https://wordpress.org/plugins/youtube-simplegallery/ y configure la opción “Efecto” en fancybox. A continuación, desactive la detección automática de YouTube en Configuración> Medios.

¿Puedo mostrar páginas web o archivos HTML en una superposición de FancyBox?Sí. Primero, habilite la opción iFrame en Configuraciones> Medios. Luego, en su publicación o contenido de la página, cree un enlace a cualquier página web o archivo .htm (l) en su contenido. Luego cambie a la pestaña Texto en el Editor clásico o a Editar como HTML (en Más opciones en el menú de bloque) en Gutenberg, busque el enlace etiqueta y dale un class = "fancybox-iframe" atributo.

Nota: No todas las páginas web externas pueden estar incrustadas en un iframe y pueden estar bloqueadas por un encabezado de respuesta del servidor o un script. El resultado será una caja de luz vacía / en blanco o la página de destino “saliendo” de la caja de luz y cargando en la pestaña principal del navegador.

¿Puedo mostrar archivos PDF en una superposición de FancyBox?Sí. Solo coloca un enlace con la URL terminando en .pdf a su archivo de documento portátil en el contenido de la página.

Si no tienes Detección automática revisado bajo PDF en Configuración> Página de administración de medios, deberá agregar class = "fancybox-pdf" (para forzar el reconocimiento de contenido en pdf) al enlace para habilitar FancyBox para ello.

¿Puedo reproducir archivos SWF en una superposición de FancyBox?Sí. Solo coloca un enlace con la URL terminando en .swf a su archivo flash en el contenido de la página.

Si no tienes Detección automática revisado bajo SWF en Configuración> Página de administración de medios, deberá agregar class = "fancybox" o class = "fancybox-swf" (para forzar el reconocimiento de contenido SWF) al enlace para habilitar FancyBox para ello.

¿Cómo muestro contenido con diferentes tamaños?FancyBox intenta detectar el tamaño del contenido automáticamente, pero si no puede encontrar un tamaño, se configurará de manera predeterminada la configuración para ese tipo de contenido en particular, como se establece en la página Configuración> Medios.

los Extensión profesional proporciona una opción adicional para permitirle anular esto manualmente definiendo el ancho y la altura entre llaves en el atributo de clase del enlace en sí. Asegúrese de que la opción “Incluir el script de extensión jQuery de metadatos …” en FancyBox | Misceláneos Avanzado en Configuraciones> Medios está habilitado.

Por ejemplo, una película Flash con diferente tamaño:


¡La película flash en la superposición muestra ABAJO otro contenido flash que está en la misma página!Asegúrese de que el otro contenido flash como wmode establecer, preferiblemente a “opaco” o bien “transparente” pero nunca a “ventana” o falta. Por ejemplo, si su objeto incrustado se ve algo como:

 

solo agrega entre los demás parámetros. O si está utilizando una inserción como:

 

solo cambia eso wmode = "ventana" a wmode = "opaco" o agregar el atributo si falta.

¿Cómo puedo mostrar el contenido de INLINE en una superposición de FancyBox?Primero ve a tu Ajustes> Medios página de administración y activar la En línea Opción bajo la configuración de FancyBox. Después de guardar, la página amin mostrará una nueva sección llamada Inline donde puede ajustar sus parámetros.

A continuación, abra su página / publicación para editarla en la pestaña HTML y envuelva el contenido en línea

site:kolmite.com

 

Luego, coloque una etiqueta de enlace FancyBox con el atributo de clase “fancybox-inline” en cualquier otro lugar del contenido de la publicación / página que apunte al contenido en línea como

Lee mi contenido en linea

NOTA: El ID de envoltura divs debe ser único y debe corresponderse con los enlaces HREF con un # delante. Cuando use el ejemplo anterior para más combinaciones de contenido en línea FancyBox (div oculto + enlace de apertura) en una página, dé a la segunda la ID de fancyboxID-2 y así sucesivamente …

NOTA 2: Si encuentra que el contenido en línea que se muestra en FancyBox tiene un estilo muy diferente al resto del contenido de la página, es posible que desee cambiar el atributo de etiqueta div class = "hentry" a otra cosa que coincida con su tema. Averigüe qué nombre de clase se usa para el contenido principal de su sitio y reutilícelo.

¿Puedo mostrar un formulario de contacto en FancyBox?

Sí. Hay varios métodos imaginables, pero el más sencillo sería utilizar el método Inline. Primero, vaya a su página Configuración> Administración de medios y habilite la opción Contenido en línea. A continuación, vuelva a editar su publicación o página en la pestaña Editor de texto. El contenido en línea puede ser un código abreviado como en este ejemplo utilizando los Formularios de contacto 7 y Easy FancyBox:

Contáctenos

 

Donde reemplaza el shortcode (entre el [ and ] caracteres) con el dado por el plugin. También puede funcionar con shortcode mediante otros complementos como el módulo Formulario de contacto de Jetpack. Cambie el atributo de clase para reflejar la clase utilizada para el div que envuelve el contenido de su publicación para que tenga cualquier forma de reglas de estilo CSS limitadas al contenido de la publicación, y aplíquela al contenido en línea dentro de FancyBox.

¿Puedo crear una imagen o contenido oculto para que aparezca en FancyBox al cargar la página?

Sí. Un enlace que tiene el ID. fancybox-auto (Nota: ¡solo puede haber UN enlace como el de una página!) Se activará automáticamente al cargar la página.

Utilice las instrucciones anteriores para el contenido en línea, pero esta vez también incluya el enlace id = "fancybox-auto" (abandone la clase también) y elimine el texto de anclaje para ocultarlo. Ahora el contenido del div oculto aparecerá automáticamente cuando un visitante abra la página.

Lo mismo se puede hacer con una imagen, película flash, PDF o enlace iframe! Pero por favor recuerda que solo puede haber uno Elemento utilizando la ID fancybox-auto por página …

¿Puedo tener una ventana modal?Sí, solo cree un cuadro de luz de contenido en línea oculto (puede ser una ventana emergente automática) como se describe anteriormente y asigne al enlace una clase adicional “modal”. Esto eliminará todas las opciones para cerrar el cuadro de luz, como el botón de cierre, un clic de superposición o la tecla de escape.

Esto significa que NO hay una opción para cerrar la caja de luz, a menos que cree un enlace como este dentro de la división de contenido en línea oculta:

Aceptar

¿Puedo abrir un elemento del menú en una superposición de FancyBox?Sí. Pero depende de tu tema lo que debes hacer para que funcione. Si tiene WordPress 3+ y su tema es compatible con la nueva función de menú personalizado interno o si está usando un menú personalizado en un widget de barra lateral, es fácil:

  1. Vaya a Configuración> Medios y habilite la compatibilidad con FancyBox iFrame.
  2. Vaya a Apariencia> Menús y abra la pequeña pestaña “Opciones de pantalla” en la esquina superior derecha.
  3. Habilite la opción “Clases CSS” en las propiedades del menú Avanzado.
  4. Ahora indique el elemento del menú que desea abrir en un FancyBox iframe la clase fancybox-iframe.

Si está usando una versión anterior de WordPress o si no puede usar los menús de WP, deberá hacer un gran pirateo de temas para que funcione. Básicamente, lo que necesita lograr es que el elemento de menú que desea abrir en una superposición de lightbox, debería obtener un class = "fancybox-iframe" atributo.

¿Cómo puedo hacer que FancyBox vea el contenido cargado de AJAX?Easy FancyBox escanea inicialmente la fuente de la página en busca de enlaces de medios en el evento “Documento Cargado”. Esto significa que justo después de que la fuente de la página esté disponible y sea leída por el navegador. Cuando su contenido u otro complemento agregue o modifique el contenido a través de AJAX (es decir, después de la carga de la página inicial), entonces FancyBox no estará al tanto de ningún enlace multimedia en ese contenido nuevo.

Para que Easy FancyBox vuelva a escanear la fuente de la página actualizada después de que el contenido se haya modificado a través de AJAX, hay un detector de eventos disponible. Este evento también se desencadena por el módulo Jetpack Infinite Scroll. Para usar este evento, deberás modificar el tema u otra secuencia de comandos de complementos que maneje las llamadas AJAX.

Puedes desencadenar el evento así:

jQuery (document.body) .trigger ('post-load');

Nota: depende completamente de la secuencia de comandos AJAX donde se debe colocar este fragmento de código. Optimamente a la derecha después La modificación de DOM donde se agrega o modifica el contenido. En la mayoría de los casos al final del controlador de éxito AJAX.

¿Easy FancyBox es compatible con múltiples sitios?Sí. Diseñado para trabajar con Activar la red y no requiere activación manual en cada sitio de su red.

SOLUCIÓN DE PROBLEMASSi, después de la activación, sus imágenes no se abren en una superposición de FancyBox, hay varias razones posibles. Algunos son fáciles de resolver, otros son más difíciles. Siga estos controles básicos para asegurarse de que todo esté en su lugar:

Controles basicos

  1. Asegúrese de que las imágenes en miniatura están vinculadas directamente a su contraparte más grande, no a una página de WordPress dinámica que incluya la imagen más grande. Esto significa que cuando inserta una imagen en sus publicaciones o páginas, debe seleccionar URL del archivo en el Enlazar opción en lugar de URL de la página. Tendrás que editar manualmente tus publicaciones antiguas si siempre has insertado imágenes con URL de la página antes, FancyBox no puede hacer esto por ti.
  2. Asegúrese de tener todos los medios necesarios y sus Detección automática opciones activadas en tu Ajustes> Medios Página de administrador. Si está utilizando imágenes en otros formatos que JPG, GIF o PNG, debe agregar las extensiones al campo Detección automática de imágenes. Por favor, tenga en cuenta: Los nombres de los archivos de imagen deben ser exactos. fin ¡Con esa extensión! Esto significa que si tiene un archivo de imagen que (por ejemplo) tiene no La extensión (no termina con .jpg o cualquier otra), incluso si está en formato comprimido JPEG, el FancyBox no podrá detectar como una imagen. Deberás dar manualmente a esos enlaces la clase. caja lujosa para activar FancyBox.

Problemas generales para solucionar problemas.

  1. Desactive todos los demás complementos y cambie la apariencia de sus sitios al tema predeterminado de Twenty Seventeen. FancyBox debería funcionar ahora. Si es así, continúa con el siguiente paso. Si no es así, vuelva a instalar el complemento y verifique los pasos básicos anteriores.
  2. Vuelva a su tema original y compruebe si FancyBox sigue funcionando. Si es así, continúa con el siguiente paso. Si no, vea las verificaciones de incompatibilidad del tema a continuación.
  3. Uno por uno, encienda cada complemento que tenía antes de encenderlo. Siga revisando para ver en qué punto FancyBox comienza a fallar y habrá encontrado el complemento conflictivo.

Verificación de incompatibilidad del tema

  1. Primero vea los conflictos de temas conocidos, luego continúe con los siguientes pasos.
  2. Asegúrese de que su tema sea capaz de colocar el javascript y css necesarios en el encabezado y pie de página. Abra cualquier página de su sitio y vea el código fuente haciendo clic derecho en una sección vacía y seleccionando “Ver fuente …” (o similar). Allí tendrá que verificar si hay referencias a archivos javascript como jquery.fancybox.min.js? ver = x.x.x cerca del cierre etiqueta. También debería haber un easy-fancybox.min.css? ver = x.x.x en la sección de encabezado … Si no está allí, su tema está realmente desactualizado. ¡Considere cambiar a un nuevo tema rápido!
  3. Asegúrese de que su tema no carga el archivo de la biblioteca principal de jQuery más de una vez. Busque referencias a archivos javascript como jquery.js? ver = x.x.x o jquery.min.js en el código fuente de la página. Si encuentra más de uno, intente averiguar en qué archivo de plantilla de tema esa segunda referencia está codificada y elimine esa línea. Generalmente en header.php o footer.php
  4. Compruebe si su tema carga otro o el mismo script de lightbox. Busque referencias a los archivos o códigos de Thickbox, Prettyphoto, Lightbox2, Colorbox o FancyBox. Es muy probable que estos causen la incompatibilidad y tendrá que eliminarlos pirateando su tema o cambiar a otro tema.

Si aún no puede ver sus imágenes en FancyBox, pregunte en el foro de WordPress de Easy FancyBox o vaya al sitio de desarrollo

Controles de incompatibilidad

  1. Si siguió los pasos generales de resolución de problemas anteriores, ahora debería saber qué complemento es conflictivo con Easy FancyBox. Ver conflictos de plugins conocidos arriba primero. Si el complemento y su solución no se mencionan allí, continúe con los siguientes pasos.
  2. Asegúrese de que los complementos no hagan que el archivo de la biblioteca principal de jQuery se cargue más de una vez. Busque referencias a archivos javascript como jquery.js? ver = x.x.x o jquery.min.js en el código fuente de la página. Si encuentra más de uno, intente averiguar de dónde proviene.
  3. Compruebe si su tema carga otro o el mismo script de lightbox o alguna otra de las extensiones de jQuery necesarias como jquery.easing o jquery.mousewheel. Busque referencias a los archivos o códigos de Thickbox, Prettyphoto, Lightbox2, Colorbox o FancyBox. Es muy probable que estos causen la incompatibilidad y tendrá que encontrar una configuración en el otro complemento para desactivar el uso de la secuencia de comandos en conflicto (posible en NextGEN, ver en Avanzado a continuación) o elegir entre los dos complementos en conflicto.

 

Opiniones

¡Exactamente lo que estaba buscando!

alr22516

Tan fácil de configurar y usar, justo lo que estaba tratando de encontrar para los videos de Youtube. ¡Muchas gracias!

Fantástico plugin lightbox! ¡No te equivocarás con este!

webmaker1982

Este es un complemento brillante que se adapta a mis necesidades al 100%. Perdí dinero comprando un complemento en Codecanyon sin saber que Easy Fancy Box cumpliría con mis requisitos. 5 estrellas por la funcionalidad y otras 5 estrellas por el fantástico soporte.

Nuevo lanzamiento: excelente!

Apfwebs

Acabo de actualizar, después de dejar que mi sitio languidezca en Fancybox heredado durante bastante tiempo. La nueva versión tiene una curva de aprendizaje (especialmente si no eres un javascript pesado). Pero el esfuerzo merece la pena. Lo nuevo supera a lo antiguo en eficiencia, ancho de banda y velocidad. Todos mis amigos. Suave como la seda. Colocaré esta reseña directamente en el sitio de fancyapps pero no tienen ningún sitio donde ponerla. El plug-in bien vale una inversión.

Brillante

David Bennett

Muy simple de usar y soporte muy rápido con una consulta que tuve.

Impresionante para los videos de youtube y mucho mejor rendimiento. Trabaja con Divi 😀

Bjarne

Easy Fancybox hace que sea un placer mostrar videos de YouTube en una caja de luz cuando el usuario hace clic en una miniatura, en lugar de incrustar el video directamente en la página (lo que causa un impacto en el rendimiento).

Con Easy Fancybox y el almacenamiento en caché estándar, el índice de velocidad de mi página volvió a A y la velocidad de carga a <500 ms.

Usándolo con Divi y Slimstat, sin problemas …

¡Gracias!

Actualización: con la versión 1.8 y el nuevo “Habilitar el modo mejorado de privacidad” de youtube, la privacidad se ha mejorado significativamente, ya que no se configuran cookies al mostrar videos de YouTube. Una gran ventaja … ¡Gracias de nuevo!

Problema con la actualización a 1.6.3

albenava

La reciente actualización a 1.6.3 causó un error fatal y no pudo ingresar al panel de administración. Por favor, solucione el problema.
De lo contrario, gran plugin.

 

Leer las 155 opiniones

Colaboradores y Desarrolladores

“Easy FancyBox” es un software de código abierto. Las siguientes personas han contribuido a este plugin.

Contribuyentes

  • RavanH

“Easy FancyBox” se ha traducido a 10 locales. Gracias a los traductores por sus contribuciones.

Traduce “Easy FancyBox” a tu idioma.

¿Interesado en el desarrollo?

Examine el código, visite el repositorio de SVN o suscríbase al registro de desarrollo por RSS.

Registro de cambios

1.8.9

  • Prevenir la galería de enlaces siguientes / previos para mostrar el objetivo de error
  • FIX: permitir los parámetros de url de youtube antes de v =

1.8.7

  • Autoplay Youtube / Vimeo / Dailymotion
  • FIX: Excluir las páginas de usuario de Vimeo de autodetectar
  • FIX: Excluir facebook / twitter compartir enlace
  • FIX: PDF incrustar etiqueta

1.8.6

  • Compatibilidad con el botón de descarga del bloque de archivos Gutenberg
  • Galería Gutenberg compatibilidad de bloque
  • FIX: Falta el argumento en easyFancyBox :: add_video_wmode_opaque ()
  • Eliminar los parámetros de la URL de la versión
  • FIX: jQuery 3+ e.indexOf no es una función

1.8.5

  • REVISIÓN: evitar el título de contenido en línea

1.8.4

  • Centro mejorado en el comportamiento de desplazamiento con título fuera
  • FIX: Compatibilidad con opciones Pro

1.8.3

  • REVISIÓN: la opción AutoScale restaurada
  • FIX: esquema de problema en Firefox
  • Prevenir la advertencia del optimizador de SiteGround acerca de la ruptura fuera del bucle

1.8.2

  • REVISIÓN: el método principal no devuelve verdadero en algunos casos
  • Forzar todos los videos alojados a https
  • FIX: el iframe de video debe permitir = “reproducción automática” en los navegadores modernos
  • REVISIÓN: prioridad de puesta en cola por defecto no 10
  • FIX: posible bucle infinito en prev / next y precargador de imagen
  • Mueve el método principal (atrás) a init, posición 9
  • Presentamos el gancho de acción easy_fancybox_enqueue_scripts

1.8

  • NUEVO: Google Docs Viewer para PDF
  • NUEVO: Incrustación de privacidad incrustada en Youtube
  • NUEVO: opciones de compatibilidad: inclusión de script tardío, exclusión de jquery, no wp_add_inline_script
  • FancyBox: Detección de la altura de la ventana gráfica móvil mejorada
  • FancyBox: now skips subsequent double links in gallery
  • FancyBox: new PDF content type
  • FancyBox: improved error messages
  • Dedicated IE8 stylesheet
  • jQuery Easing update to 1.4.1

1.7

  • NEW: Aspect ratio for video frames on smaller screens
  • NEW: Global minimum screen size
  • NEW: Loading icon for video/iframe content
  • NEW: Resize light box on device orientation or browser window size change
  • NEW: Modal window class and close button class
  • FIX: pre PHP 5.4 compatibility
  • FIX: iPhone iframe scrolling
  • FIX: Autoptimize compatibility
  • Switch to wp_add_inline_script() script printing, thanks @szepeviktor

1.6.3

  • FIX: inline js minification incompatibility, thanks @alexiswilke

1.6.2

  • FIX: line breaks hidden on options media admin page since WP 4.9, thanks @garrett-eclipse

1.6.1

  • Nolightbox class in menu also for other media types than images
  • FIX: CSS color code
  • Spelling fixes, thanks @garrett-eclipse
  • FIX: Pinterest button compatibility
  • FIX: Double load plugin text domain

1.6

  • Add webp to default Autodetect image types
  • Exclude more rel attribute values from galleries
  • BUGFIX: gallery preload
  • Update jquery.easing.js and jquery.mousewheel.js

1.5.8.2

  • BUGFIX: use dirname(EXPEDIENTE) instead of relying on DIR to be available
  • Explicit transparency for gallery navigation links

1.5.8

  • FIX: variable variable php 7 compat
  • FIX: obj undefined in minified js
  • FIX: nofancybox in menu ignored, thanks Trishah
  • Color value sanitize
  • NEW: auto popup delay
  • NEW: pro extension version compatibility check routine
  • NEW: margin option
  • NEW: iFrame alow full screen option
  • Dropped mu-plugins support
  • Added support for universal nolightbox class
  • Set focus on iframe after load
  • FIX: No center on scroll on touch devices
  • FIX: Allow fullscreen videos

1.5.7

  • FIX: Pro extension link update
  • NEW: WebP support and class=’image’ to force image media type
  • IE 6-8 css rules optional
  • iframe embed for Youtube, Vimeo and Dailymotion
  • Croation translation
  • HTML5 players allowfullscreen default

1.5.6

  • iPad positioning patch
  • Don’t unregister scripts that are not ours even for conflict prevention
  • box-sizing: border-box issue in Firefox fixed
  • Allow mousewheel scrolling page in the background again

1.5.5

  • Prevent mousewheel scrolling page in the background
  • New stylesheet IE alphaimageloader path fix approach
  • Czech translation added
  • Updated Indonesian translation

1.5.2

  • BUGFIX: easy_fancybox_handler() in combo with trigger(‘click’) causes Uncaught Exception script error

1.5.1

  • FIX: jQuery 1.9+ compatibility
  • Dropping support for gForms again — “Cannot convert ‘c’ to object” error in combination with some older gForms version 🙁
  • NEW: support for Infinite Scroll by Jetpack

1.5.0

easy fancybox youtube

  • FIX: CSS3 box-sizing issue (Twenty Thirteen) misplacing close button
  • NEW: Added SVG support. Thanks to Simon Maillard.
  • Pre WP 3.6: jQuery 1.9+ compatibility
  • JQuery Mousewheel extension update to 3.1.3
  • NEW: Elegant Themes compatibility
  • Some small Touch device compatibility improvement hacks to the 1.3.4 script
  • Major plugin overhaul: Class implementation
  • NEW: Disable hide on overlay click
  • NEW: Allow automatic resizing to large image size set on Settings > Media during media upload via the hidden WordPress function media_upload_max_image_resize() TODO test more!
  • NEW Options: iFrame scrolling, autoScale, key navigation/close, cyclic galleries
  • Metadata custom parameters and Mousewheel gallery scrolling scripts optional
  • Basic RTL languages/text direction support (gallery navigation inversion, title position)
  • BUGFIX: https in stylesheet on Windows IIS
  • Improved W3TC compatibility: query string issue
  • Gravity Forms in ajax mode compatibility
  • Use jQuery’s bind(‘ready’) for better ajax content compatibility
  • Dynamic stylesheet response headers to allow browser caching
  • Minified version of jquery.metadata.js
  • Auto-detect on image map areas
  • nolightbox class for menu items
  • SECURITY: Settings sanitization
  • BUGFIX: load_textdomain firing after the main settings array is loaded, leaving text strings in it untranslated.
  • BUGFIX: missing signs in Youtube url regular expression
  • BUGFIX: unquoted rel attribute selectors in jquery.fancybox-1.3.4.js
  • BUGFIX: broken url path in IE stylesheet when missing $_SERVER[‘SERVER_NAME’]
  • BUGFIX: easing extension not needed on linear easing

1.3.4.9

  • NEW: Lithuanian translation
  • NEW: Hindi translation
  • NEW: Indonesian translation
  • NEW: Romanian translation
  • NEW: Polish translation
  • NEW: Spanish translation
  • NEW: jQuery Metadata support
  • NEW: Image map AREA support for all content types
  • NEW: new iFrame/HTML5 embed code for YouTube, Vimeo and Dailymotion
  • NEW: fix WordPress Dailymotion auto-embed code missing wmode
  • Some changes to default settings
  • Updated Dutch translation
  • BUGFIX: Opening speed

1.3.4.8

  • NEW: Advanced option: Gallery auto-rotation
  • NEW: Spotlight effect
  • Improved auto-enable and auto-gallery settings
  • BIGFIX: CSS IE6 hack
  • BIGFIX: PDF object in IE7

1.3.4.6

  • PDF embed compatibility improvement
  • NEW: Show/hide title on mouse hover action
  • NEW: Auto-gallery modes (Disabled, page/post images only, all)
  • NEW: Dailymotion support
  • Links with id fancybox-auto will be triggered on page load
  • Anything with class fancybox-hidden” será escondido
  • Support for menu items in iframe
  • Added class nofancybox for exclusion when auto-enabling

1.3.4.5

  • FancyBox script version 1.3.4 (2010/11/11 – http://fancybox.net/changelog/)
  • NEW: Support for PDF
  • NEW: Easing options
  • YouTube, Vimeo and iFrame options adjustable
  • lots and lots of more options!
  • BIGFIX: work-around for missing wmode in WordPress (auto-)embedded movies (credits: Crantea Mihaita)

1.3.3.4.2

  • BIGFIX: iframe width
  • BIGFIX: image overlay size in Google Chrome browser issue (FancyBox 1.3.3)
  • BIGFIX: fancybox-swf

1.3.3.4

  • FancyBox script version 1.3.3 (2010/11/4 – http://fancybox.net/changelog/)
  • Vimeo support
  • YouTube Short URL support (disabled by default)
  • Auto-recognition and seperate class fancybox-youtube for YouTube
  • Auto-recognition and seperate class fancybox-vimeo for Vimeo

1.3.2

  • FancyBox script version 1.3.2 (2010/10/10 – http://fancybox.net/changelog/)

1.3.1.3

  • translation .pot file available
  • Dutch translation
  • NEW: YouTube and Flash movie support
  • NEW: Iframe support
  • added option Auto-enable for…

1.3.1.2

  • added option titlePosition : over / inside / outside
  • added option transitionIn : elastic / fade / none
  • added option transitionOut : elastic / fade / none

1.3.1.1

  • small jQuery speed improvement by chaining object calls

1.3.1

  • Using FancyBox version 1.3.1

Por favor Comparte y Síguenos:
RSS
Follow by Email
Facebook
Twitter

Deja una respuesta