Google maps style scrolling anyone?

Question

I am looking for some javascript plugin (preferably jquery) to be able to scroll through an image, in the same way that google maps works.

I can make the image draggable but then i see the whole image while dragging even if the parent div is overflow:hidden.

Any help would be greatly appreciated!

Answer 1

You could use the google maps api...they allow for you to use it with custom images. And you can choose if the controls show up or not.

EDIT: Found a decent tutorial on how to do this. http://mapki.com/wiki/Add_Your_Own_Custom_Map

Answer 2

Check out the Google Maps Image Cutter It can take any image or digital photo and cut it into tiles which are displayed on a Google Map. Might be a quick way to do what you need...

Answer 3

This has less to do with javascript and more to do with the CSS coding.

Try a few experiments with just HTML and CSS to get the image to clip properly, then add the javascript to move it around.

If you can't get it to clip with HTML, or move with the javascript post the simplest demonstration of the problem here for us to debug.

Without the code we're shooting in the dark.

Answer 4

For a good description of the underlying technology have a look at Chapter 4 (iirc) of the Pragmatic Programmers' book Pragmatic Ajax.

You'll see how the image slicing and dicing orks under the covers. And the zooming.

HTH.

cheers,

Rob

Answer 5

Google Maps uses images sliced into blocks which are dynamically loaded as the user pans in different directions. The Google Maps Image Cutter Paul Dixon mentions is the tool you want for this.

If you just want to pan one large image, rather than have the additional complexity of slicing the image up into blocks, then instead of using the CSS overflow property, you should use the clip property. This is supported on all browsers worth thinking about, down to IE4 if I remember correctly.

One point to note: the CSS2.1 spec shows examples with the rect values separated by commas. However this isn't supported by IE6 (perhaps not IE7, either). However all other browsers understand the version without commas. So instead of

clip: rect(5px, 40px, 45px, 5px);

you should use

clip: rect(5px 40px 45px 5px);

for compatibility.

You need a container <div> set to position:relative around the <img> element, which you then set to position: absolute.

So the basic technique is to update the top and left values as the user drags, use these together with the defined width and height of the view onto the image to create the appropriate rect() string, and update the top, left, and clip properties of the <img> element's style property.

Don't do what I did and leave out the "px" after the values in the rect() string. It took me ages to realise why it wasn't working :-)

Answer 6

I may be a little late to the party, but I was just looking for the same thing. What I stumbled upon is scrollview for jquery, it works perfect and does exactly this google maps-like drag-to-scroll for overflowed divs.

Answer 7

(I'm super late to this now dead party, but hey, I found this page via a search so...)

Scrollview plugin suggested by mooware didn't work for me.

However Dragscrollable did: http://plugins.jquery.com/project/Dragscrollable

(There's a demo page at the link called "try out demonstration". Stack Overflow won't let me post another link here.)