Como añadir efecto FancyBox a las imágenes

Vamos a ver cómo hacer el efecto FancyBox, el cual permite añadir un efecto de ventana emergente o popup para ampliar tus imágenes cuando hagan clic en ellas.

Esta guía funciona con independencia a la plantilla que uses o al Framework.

Para conseguir este efecto lo primero que tienes que hacer es descargar el zip Fancybox.

Descomprímelo y añade los archivos que se incluyen en tu FTP en la ruta /wp-content/Theme, respetando las carpetas que lo organizan, si tu theme no tiene la carpeta css, js o images tendrás que crearlas.

FTP fancybox

Una vez que estén todos los archivos en su sitio, añade este código al functions.php de tu theme child o a tu mu-plugin.

// Enqueue Scripts/Styles for our Lightbox

 function tdw_add_lightbox() {
    wp_enqueue_script( 'fancybox', get_bloginfo( 'stylesheet_directory' ) . '/js/jquery.fancybox.pack.js', array( 'jquery' ), false, true );
    wp_enqueue_script( 'lightbox', get_bloginfo( 'stylesheet_directory' ) . '/js/lightbox.js', array( 'fancybox' ), false, true );
    wp_enqueue_style( 'lightbox-style', get_bloginfo( 'stylesheet_directory' ) . '/css/jquery.fancybox.css' );
}

add_action( 'wp_enqueue_scripts', 'tdw_add_lightbox' );

Comprueba que tus imágenes ya hacen este efecto.

Fancy Box WordPress

Deja un comentario

×
×

Carrito