Scrolling Large Image Inside A Div

I have an large image inside a small div. Inside that div there are 4 arrows to control the movement, right, bottom, left and top. The arrows are used to move the image inside that

Solution 1:

You have to consider that, at the beginning, your image is left:0px and top:0px. So you already have your left and top limite.

$('.slide-left').click(function () {
    if ($('.inner img').position().left + 50 < 0) {
        $('.inner img').animate({
            "left": "+=50px"
        }, "slow");
    } 
});

$('.slide-top').click(function () {
    if ($('.inner img').position().top + 50 < 0) {
        $('.inner img').animate({
            "top": "+=50px"
        }, "slow");
    } 
});

Then, you can get the right and bottom limite. This is your image size.

var limiteRight = 0 - $('.inner img').width() + $('.image-box').width();
var limiteBottom = 0 - $('.inner img').height() + $('.image-box').height();


$('.slide-right').click(function () {
    if ($('.inner img').position().left - 50 > limiteRight) {
        $('.inner img').animate({
            "left": "-=50px"
        }, "slow");
    }
});

$('.slide-bottom').click(function () {
    if ($('.inner img').position().top - 50 > limiteBottom) {
        $('.inner img').animate({
            "top": "-=50px"
        }, "slow");
    }
});

And you finnaly have to check if your desired new position is within this container. If not, just go to the limite.

$('.slide-right').click(function () {
    if ($('.inner img').position().left - 50 > limiteRight) {
        $('.inner img').animate({
            "left": "-=50px"
        }, "slow");
    } else {
        $('.inner img').animate({
            "left": limiteRight
        }, "slow");
    }
});

FIDDLE with full exemple.

Solution 2:

The basic approach would be to compare the image position with the containing div position:

var inner = $(".inner").first();
    var divTop = inner.offset().top;
    var divLeft = inner.offset().left;
    var divRight = divLeft + inner.width();
    var divBottom = divTop + inner.height();

    functiongetImagePosition() {
        var image = $("#image");
        var imageTop = image.offset().top;
        var imageLeft = image.offset().left;

        return {
            top: imageTop,
            left: imageLeft,
            right: imageLeft + image.width(),
            bottom: imageTop + image.height()
        }
    }

    functionscrollTop() {
        var imagePosition = getImagePosition();

        var nextImageTop = imagePosition.top + 50;
        if (nextImageTop <= divTop) {
            $('.slide-top').off("click");

            $('.inner img').animate({
                "top": "+=50px"
            }, "slow", function () {
                $('.slide-top').click(scrollTop);
            });
        }
    }

    $('.slide-top').click(scrollTop);

You should also unbind the arrow scrolling events while the animation happens, otherwise if the user clicks multiple times while the animation is happening, it can still scroll the image outside of the div constraints.

See this fiddle (I only implemented the rebinding for top):

http://jsfiddle.net/lhoeppner/puLDd/

Solution 3:

Another suggestion, using jQuery UI draggable.

http://jqueryui.com/draggable/

http://jsfiddle.net/kimgysen/3twxS/1/

$("#inner").draggable({
    containment: $('#content')
});

Solution 4:

Don't change all 4 toprightbottomleft, as you'll end up with stuff like right:1000px; left:1000px; etc... and it'll probably break the thing.

Focus on using just 2 of them instead, i'd recommend just using top and left

So to go right, you'd do left += 50px to go left you'd do left -= 50px

A simple way to resolve this solution would be to simply manually plot the contraints like this:

$('.slide-right').click(function() {      
    if (parseInt($('.inner img').css('left')) >= -700) {
        $('.inner img').finish().animate({ "left": "-=50px" }, "slow" );
    }
});

$('.slide-bottom').click(function() {
    if (parseInt($('.inner img').css('top')) >= -249) {
        $('.inner img').finish().animate({ "top": "-=50px" }, "slow" );
    }
});

$('.slide-left').click(function() {
    if (parseInt($('.inner img').css('left')) < -49) {
        $('.inner img').finish().animate({ "left": "+=50px" }, "slow" );
    }
});

$('.slide-top').click(function() {
    if (parseInt($('.inner img').css('top')) < -49) {
        $('.inner img').finish().animate({ "top": "+=50px" }, "slow" );
    }
});

http://jsfiddle.net/C26rV/4/

But ideally you could do something better which would determine the dimensions of the image itself allowing it to work with any image size automatically.

Edit:

Just as a side note (It doesn't have constraints) you can use considerably less jQuery by handling sliding like this:

$('.slide').click(function () {
    var sliding = {}
    sliding[$(this).data('direction')] = $(this).data('movement');
    $('.inner img').animate(sliding,"slow");
});

http://jsfiddle.net/C26rV/2/