loading, scrolling , zoom in and zoom out the images like google map

Question

I am working on a web application. i just wanna know the way to do it. its just like a map application, but not the map.

i need to display 100 images on the webpage inside a div from mysql database. each image would display on a specific predefine tile. i wants the following functionalists.

1. loading of the images(not the all image)
2. zoom in and zoom out. update the images like a map.
3. scrolling. update the images like a map.

a. my div can only displays 25 images. i wants to load only 25 images in that area. remaining images should load on scroll or zoom in and out.

b. if user clicks on "zoom in" then it should load and shows the next layer of big images like in google map and if i click on zoom out then it shows the previous layer of small images.

can anyone give me the idea how to build this application. I have checked OpenLayers, geo server and ajax-zoom already. i dont wants to go for geo-server as its not the mapping application. but i need the same functionality of map. shall i use jquery plugins to do this.

Please help

Regards, Asif Hameed

Answer 1

A little out of order, but here's some advice:

---

2. Zooming in and out can be easily achieved with CSS's zoom property. The hard part is zooming in at a particular position.

To do this, you can put the resizable divider element inside another element. The containing element will have an overflow of none , and remain the same size. That way, you can get accurate coordinates based off the finger's position (assuming you expect touch devices to use this) and the location inside the div.

If you're just zooming in on a desktop, set the origin variables to the center of the screen.

As far as changing the image, you could simply load a new image once the set CSS property is great/small enough. I would advise just loading a bigger image once if possible however; less http requests, and less loading times.

---

1. You could load images once the distance between the current coordinates passed a certain threshold, factoring in the zoom amount.

---

3. By scrolling, do you mean panning around or zoom in?

There are several ways to achieve a scrolling zoom affect. One way is to put an invisible element over everything that has a specified inner height, necessitating a scrollbar. When the user scrolls in this element, the event can cause the same events that zooming normally would have, after comparing the scrollHeight-clientHeight and scrollTop properties.

For panning, it's a simple matter of changing the image wrapper's left and top properties.

---

I hope all of that helped.