Displaying high resolution image

Question

I have a really high resolution images (e.g. this one) that needs to be viewed.

I would like to either fit it into the browser screen or have user scroll around the picture (without changing the image).

What are some good ways to do such things? I'm guessing that there is a way to do this with CSS (using width/height) or Javascript. I'm just wondering what are some other solutions or best solutions using CSS/Javascript.

Another good way of doing this can be have some type of control that allows users to zoom in/out and move around the high res picture. Should I just use GoogleMaps API for this?

Answer 1

I haven't tried this, but here is an example: http://www.visual-blast.com/javascript/panoramic-photoviewer-in-javascript/ Also, just google open source photo management for some examples and ideas. Another option is to use flash. It is trivial do do this with an embedded flash module. There are probably some open source flash photoviewers too, if you need ideas.

Answer 2

for fitting into the browser window, you can use this:

 var yourImage = document.getElementById('imageid');   
 yourImage.style.width = window.innerWidth+"px";

or loop through all images

var yourImages = document.getElementsByTagName('img');
for(var i = 0; i < yourImages.length;i++){    
     yourImages[i].style.width = window.innerWidth+"px";   
}

Answer 3

The best way is to use the free Google Maps API. Use one of the many tile cutters to chop up your image and then show your high resolution photo like a Google map - people can zoom in, out and pan around. Cutting your image up like this makes it harder to steal too!

Read this blog post for more info