El añadir lightbox con sus efectos visuales parece una tarea difícil y que requiere el uso de un nuevo plugin, pero nada más lejos de la realidad, con Oxygen lo tenemos muy fácil, realmente asombrosamente fácil con dos líneas de código HTML y pocas más de código JavaScript, aquí mostramos como hacerlo.
Descripción:
En este tutorial, mostramos cómo hacer una galería de imágenes con Oxygen Builder para ello vamos a necesitar tener instalados estos plugins
- Custom Post Type UI
- WpCodebox o Advanced Scripts
- Advanced Custom Fields PRO
- Usando la versión PRO porque tiene el campo de galería de imágenes y la versión gratuita no.
Instalación:
- Instalar Custom Post Type UI
- Post Type Slug: gallery
- Plural Label: Galleries
- Singular Label: Gallery
- Instalar Advanced Custom Fields
Seguir estas indicaciones para la configuración de los campos personalizados:
Custom Fields → Add New (Añadir Nuevo)
Title: Gallery
Rules: Post Type is equal to Post
+ Add Fields (Añadir Campos)
Field Label: Gallery
Field Name: gallery
Field Type: Gallery
- Ir a Galleries → Add New y crear por ejemplo tres post: Eventos, Retratos y Bodas.
- Asegurarse de poner algunas imágenes en cada tipo de galería.
- Instalar WpCodebox , Advanced Scripts o Code Snippets (Recomendamos el primero)
- Snippets → Add New
- Title: Filtro AJAX Personalizado (o cualquier otro nombre descriptivo)
- Código:(Ver siguiente)
add_action('wp_ajax_customfilter', 'custom_filter_function');
add_action('wp_ajax_nopriv_customfilter', 'custom_filter_function');
function custom_filter_function(){
$args = array(
'post_type' => 'gallery',
'posts_per_page' => -1
);
// Filter on gallery-category
if ( isset( $_POST['gallery_category'] ) ) {
$args['p'] = $_POST['gallery_category'];
}
$query = new WP_Query( $args );
// Si se encuentra algún post
if( $query->have_posts() ) {
$images = array();
while( $query->have_posts() ) {
$query->the_post();
$gallery = $query->post->gallery;
if ($gallery) {
foreach($gallery as $image) {
array_push($images, $image);
}
}
}
// Orden aleatorio de las imágenes
shuffle($images);
$output = '';
foreach($images as $id) {
$src = wp_get_attachment_image_url( $id, 'full' );
$srcset = wp_get_attachment_image_srcset( $id, 'full' );
$sizes = wp_get_attachment_image_sizes( $id, 'full' );
$output .= '![img-5]()
';
}
echo $output;
wp_reset_postdata();
}
else {
echo 'No se han encontrado resultados';
}
die();
}
Click para Copiar
Copiado
- Guardar los cambios y Activar.
- Crear la nueva página y en ella añadir un Code Block (Bloque de Código)
- En el código PHP/HTML del bloque metemos el siguiente código
<form action="<?php echo site_url() ?>/wp-admin/admin-ajax.php" method="POST" id="filter">
<?php
$posts = get_posts( array( 'post_type' => 'gallery' ) );
if ($posts) {
echo '<div class="radio-toolbar">';
$output = '';
$gallery_total_size = 0;
foreach($posts as $post) {
$gallery_size = sizeof($post->gallery);
$gallery_total_size += $gallery_size;
$input = '<input id="' . $post->post_title . '" type="radio" class="gallery-filter" name="gallery_category" value="' . $post->ID . '" />';
$label = '<label for="' . $post->post_title . '" class="radio-filter">' . $post->post_title . " (" . $gallery_size . ') </label>';
$output .= $input . $label;
}
echo '<input id="all" type="radio" class="gallery-filter" name="gallery_category" value="-1" checked />';
echo '<label for="all">All (' . $gallery_total_size . ')</label>';
echo $output;
echo '</div>';
}
?>
<input type="hidden" name="action" value="customfilter">
</form>
<div id="response" class="gallery" />
Click para Copiar
Copiado
- En el código JavaScript del bloque metemos el siguiente código
var lazyImageObserver;
jQuery( document ).ready(function($) {
// Intersection Observer
lazyImageObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
let lazyImage = entry.target;
lazyImage.src = lazyImage.dataset.src;
lazyImage.srcset = lazyImage.dataset.srcset;
lazyImage.style.minHeight = null;
lazyImage.removeAttribute('data-src');
lazyImage.removeAttribute('data-srcset');
lazyImage.classList.remove("lazy");
lazyImageObserver.unobserve(lazyImage);
lazyImage.classList.add('fadeIn');
lazyImage.classList.remove("loading");
}
});
});
// On button change
$('.gallery-filter').change(function(){
sendAJAX();
return false;
});
// On load
sendAJAX();
return false;
});
function sendAJAX() {
var filter = jQuery('#filter');
jQuery.ajax({
url:filter.attr('action'),
data:filter.serialize(),
type:filter.attr('method'),
startTime:new Date().getTime(),
beforeSend:function(xhr){
disableButtons();
jQuery('.gallery-image').addClass('fadeOut');
},
success:function(data){
var endTime = new Date().getTime();
var totalTime = endTime - this.startTime;
var timeToWait = 0;
if (totalTime >= 400) {
timeToWait = 0;
} else {
timeToWait = 400 - totalTime;
}
setTimeout(function(){
jQuery('#response').html(data);
updateObserver();
setTimeout(function(){
enableButtons();
}, 800);
}, timeToWait);
}
});
}
function updateObserver() {
let lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
lazyImages.forEach(function(lazyImage) {
lazyImageObserver.observe(lazyImage);
});
}
function disableButtons() {
jQuery('.radio-toolbar label').css('opacity', '0.5');
jQuery('.radio-toolbar label').css('cursor', 'default');
jQuery('.gallery-filter').attr('disabled', true);
}
function enableButtons() {
jQuery('.radio-toolbar label').css('opacity', '1.0');
jQuery('.radio-toolbar label').css('cursor', 'pointer');
jQuery('.gallery-filter').attr('disabled', false);
}
Click para Copiar
Copiado
- En el código CSS del bloque metemos
/* Gallery */
.gallery {
width: 100%;
display: grid;
grid-auto-rows: 1fr;
grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
grid-column-gap: 10px;
grid-row-gap: 10px;
}
.gallery-image {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Animations */
.fadeIn {
animation-name: fadeIn;
animation-duration: 0.8s;
animation-timing-function: ease;
}
.fadeOut {
animation-name: fadeOut;
animation-duration: 0.4s;
animation-timing-function: ease;
opacity: 0;
}
.loading {
opacity: 0;
}
@keyframes fadeOut {
0% {
opacity: 1;
-webkit-transform: scale(1)
}
1% {
opacity: 0.5;
transform: scale(0.9)
}
100% {
opacity: 0;
-webkit-transform: scale(0.8)
}
}
@keyframes fadeIn {
0% {
opacity: 0;
-webkit-transform: scale(1)
}
1% {
opacity: 0.2;
transform: scale(0.2)
}
100% {
opacity: 1;
-webkit-transform: scale(1)
}
}
/* Radio buttons */
.radio-toolbar {
width: 100%;
display: flex;
flex-wrap: wrap;
margin-bottom: 40px;
}
.radio-toolbar input[type="radio"] {
display: none;
}
.radio-toolbar label {
border-color: #ccc;
border-radius: 4px;
border-style: solid;
border-width: 2px;
margin: 8px 8px 0px 0;
padding: 4px 11px;
font-size: 16px;
font-family: 'Poppins';
cursor: pointer;
}
.radio-toolbar input[type="radio"]:checked+label {
background-color: #0069ff;
border-color: #0069ff;
color: white;
}
o
Click para Copiar
Copiado
- En el caso de querer añadir el efecto LightBox hacemos los siguientes pasos:
También se puede añadir con un snippet con Advanced Scripts
- Al principio del código PHP/HTML del Code Block insertamos:
<link href="//cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.min.css" type="text/css" rel="stylesheet" />
<script src="//cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script>>
Click para Copiar
Copiado
- Y en código del snippet que(el primer código que hemos insertado con un snippet), cambiamos:
$output .= '<img style="min-height:500px;" class="lazy loading gallery-image" data-src="'. $src .'" data-srcset="' . $srcset . '" sizes="' . $sizes . '" />';
Click para Copiar
Copiado
- por:
$output .= '<img class="lazy loading gallery-image" style="min-height: 500px;" sizes="' . $sizes . '" data-featherlight="image" data-featherlight-target-attr="src" data-src="'. $src .'" data-srcset="' . $srcset . '" />';
Click para Copiar
Copiado