Esta es una pequeña galería de imágenes ideal para mostrar por ejemplo varias fotos de un producto en una tienda virtual, pero con una pequeña animación para hacerlo más atractivo.

La implementación es muy sencilla como pueden ver:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="gallery">
    <div id="gallery_nav">
        <a rel="img1" href="javascript:;"><img src="iphone_1.png" /></a>
        <a rel="img2" href="javascript:;"><img src="iphone_2.png" /></a>
        <a rel="img3" href="javascript:;"><img src="iphone_3.png" /></a>
        <a rel="img4" href="javascript:;"><img src="iphone_4.png" /></a>
    </div>
 
    <div id="gallery_output">
        <img id="img1" src="iphone_1b.jpg" />
        <img id="img2" src="iphone_2b.jpg" />
        <img id="img3" src="iphone_3b.jpg" />
        <img id="img4" src="iphone_4b.jpg" />
    </div>
 
    <div class="clear"></div>
</div>

Y el javascript para hacerla funcionar:

1
2
3
4
5
6
7
8
9
10
$(document).ready(function() {
    $("#gallery_output img").not(":first").hide();
 
    $("#gallery a").click(function() {
        if ( $("#" + this.rel).is(":hidden") ) {
            $("#gallery_output img").slideUp();
            $("#" + this.rel).slideDown();
        }
    });
});

Puedes descargar el código fuente AQUI y ver una demo AQUI