Como funciona un visor de fotos?

[sonickseven]

Hola que tal chicos pues bueno tengo una duda y es que necesito saber como un visor de fotos hace para pasar las fotos entre si. Ejemplo que yo le doy next y pasa la proxima y si le doy anterior pues se devuelve.

yo lo hago de la siguiente:

Código Javascript:

var i=0;
            $(document).keydown(function(e){
                if(e.which===39){  //click adelante
                    i+=1;
                    if(i>1){ /// verifico que no haya dado antes click
                        recarga(pruevita, ancho, alto, b, 1);
                    }else{
                        recarga(Media, ancho, alto, b, 1);
                    }
                }else if(e.which===37){//click atras
                    i+=1;
                    if(i>1){  //
                        recarga(pruevita, ancho, alto, b, 2);
                    }else{
                        recarga(Media, ancho, alto, b, 2);
                    }
                }
            });
 

en el codigo anterior verifico que de click con las teclas adelante o atras y pruebita es una variable global pero solo es llamada si se ha dado mas de un click

Código Javascript:

function recarga(variable, ancho, alto, b, option){ //dependiendo del option se dice si es pa adelante o para atras
    if(option===1){
        var $src=$('#'+variable).next();// se le asigna un dato que eria la siguiente o la anterior etiqueta
    }else{
        var $src=$('#'+variable).prev();// se le asigna un dato que eria la siguiente o la anterior etiqueta
    }
    var size3=size($src.data('alto'), $src.data('ancho'), ancho, alto);
    $('.FinalImage').css({'background-image':'url('+$src.attr('src').replace(/T_/gi, '')+')','height':'75px','top':((alto-size3[1])/2)+'px', 'margin-left':(size3[2]-size3[0])/2}).animate({'width':size3[0], 'padding-top':(size3[1]-80)},200); //esto es solo para atributos de mas nada importante
    $('.FinalImage > span:first-child').css({'top':(size3[1]-50)/2}); //esto es solo para atributos de mas nada importante
    $('.FinalImage > span:nth-last-child(2)').css({'top':(size3[1]-50)/2}); //esto es solo para atributos de mas nada importante
    $('.FinalImage > section').load('../onlyPhp/PhotoVideoMedia.php .FinalImage > section',{Book:b, Entertain: $src.attr('id')});
    $('.responces_2').load('../onlyPhp/PhotoVideoMedia.php #responces_3', {Entertain: $src.attr('id')});  //tengo que hacerlo asi por que la necesidad me hizo y no hace tan pesada la pagina
    pruevita=$src.attr('id'); // AQUI SE DEFINE PRUEVITA
}
 

la funcion size() es algo que cree que da las dimenciones animadas al div

ahora bn el problema es que aveces se me adelante no al siguiente div sino al segundo despues del que debia ser elegido.
Si alguien sabe como solucionar y me explique como se puede pasar entre etiquetas sin errores como los que padezco le agradeceria :D

gracias chicos y si no entienden algo pregunten por que para mi es importante tener esto solucionado