Oxygenados La comunidad hispana
post oxygen builder
Logo Oxygenados

Filtro AJAX de Galería

¿Cómo puedes 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
  • Code Snippets o Advanced Scripts
  • Advanced Custom Fields PRO
    1. Usando la versión PRO porque tiene el campo de galería de imágenes y la versión gratuita no.

Instalación:

  • CPT UI →Add/Edit Post Types (Añadir Editar Post Types).
    • Post Type Slug: gallery
    • Plural Label: Galleries
    • Singular Label: Gallery

    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

    1. 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.
    1. Instalar 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 .= '';
    		}
    		echo $output;
    
    		wp_reset_postdata();
    	} 
    	else {
    		echo 'No se han encontrado resultados';
    	}
    
    	die();
    }
    
    Click para Copiar
    Copiado
    • Guardar los cambios y Activar.
    1. 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
    1. 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
    0 0 votos
    Article Rating
    Suscribir
    Notificar de
    guest
    0 Comments
    Comentarios en línea
    Ver todos los comentarios

    OTROS TIPS

    Burbuja que sigue al cursor

    Un efecto de seguimiento del cursor con solo código.

    Leer más
    Botón para copiar

    Con un poco de código podemos hacer el típico botón que nos permite pasar al porta-papeles o lo que es lo mismo, copiar un texto; este texto puede estar oculto o visible y podrá ser código o texto plano.

    Leer más
    Año Copyright dinámico

    Hacer que el año del copyright, generalmente colocado en el footer, se actualize de manera automática. Mostramos tres maneras de hacerlo.

    Leer más
    LISTADO TIPS