QuiteView

LIGHTWEIGHT IMAGE VIEWING

Click on the images!

Single image

All you need is a link with a class named 'quiteview' (class='quiteview'). You can specify an image description in the title (title='some description'). The image will be resized if it's larger than the browser window. This also happens on the fly as you resize the browser window.

Image gallery

You can create a gallery of images by defining a rel in each link (e.g. rel='coolgallery'). You can then switch between these images when you're in the large view (you can also do this by pressing the arrow keys).

Implementation

Download the starter package

- there's all you need in there, really.

The HTML document must have a doctype defined, otherwise it won't work in IE. The doctype can even be a short one for HTML 5:

<!doctype html>

Or one of the common ones for HTML 4:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

In the head of the document must be a link to the jquery library and quiteview.js:

<head>
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript' src='quiteview.js'></script>
</head>

In the link to the image, you must define a class named 'quiteview' (class='quiteview'). If you want to display an image description, you can define it in the title: title='some description':

<a href='sample-1-f.jpg' class='quiteview' title='some description'>
<img src='sample-1-s.jpg'>
</a>

The links of the images in a gallery must all have the same rel defined, e.g. rel='galleryname':

<a href='sample-2-f.jpg' class='quiteview' title='some other desc' rel='coolgallery'>
<img src='sample-2-s.jpg'>
</a>

<a href='sample-3-f.jpg' class='quiteview' title='yet another desc' rel='coolgallery'>
<img src='sample-3-s.jpg'>
</a>

Note: in IE6, the scrolling of the wepgage on the background doesn't work and the page gets scrolled to the top when the image is loaded. If someone is still using IE6, it's their own fault. Get a life, guys!

Experimental

In this experimental version of QuiteView, the image is being loaded without the use of the Image() object, just with css (max-width, max-height) and the definition of the src of the image. This doesn't work right in IE8 (it works in IE7, though!) and Opera, due to misinterpretation of max-width/max-height.
So this one just hopes that one fine day, all the browsers will get it right.

Experimental