Click to See Complete Forum and Search --> : Displaying LARGE Images


zstimpert
11-08-2008, 03:14 PM
Hey, I was wondering what was the best way to go about displaying a large scrollable image. the images i have are around 15,000 px long by 800px wide.

I would like to be able for the user to to see a small portion of the image and be able to scroll down.

I realize that chopping these up would probably be the best way but I need them to stay intact, the images are to be viewed as a whole.

My initial thought was to make a swf in flash.

I was wondering if anyone else had any comments or suggestions.

Thanks.

Eye for Video
11-08-2008, 04:13 PM
By
best way to go about displaying a large scrollable image
are you refering to method of loading and download time on a Web page or simply the design of a display area.
Attempting to load that large image as the rest of the page loads would certainly take some time. If you choose to use Flash, you might want the .swf to display a background or frame for the image but not the image. Load the actual image dynamically. That way the Web page will load first, then if the viewer wants to see the image, "click here or whatever" you could include a brief intro as a preloader (not just a Loading...Loading...) to buy some time for the actual image, or portions of the image to load.
EfV

zstimpert
11-08-2008, 04:35 PM
yeah swf seems to be the way to go here. Thanks for your input man. If anyone else has any suggestions feel free to help me out. And if anyone has seen anything like this done, post a link.

Eye for Video
11-08-2008, 08:50 PM
Yeah, that’s a pretty long image alright but it still needs to end up on an HTML page. You didn’t mention if the plan is to display the image across the whole page (a 800 wide page) and scroll the whole page or if you had some other ideas (a 990 wide page with a display area). Since that image is ssssooooo long, my suggestion would be to display the image in some sort of container and scroll the container instead of the whole page. It could be that every viewer would want to scroll from top to bottom every time….but maybe not.
Building your page with a scrollable section instead of scrolling the whole page will leave your site navigation buttons (and/or banner) available at all times, instead of your viewers finding themselves half way down looking for a way out. Since you asked about some examples, will here you go.
This site displays a .swf inside a <div> with the CSS for that div set to:
overflow:auto;
http://www.pacific-elements.com/dvd_1.html
The .swf scrolls but the page stays still. This .swf is short, 600px, but it could be any length. And since you are considering a .swf, you might want to look into swfobject.js to place it on the page. This allows you to describe the image with a bunch of (spider readable) text if you are interested in SEO of the image. For an example, view source and take a look at the alt content provided for
<!-- Begin content boxes -->
<div id="vid_preview">
OOOOrrrrrrrr, you might want to mask off a portion of the .swf (just what would show on the viewers monitor) and provide a scroll bar to move up and down the swf. Here’s an example of that, which uses an .xml file to place images and text into a playlist. This playlist is actually inside another .swf but the method could be used on any .swf (no matter how long) so that just a portion of it would show. Of course you still need to add a scroll bar, in this case it was done in Flash.
http://www.lavendergrowers.org/chronicle.html
Keep on Truckin’
Eye for Video
www.cidigitalmedia.com