El siguiente script de jQuery añade una galería mínima, muy sencilla, que permite paginar contenido e ir accediendo a él mediante unas flechas de anterior y siguiente, con transición fadeIn-fadeOut.
El DOM debe ser algo como lo que sigue:
<div id="flus"> <div class="part"> <img src="http://url.de/la-imagen.png" alt="Descripción de la imagen" /> </div><!-- end .part --> <div class="part"> <img src="http://url.de/la-imagen.png" alt="Descripción de la imagen" /> </div><!-- end .part --> <div class="part"> <img src="http://url.de/la-imagen.png" alt="Descripción de la imagen" /> </div><!-- end .part --> </div><!-- end #flus -->
Ahora el script:
// minimum jQuery gallery
$(document).ready(function(){
$('#flus div.part').hide();
$('#flus div.part:first').show().addClass('visto');
var $curr = $('.visto');
$('#flus').append('<div class="flus-flechas"><span class="flus-flecha" id="flus-prev" title="Página anterior">«</span><span class="flus-flecha" id="flus-next" title="Página siguiente">»</span></div>');
$('#flus-prev').click(function(){
if ( $('#flus div.part:first').hasClass('visto') ) {
} else {
$curr = $curr.prev();
$('.visto').fadeOut('100').removeClass('visto');
$curr.fadeIn('600').addClass('visto');
}
});
$('#flus-next').click(function(){
if ( $('#flus div.part:last').hasClass('visto') ) {
} else {
$curr = $curr.next();
$('.visto').fadeOut('100').removeClass('visto');
$curr.fadeIn('600').addClass('visto');
}
});
});