Buenas a todos:

Estoy trabajando en un visor de imágenes realizado con jQuery y tiene una div que contiene las miniaturas de las imágenes a mostrar. Es algo complicado de explicar... a ver, tenemos una div principal (div#1 de aquí en adelante) con overflow:hidden;. Dentro de ésta tenemos otra mas ancha (div#2 de aquí en adelante) que contiene a su vez otras divs (mins de aquí en adelante) donde se encuentran las miniaturas. Bien, la idea es que div#2 se desplace dentro de div#1 sin que se vean el resto de mins ocultas. Os pongo un esquema para que lo veáis más claro:

Vale, creo que está más o menos claro. El problema lo tengo a la hora de desplazar div#2, que tiene position:absolute; y un valor determinado en right. Estoy utilizando éste código JavaScript:

var pos_ini;
 var next;
 var prev;
 pos = $("#mins_mov").position();
 pos_ini = pos.left;
 next = pos_ini-330;
 prev = pos_ini-423;

 $("#bnt1").click( function() {
     $("#div2").animate({right:next}, 'easein');
     pos = $("#div2").position();
     pos_ini = pos.left;
     next += 93;
 });

 $("#btn2").click( function() {
     $("#div2").animate({right:prev}, 'easein');
     pos = $("#div2").position();
     pos_ini = pos.left;
     prev -= 93;
 });

Y este el CSS+HTML:

/* CSS */
 #div1 {
    width:62px;
    height:423px;
    padding-right:29px;
    padding-top:25px;
    background:url("img/tr5_bg.png");    
    overflow:hidden;    
    position:absolute;    
    z-index:99;    
    top:-30px;    
    right:0px;
}

#div2 {        
    width:500px;    
    height:423px;    
    padding-left:3px;    
    padding-right:17px;    
    padding-top:25px;    
    margin-top:30px;    
    background:url("img/tr5_bg.png");    
    overflow:hidden;    
    position:absolute;    
    z-index:99;    
    top:-30px;    
    right:-426px;    
 }

.mins {
    width:71px;    
    height:423px;    
    padding-right:20px;        
    padding-top:25px;    
    background:url("img/tr5_bg.png");    
    overflow:hidden;    
    float:left;
}

/* HTML */
<div id="div1">
          
    <div class="div2">

                                                         
        <div class="mins_block"></div>
        <div class="mins_block"></div>
        <div class="mins_block"></div>


    </div> 
    
</div>

<div id="btn1> << </div> 
<div id="btn2> >> </div>

La idea es que con cada clic se desplace la misma cantidad bien hacia la izquierda o bien hacia la derecha, y ahí precisamente es donde me surge el problema, ya que no logro controlar estas acciones...

Please, cualquier aporte es bienvenido!!

Gracias y un saludo!

$(function(){
var pos_ini;
 var next;
 var prev;
 pos = $("#mins_mov").position();
 pos_ini = pos.left;
 next = pos_ini-330;
 prev = pos_ini-423;

 $("#bnt1").click( function() {
     $("#div2").animate({right:next}, 'easein');
     pos = $("#div2").position();
     pos_ini = pos.left;
     next += 93;
 });

  $("#btn2").click( function() {
     $("#div2").animate({right:prev}, 'easein');
     pos = $("#div2").position();
     pos_ini = pos.left;
     prev -= 93;
 });
 });

Si esto no funciona tendria que ver mas cuidadosamente tu codigo, recuerda que todo script con jquery debe empezar con:

$(function(){

y terminar con:

});

para que el script se ejecute cuando el DOM este listo para ser manipulado.

Podrias poner la web donde estas intentando hacer correr el script?

Es este, aunque lo he subido para que lo vieras porque sigo trabajando en el...

https://vandalz.webcindario.com/zona.html

Lo he medio conseguido, pero lo que pasa es que cuando esta en la 1ª, va en la dirección donde no hay nada y habría que ponerle un "tope"...