Autonomía digital y tecnológica

Código e ideas para una internet distribuida

Galería mínima para imágenes, vídeos o textos, en jQuery

Imago voragine.net

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&aacute;gina anterior">&laquo;</span><span class="flus-flecha" id="flus-next" title="P&aacute;gina siguiente">&raquo;</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');
                }
        });
});

Dejar un comentario

No hay comentarios en esta entrada.
*
*

 

No hay trackbacks