Scroll infinito con jQuery IAS

Hoy veremos como hacer una paginación con scroll infinito con jQuery IAS.

Lo primero que debemos hacer es tener una paginación clásica con links y la lógica en el backend para que eso funcione.

Después usaremos el plugin jQuery IAS para hacer la paginación con scroll infinito. Lo descargamos y lo incluimos en el head de nuestro html.

Ejemplo:

<script type="text/javascript">
  $(document).ready(function() {
    var ias=jQuery.ias({
      container : '#timeline', // Contenedor principal donde se añadirán los elementos
      item: '.publicaciones', // elemento simple
      pagination: '.paginationControl', // control de paginación
      next: '.paginationControl .siguiente', // selector de siguiente página
      loader: '<div class="pub"><img src="/public/img/ajax-loader.gif"/></div>', // imagen de carga
      triggerPageThreshold: 5 // Cargar automáticamente 5 veces antes de mostrar el botón de ver más
    });

    // Link para cargar la siguiente página
    ias.extension(new IASTriggerExtension({
        text: 'Ver más', 
        offset:3
    }));

    // Añadir imagen de carga
    ias.extension(new IASSpinnerExtension({
        src: '/public/img/ajax-loader.gif', 
    }));

    // Añadir texto cuando no se encuentran más resultados
    ias.extension(new IASNoneLeftExtension({
        text: 'No hay más resultados',
    }));
  });
</script>

Victor

Autor: Victor

Desarrollador web - Formador online - Blogger

Compartir este post

Poner un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *