JQuery - Mostrar una parte de una imagen

Mostrar una parte de una imagen

Publicado por jokings80 (12 intervenciones) el 29/08/2013 11:06:17

Hola,

Tengo un div que contiene una imagen. El div tiene la anchura de la imagen, pero la altura es menor. Lo que quiero es que en el div se muestre sólo la parte de la imagen que cabe, es decir, que no se redimensione el div, pero que el usuario pueda elegir qué parte es la que se ve y pueda cambiarla cuando quiera. Es más o menos lo que hace facebook con la foto de portada, donde la imagen se puede mover verticalmente y seleccionar qué parte mostrar.

¿Conocéis algún plugin de JQuery que permita hacer esto? He buscado en mil sitios, pero o ha habido suerte :(

Muchas gracias por la ayuda!!

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 11

Val: 32

Mostrar una parte de una imagen

Publicado por Jose maria (8 intervenciones) el 29/08/2013 22:54:07

Hola jokings80:

Imagino (al abrir el tema en jQuery) que la forma "puro CSS" basada en overflow:auto la conoces. No obstante, te adjunto el código (los estilos van dentro de los tags aunque es mejor abrir la hoja de estilos correspondiente):

<body>

    <div id="cont_fijo" style="position: relative; width:450px; height:350px; overflow:auto;">

      <div id="cont_desp" style="position: absolute; display:inline;  cursor: move;">

	    <img src="../imag/urkiola-mendi-midi.jpg" alt="Imagen parcial" />

	  </div>

	</div>

  </body>

Son importantes los dos divs, en posiciones relative y absolute .
Puedes ver un ejemplo en imagen-overflow (mi página de pruebas)

Con efecto javascript y anulando los desplazamientos, los mejor que he visto es en base a Mootools (con los enlaces previos a mootools-core.js y mootools-more.js sobre la función Drag.Move()

Ahora, el javascript comentado es;

window.addEvent('domready', function(){

	vx=$("cont_fijo").getSize().x; //ancho de la ventana

    vy=$("cont_fijo").getSize().y; //alto de la ventana

    tx=$("img").getScrollSize().x; //ancho de la imagen

    ty=$("img").getScrollSize().y; //alto de la imagen

    posDespX=-(tx-vx); //calculo posicion x del contenedor 2

    posDespY=-(ty-vy); //calculo posición y del contenedor 2

    despX=(tx-vx)*2+vx; //cálculo ancho del contenedor 2

    despY=(ty-vy)*2+vy; //cálculo alto del contenedor 2

    //aplicar estilo (posición y tamaño) a contenedor 2 con las medidas calculadas

    $("cont_desp").setStyles({width:despX,height:despY,left:posDespX,top:posDespY})

    //posicion inicial de la imagen dentro de la ventana

    $("img").setStyles({top:ty-vy,left:tx-vx})

    mapa = new Drag.Move($("img"),{

      container:$("cont_desp")

});

});

El CSS:

#cont_fijo { float: left; width: 40%; height: 350px; border: 1px solid black; position: relative; margin: 20px; overflow: hidden;  }

#cont_desp { position: absolute; cursor: move;  };

#img { position: absolute; }

y el HTML:

<body>

    <div id="cont_fijo">

      <div id="cont_desp">

	    <img id="img" src="../imag/urkiola-mendi-midi.jpg" alt="Imagen parcial" width="1200" />

	  </div>

	</div>

  </body>

Como en el caso anterior, los dos divs son importantes.

La documentación aparece aquí, al final, bajo el título Efecto mapa

En mi ejemplo (práctica) en imagen-drag-move, por alguna extraña razón la primera vez tengo que recargar la página mediante Enter en la barra de direcciones para que después funcione perfectamente

(Si ves la razón de este bug me lo cuentas)

Saludos

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

Mostrar una parte de una imagen

Publicado por jokings80 (12 intervenciones) el 03/09/2013 23:00:30

Muchas gracias!! Es más o menos lo que andaba buscando. Creo que me puede servir para conseguir lo que quería. Voy a ponerme a ello, si veo el bug que dices te comento algo.

Gracias!! ;)

Valora esta respuesta

Comentar