next prev last y first en galeria de fotos

[arros]

buenas a todos, tengo que crear una pequeña galeria de fotos una imagen tamaño grande y miniaturas donde al click en miniatura se muestra en sitio de la grande y en la miniatura se debe limitar a uun numero de fotos ej 4 miniaturas y un buton para la proxima anterior.
ya se que es un poco pesado...
aqui os dejo mi script:

Código Javascript:

$(document).ready(function(){
        $('#foto').ready(function(){
        $('.thumb').click(function(){
            var imagen = $(this).attr('src');
            var lastimg = $('#fullimage:last');
            $(lastimg).hide('slow');
            
            $('#fullimage').show('<img src="'+ imagen +'" alt="" />');
        })
        })
    })
 

los nombres de las imagenes los arastro de basededatos. gracias por la aatencion

[America|UNK]

Código CSS:

<style>
.thumb {width:80px;height:80px; cursor:pointer;}
#fullimage {width:400px;height:400px}
#pager span {cursor:pointer; background:#999; margin:3px}
</style>
 

Código HTML:

<div id="pager"><span class="first">First</span><span class="prev">Prev</span><span class="next">Next</span><span class="last">Last</span></div>
<div id="thumbs">
    <img class="thumb" src="http://t0.gstatic.com/images?q=tbn:ANd9GcSAOQFybyZ06PX9rp1LLMuvpKn4wNYq2Xr64OL8ks56CE8S4ZnK5JrFqLA">
    <img class="thumb" src="http://t0.gstatic.com/images?q=tbn:ANd9GcSoqw6sSp8Hidf1HM0nza4ORFIrW2CLb79Huu00ZRDMddhzupzBzA">
    <img class="thumb" src="http://t3.gstatic.com/images?q=tbn:ANd9GcQPpva622B-VqRrz5UY2J_V7Ot7MJORCPgnVdfC9i2IMIj-M1SnB0Cz52G_">
    <img class="thumb" src="http://t1.gstatic.com/images?q=tbn:ANd9GcREvrh6GwrCMzZubDUzmHRifhyu2uIArznljvQGJdsFywrs2xP7cn24UNY_">
    <img class="thumb" src="http://t3.gstatic.com/images?q=tbn:ANd9GcS5hQO29sQXRXj-GyU7d_sGb1P9koIu8FGcaEBCQE9h4PoJ22zcwqKn9eA">
</div>
 
<div>
    <img src="http://t0.gstatic.com/images?q=tbn:ANd9GcSAOQFybyZ06PX9rp1LLMuvpKn4wNYq2Xr64OL8ks56CE8S4ZnK5JrFqLA" id="fullimage" />
</div>
 

Código Javascript:

var limite = 4, pagejump =  4, page = 0;
    $(document).ready(function(){
        var thumb = $(".thumb");
        $('.thumb:gt('+(limite-1)+')').hide();
        thumb.click(function(){ //cambiar imagen grande por el src del thumb seleccionado
            var imagen = $(this).attr('src')
            $('#fullimage').fadeOut('fast',function(){  //ocultar img anterior
                $(this).attr('src',imagen).fadeIn('fast') //mostrar nueva img
            })
        })
        $("#pager span").click(function(){ //next prev first last
            var e = $(this);
            if(e.hasClass('next')){page++}else if(e.hasClass('prev')){page--}
            if(page<0||e.hasClass('first')){page=0}
            if(page==Math.ceil(thumb.length/pagejump)|| e.hasClass('last')) {page = Math.ceil(thumb.length/pagejump) - 1}
                
            thumb.each(function(index){
                if(index >= page*pagejump && index < limite+(page*pagejump)){$(this).show()}else{$(this).hide()} //mostrar pagina
            })
        })
    })