SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2010
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    draggable background image

    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. #2
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    looks like its an implementation of some kind of jquery script, try searching on plugins.jquery.com

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2010
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code:
    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
    Code:
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •