Javascript - Google Map Like Image Scrolling

I want to build an image scroller that works like google map. When the website first loads, there will be a viewing box in the middle of the page that contains part of an image.

Solution 1:

I don't think this does everything you're looking for, but might be a good place to start: SpryMap

Solution 2:

Take a look at the Overscroll jQuery plugin.

Solution 3:

I've used OpenLayers for projects similar to this and it works great! Not based on jQuery though.

It provides free maps but you can have your own images as well.

Solution 4:

Just for some design ideas to take into account when writing/finding your solution:

There are two ways of doing this, one with multiple chopped up images that preload when the user scrolls near them, and the other which is simpler and loads one big image.

If your image(s) are very big, you should opt for a solution that preloads segments as this will be a lot more user friendly if you can do it seamlessly.

The big image will slow down some computers/mobile devices significantly!

Solution 5:

If you built something yourself, it probably couldn't be pure jQuery. You'd want to write a server script that either processes your big images into segments that you cache, or serves segments on the fly. That's the point at which you could start using jQuery to control what gets loaded ans when.