Lightbox qué es y como crearlo en las imágenes de WordPress

De muchas maneras que hay para mostrar imágenes en una página, siempre me ha encantado y es la que siempre he utilizado, es el efecto lightbox, que principalmente lo que hace es que la imagen se vea en su tamaño original, o en un tamaño superior, oscurece el resto de la página para dar prioridad a esa imagen.
Es mucho mejor verlo con vuestros propios ojos ya que es una definición bastante dificil, seguro que lo habéis visto en mas de una web.

lightbox en wordpress

Lightbox en wordpress archivos del tutorial

Bueno primero de todo os dejo los archivos necesarios en esta url.

Cuando os descargáis, el archivo podréis ver como hay una carpeta llamada vuestro tema activado, veréis que dentro de allí encontramos una carpeta llamada includes y un archivo functions.php, si no teneis en vuestro tema una carpeta includes la podeis copiar sin problemas, si ya teneis una carpeta con ese nombre, copias lo de dentro solamente, es decir otra carpeta llamada lightbox.

El functions.php, el que hay en la carpeta que os he dado para que descargáis lo abris y copias el contenido en vuestro functions.php, El código es el siguiente:

// cargar estilos y scripts para Lightbox
function add_lightbox() {
 wp_enqueue_script( 'fancybox', get_stylesheet_directory_uri() . '/includes/lightbox/js/jquery.fancybox.pack.js', array( 'jquery' ), false, true );
 wp_enqueue_script( 'lightbox', get_stylesheet_directory_uri() . '/includes/lightbox/js/lightbox.js', array( 'fancybox' ), false, true );
 wp_enqueue_style( 'lightbox-style', get_stylesheet_directory_uri() . '/includes/lightbox/css/jquery.fancybox.css' );
}
add_action( 'wp_enqueue_scripts', 'add_lightbox' );
?>

Lo que hacemos es cargar el script fancybox, el archivo lightbox.js y el archivo fancybox.css
Con esto ya tendríamos el efecto lightbox, funcionando correctamente para enlaces a imágenes con extensiones .jpg, .jpeg, .png o .gif
Si quisiéramos añadir, que para vídeo o para otras características se abriera el efecto lightbox os explico unas lineas de código a continuación, que las tendreis que introducir en /includes/lightbox/js/lightbox.js

(function($) {
 // Inicia Lightbox para cualquier div,img con clase 'fancybox'.
 $(".fancybox").fancybox();
  // activa Lightbox automaticamente para links a imágenes .jpg, .jpeg, .png o .gif, este es el que actualmente esta puesto en el archivo descargable
 $("a[href$='.jpg'], a[href$='.png'], a[href$='.jpeg'], a[href$='.gif']").fancybox();
 // Inicia Lightbox y añade rel = "galery" a todas imágenes de la galería cuando la galería se configura usando [galería link = "file"] 
 $(".gallery a[href$='.jpg'], .gallery a[href$='.png'], .gallery a[href$='.jpeg'], .gallery a[href$='.gif']").attr('rel','gallery').fancybox();
 // Activa Lightbox para cualquier link con la clase 'video'.
 $(".video").fancybox({
 maxWidth : 800,
 maxHeight : 600,
 fitToView : false,
 width : '70%',
 height : '70%',
 autoSize : false,
 closeClick : false,
 openEffect : 'none',
 closeEffect : 'none'
 });
})(jQuery);

Os vuelvo a dejar el enlace por si queréis Descargar el contenido.

Espero que os haya gustado, este nuevo tutorial.

Si queréis tutoriales de algún tema, comentarmelo.

Summary
Review Date
Author Rating
51star1star1star1star1star
Entradas relacionadas

Deja un comentario

Tu dirección de correo electrónico no será publicada.