Take the 2-minute tour ×

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!

share|improve this question
add comment

7 Answers

up vote 3 down vote accepted

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.

share|improve this answer
thanks, that is exactly what I needed, have kept note of it for future –  sydlawrence Sep 10 '09 at 10:20
add comment

(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

Try out the demonstration

share|improve this answer
add comment

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...

share|improve this answer
add comment

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

share|improve this answer
although this is the accepted answer, I was hoping for a jQuery answer, and not yet another completly different script to include. –  Moak Aug 20 '09 at 2:16
I know this answer is made 3 years ago. However, I need to mention that Google is going a paid model for Google Maps API; therefore if you are using your own images the worst alternative to use is Google Maps. –  Lashae Apr 3 '12 at 20:56
add comment

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

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

share|improve this answer
orks under the covers! I always thought it was elves inside the monitor that moved the images around when you drag... –  Coxy Jun 23 '10 at 6:45
add comment

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.

share|improve this answer
the html and css does seem to be the problem, when not dragging, the image is clipped in the parent div, but the draggable plug-in (jquery.interface) then makes the whole image viewable again –  sydlawrence Sep 15 '08 at 20:44
add comment

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


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 :-)

share|improve this answer
add comment

protected by Sean Vieira May 1 '13 at 1:14

