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"> </div><!-- end .part --> <div class="part"> </div><!-- end .part --> <div class="part"> </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'); } });}); |