Question

I’m trying to create a website which works like this. Screenshot

The website show’s only a part of a big image and you can move the picture when you move your mouse over the image ( Mouse to the left -> picture moves to the right)

What is the best way to do it? I also might want to switch between a couple of pictures.

Answer 1

Based on your response, you said that This Link

provided the exact functionality that you wanted. Based on that site, this is the code they use to maintain this.

// enable the zoominess
  if( image.originalWidth > wrapperWidth ){
    $(settings.activeImageId).width(wrapperWidth).height(wrapperHeight).hover(function(){
      // zoom in
      $(this).addClass('zoomed').width(image.originalWidth).height(image.originalHeight);
      $activeWrapper.mousemove( function(e){
        var localX = ~~(((e.pageX - $activeWrapper.offset().left)/wrapperWidth) * 100);
        var localY = ~~(((e.pageY - $activeWrapper.offset().top)/wrapperHeight) * 100);
        if( localY > 100 ){ localY = 100; }
        var fromLeft = (image.originalWidth - wrapperWidth) * localX/100;
        var fromTop = (image.originalHeight - wrapperHeight) * localY/100;
        //console.log( fromLeft,' :: ', fromTop);
        $(settings.activeImageId).css('left', -fromLeft+'px').css('top', -fromTop+'px');
      });
    },
    function(){
      // zoom out
      $(this).removeClass('zoomed').width(wrapperWidth).height(wrapperHeight);
      $activeWrapper.unbind('mousemove');
    });
  }
} 

And they use:

#active-wrapper .zoomed {
  left: 0;
  position: absolute;
  top: 0;
}

To control the position of the element.