Oxygenados La comunidad hispana
Recoda White Full Logo
Patrocinador
post oxygen builder

Infinite Scroll

¿Cómo puedes hacerlo?

Listado de Guías

En esta ocasión vamos a instalar un infinite scroll en una página o entrada que lleve un repeater de Oxygen.
Para ello nos vamos a valer de una librería Infinite Scroll , añadiendo solamente un botón y un Code Block en el que meteremos un poco de código JS, CSS y HTML.
Empezamos como siempre siguiendo los pasos que mostramos.

  1. Justo debajo de donde termina el bloque del repeater añadimos un Div y dentro de este un Code Block y un botón.
    A este botón hay que darle la clase "view-more-button", sin las comillas, pero puede personalizarse a gusto.
    (ver imagen abajo donde mostramos una disposición del Panel de Estructura para mejor comprensión).
Selector-Detector-oxygenados
  1. En la sección de JavaScript del Code Block añadimos el siguiente código:
document.addEventListener("DOMContentLoaded", function() {
	if(window.angular) return;

	var infScroll = new InfiniteScroll( '.oxy-dynamic-list', {
		path: '.next.page-numbers',
		append: '.oxy-dynamic-list > .ct-div-block',
		hideNav: '.oxy-repeater-pages-wrap',
		button: '.view-more-button',
		status: '.loading-status',
		scrollThreshold: false, // disable load on scroll 
	});
});

Click para Copiar
Copiado
  1. En la sección de CSS metemos:

.loading-status {
	display: none; 
	text-align: center;

}

.loader-wheel {
  font-size: 64px;
  position: relative;
  height: 1em;
  width: 0.55em;
  padding-left: 0.45em;
  animation: loader-wheel-rotate 0.5s steps(12) infinite;
  overflow: hidden;
}

.loader-wheel i {
  display: block;
  position: absolute;
  height: 0.3em;
  width: 0.1em;
  border-radius: 0.05em;
  background: #333;
  opacity: 0.8;
  transform: rotate(-30deg);
  transform-origin: center 0.5em;
}

@keyframes loader-wheel-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

Click para Copiar
Copiado
  1. Y por último en la sección PHP/HTML:
    Nota:
    Los textos:
    • "Estás al final del contenido" y "Hay algún Error"
    Los puedes sustituir por algo de tu gusto.

    Hay mas opciones de configuración como por ejemplo la animación de carga, la cual se puede ver en Aqui y no está de mas pasarse a leer la licencia.

<script src="https://unpkg.com/infinite-scroll@4/dist/infinite-scroll.pkgd.min.js"></script>
<div class="loading-status">
<div class="loader-wheel infinite-scroll-request">
  <i><i><i><i><i><i><i><i><i><i><i><i>
  </i></i></i></i></i></i></i></i></i></i></i></i>
</div>
  <p class="infinite-scroll-last c-text-s c-text-light">Estás al final del contenido</p>
  <p class="infinite-scroll-error c-text-s c-text-light">Hay algún Error</p>
</div>
Click para Copiar
Copiado
0 0 votos
Puntuación
Suscribir
Notificar de
guest
0 Comentarios
Comentarios en línea
Ver todos los comentarios

OTRAS GUIAS

LISTADO GUIAS
Crear una video galería con Metabox y Oxygen

Un tutorial que muestra como crear una video galería usando Metabox y Oxygen.
Traducción al español del original de la página oficial de Metabox

Leer más
Addblock Detector

Como añadir un detector de bloqueo de publicidad a tu página construida en Oxygen, muy configurable y con unos sencillos pasos.

Leer más
Scroll en una captura de pantalla

Vemos las tras formas de construir este curioso efecto de scroll al poner el puntero encima. Veremos el Composite Element, con div usando las herramientas de Oxygen y solo con CSS.

Leer más