Tras las comida con el $Hyperboss me ha comentado que reunión a las 7… así que forzado a salir más tarde hoy voy a alargar la pausa de la comida para dedicaros una entradilla corta, hablando de un interesante plugin de jQuery llamado jPage, que permitirá paginar listas desdde el lado del cliente. Creado por Luís Almeida os lo podéis descargar desde su página en gitHub donde encontraréis también referencias a los útiles (y perfectamente complementarios) plugins Lazy Load, para aligerar la carga de imágenes, y animate.css con varias vistosas animaciones.

Os copio el código de ejemplo de como iría la cosa con la versión «default» del plugin:

El html sería:

<!-- navigation holder -->
<div class="holder">
</div>

<!-- item container -->
<ul id="itemContainer">
    <li><img src="img/img (1).jpg" alt="image"></li>
    <li><img src="img/img (2).jpg" alt="image"></li>
    <li><img src="img/img (3).jpg" alt="image"></li>
     ...<!--aquí metéis las imágenes que hagan falta-->
</ul>

<!-- navigation holder -->
<div class="holder">
</div>

El javascript es apena intrusivo y muy cortito:

/* when document is ready */
  $(function() {
    /* initiate plugin */
    $("div.holder").jPages({
        containerID: "itemContainer"
    });
});

Y para finalizas el CSS sería este:

 .holder {
    margin:15px 0;
}
.holder a {
    font-size:12px;
    cursor:pointer;
    margin:0 5px;
    color:#333;
}
.holder a:hover {
    background-color:#222;
    color:#fff;
}
.holder a.jp-previous {
    margin-right:15px;
}
.holder a.jp-next {
    margin-left:15px;
}
.holder a.jp-current,a.jp-current:hover {
    color:#FF4242;
    font-weight:bold;
}
.holder a.jp-disabled,a.jp-disabled:hover {
    color:#bbb;
}
.holder a.jp-current,a.jp-current:hover,.holder a.jp-disabled,a.jp-disabled:hover {
    cursor:default;
    background:none;
}
.holder span {
    margin: 0 5px;
}

Podéis ver el resultado, junto al código original en este enlace. Además, podréis ver muchas más interesantes opciones para personalizarlo e implementarlo en vuestra página.

A mi me ha ahorrado un rato largo de trabajo esta mañana. Disfrutadlo.