Infinite Scroll es una técnica de desarrollo web que nos permite cargar los siguientes posts de nuestro blog con Ajax sin tener que volver a cargar la web haciendo clic en “Entradas anteriores”. Como se puede ver, es bastante práctico para el usuario ya que si quiere ver más posts simplemente tiene que hacer scroll hacia abajo y esperar a que se carguen. 

En el repositorio de plugins de WordPress encontramos el plugin Infinite Scroll que nos permitirá activar esta técnica en nuestro blog solo configurando los selectores de CSS que contienen los botones de navegación y el selector que contiene el listado de post. Este plugin tiene una pequeña base de datos para los temas por defecto de WordPress para que, si tienes uno instalado, no tengas que configurar qué selectores se usan.

Si nuestras entradas contienen sliders y los mostramos en los listados veremos como los que se carguen con Infinite Scroll no se inicializarán aunque pongamos el javascript de inicialización bajo el slider. Uno de los motivos es porque el plugin se come las tags <script> que se encuentre por el camino. Así que para ello hay que usar el callback que el plugin lleva, inicializando los nuevos sliders que se vayan cargando.

El plugin de Infinite Scroll lleva un callback que nos permitirá añadir código javascript que se ejecutará cada vez que se carguen nuevos posts. Será en este callback donde pondremos nuestro código para inicializar los sliders FlexSlider que se vayan cargando. Pero primero hay que preparar el HTML del slider para obtener en el código javascript los parámetros del slider.

Preparar el HTML para pasar parámetros al callback

Para preparar los sliders para que puedan ser activados cuando se cargan por ajax tendremos que poner como atributos HTML los parámetros del slider para poder inicializarlo como toca. La solución que propongo no es universal ya que cada uno configura sus sliders de una manera u otra, pero puede servir de aproximación para solventar este problema.

El código para un slider básico sería el siguiente:

<div class="flexslider">
  <ul class="slides">
    <li>
      <img src="slide1.jpg" />
    </li>
    <li>
      <img src="slide2.jpg" />
    </li>
    <li>
      <img src="slide3.jpg" />
    </li>
    <li>
      <img src="slide4.jpg" />
    </li>
  </ul>
</div>

<script>
jQuery(window).load(function() {
  jQuery('.flexslider').flexslider({
    animation: "slide"
  });
});
</script>

Como veis ya lleva el código javascript que inicializará el slider si se carga sin ajax. Para prepararlo para infinite scroll, simplemente le añadiremos unos parámetros al <div> que lo contiene:

<div class="flexslider" slider-started="0" slider-type="basico" slider-animation="slide">
  <ul class="slides">
    <li>
      <img src="slide1.jpg" />
    </li>
    <li>
      <img src="slide2.jpg" />
    </li>
    <li>
      <img src="slide3.jpg" />
    </li>
    <li>
      <img src="slide4.jpg" />
    </li>
  </ul>
</div>
 
<script>
jQuery(window).load(function() {
  jQuery('.flexslider').flexslider({
    animation: "slide"
  });
});
</script>

Se han añadido tres parámetros:

• slider-started: nos sirve para controlar si el slider se ha incializado o no
• slider-type: tipo de slider
• slider-animation: tipo de animación del slider

Código javascript para el callback de Infinite Scroll

Una vez  que tenemos preparado el HTML para poder pasar los parámetros del slider, abrimos nuestro functions.php del tema y añadimos la siguiente función junto con la llamada al filtro que se indica más abajo:

<?php

function add_intinite_scroll_callback( $options ) { 

  $options['callback'] .= '
    jQuery(this).find(".flexslider").each(function(index) {
    if ( jQuery(this).attr( "slider-loaded" ) === "0" ) {
      if ( jQuery(this).attr( "slider-type" ) === "basico" ) {
        var animation = jQuery(this).attr( "slider-animation" );
        jQuery(this).flexslider({
          animation: "+animation+"
        });
        
        jQuery(this).attr( "slider-loaded", "1" );
      }    
    }
  });
  ';

  return $options; 

}
add_filter( 'infinite_scroll_js_options', 'add_intinite_scroll_callback' );

?>

Básicamente lo que hace el código anterior es, a parte de ejecutarse después de que el plugin de Infinite Scroll cargue posts, es buscar cada slider que no se haya inicializado e inicializarlo. Según los parámetros que tengamos, pondremos ciertas opciones en la función de flexslider() según el slider que estemos cargando. A partir de este ejemplo básico se puede extender para tratar con sliders más complicados y con más opciones.

Seguro que esta no es la única solución así que si las hay, no dudéis en compartirlas 🙂