Draggable background image

JavaScript
1

I am trying to replicate this functionality on my website - IRRLAND.

I am really not having any luck and not sure where to go. so far I have got the jquery ui draggable working on the background.

I have no idea how i would go about allowing the user to drag the image to the right and get to x point and if the image is finished snap back to the edge of the image on the right with some kind of easing. I guess looking at the example will be the best explanation of what i would like to create.

help would be very much appreciated

thanks in advance

2

looks like its an implementation of some kind of jquery script, try searching on plugins.jquery.com

3

I have recreated it myself but am having a problem with the bottom edge. i have the top left and right edges working okay. but i dont know why my math isnt right for the bottom. could someone please have a look why.

this is how i am doing the top left and right side:


var window_width = $(window).width();
    var window_height = $(document).height();
    var image_height = $("#background").height();
    var image_width = $("#background").width();

var animate_to = {};
            var window_width_resized = $(window).width();

            if (ui.position.left > 0) {
                animate_to.left = '0px';
            }
            if (ui.position.top > 0) {
                animate_to.top = '0px';
            }

            //initial size for width
            var image_width_gap = window_width - (image_width + ui.position.left);
            if (image_width_gap > 0) {
                animate_to.left = (0 - (image_width - window_width)) + 'px';
            }

            //after window gets resized for width
            var image_width_gap_resized = window_width_resized - (image_width + ui.position.left);
            if (image_width_gap_resized > 0) {
                animate_to.left = (0 - (image_width - window_width_resized)) + 'px';
            }

this is how i am doing the bottom edge

var image_height_gap = window_height - (image_height + ui.position.top);
            if (image_height_gap > 0) {
//                animate_to.top = (0 - (image_height - window_height)) + 'px';
            }

if someone could please advise me where i am going wrong it would be great help