A Javascript-less Image Viewer

So a while back, I was tasked with making what essentially boiled down to an image-viewer. The catch? I had to make it work without javascript (for Internet Explorer in particular), and it had to be done without reloading the entire page.

Sounds weird, I know, but blame Valve for using Internet Explorer 6, sans javascript, as their HTMLView object in the Source Engine SDK. Anyway… It sounds difficult, but it’s really not, it’s actually very VERY simple, it’s just easy to overthink.

First of all, you’re going to have to make sure all of the images are the same size, or at the very least, the same height. You’re going to block out the HTML like so:

<div id='slideshow'>
     <img id="image1" src="imgimage1.jpg" alt="Image 1" />
     <img id="image2" src="imgimage2.jpg" alt="Image 2" />
     <img id="image3" src="imgimage3.jpg" alt="Image 3" />
     <img id="image4" src="imgimage4.jpg" alt="Image 4" />
</div>
<div id='slideshowNav'>
     <a href="#image1">Image 1<a>
     <a href="#image2">Image 2<a>
     <a href="#image3">Image 3<a>
     <a href="#image4">Image 4<a>
</div>

The key here is the fact that all of the images have their own id values. Now the css is going to look like so:

#slideshow{
     width: Width of your widest image;
     height: Height of the images;
     overflow: hidden;
}

Now the end result is you have the slideshow div acting as a sort of “viewing window” through which you’re looking at the images. Each image has an id value associated with it, and clicking the link jumps to that image in the slideshow div.

I should note that last I checked, Opera has a problem with overflow hidden and scrolling, but it’s a known bug in Opera and is in fact even a part of the Acid2 test, so I believe Opera 10 should work fine with this trick.

Leave a Reply

Your email address will not be published.

Required fields are marked *

You may use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>