SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2005
    Location
    London, UK
    Posts
    81
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Draggable iframes like Google Maps

    I have some big images, sometimes 1Mb. Viewing them inline ruins everything else on the screen because of the huge resolution of the image. Resizing the image down to 400x400ish obviously makes the details in the image unreadable.

    What I want is a draggable iframe (if that's the solution at all) that works similar to how Google Maps work where you can pan in any direction an image inside a fixed sized area. How can I achieve this?

    I looked at Zoomify (flash and gsv.js) but they are overkill since one needs to split up the image into tiles. I'd rather do my own image resizing with ajax but that's a completely different and unrelated story.

  2. #2
    SitePoint Guru CompiledMonkey's Avatar
    Join Date
    Sep 2002
    Location
    Richmond, VA
    Posts
    975
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could put the image in a div of the size you want and set the overflow CSS attribute to hidden. You'd then need to write some JavaScript that would move the image as it is clicked and dragged around in the div.

    To get extra fancy you could determine the edges of the image (width and height) and make sure it stops panning once you've gotten to the edge of the image.


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
  •