Way 2 Web

Web development tips


 
Image Viewer

Introduction

This handy little widget displays a gallery of images.

It consists of two main sections: a large viewer, which displays one image at a time image, and an image box that contains thumbnails of all the available images.

It supports an optional title and text comment for each image . Click a thumbnail to display the image. Click on the viewer to open the image in a new window (full size).

And the cherry on the top: play a slide-show of the images!

The HTML is minimal; we use only <div> and <img> tags. All the details are defined in a JavaScript array of objects. On page load, we create the widget, which fills the image box, and displays the first image in the viewer.

The images are in effect preloaded when the image box is populated and so image switching in the viewer is fast.

Note: The widget empties the image box before loading thumbnails. This allows you to have multiple image folders. To switch folders, simply recreate the widget with a different set of image definitions. (See API below)

API

Constructor

ImageViewer(ViewerID, ImagesBoxID, ImageObjArray 
            [, ImageTitleID] [, ImageCommentID] [, StartIndex] [, EnablePopUp]);
ViewerID
ID of viewer tag
ImagesBoxID
ID of image box tag
ImageObjArray
Array of object, each describing an image. Each object has properties:
src
path to image
title
image title
text
description / comments
ImageTitleID
ID of title tag
ImageCommentID
ID of comment tag
StartIndex
Index to image arrays indicating which image is to be displayed on page load (default: 0)
EnablePopUp
Determines whether the displayed image opens in a pop-up window when clicked (default: true)

The PlaySlideShow(intervalInMilliseconds) object method starts the slide show. To stop the show, call this method again or click any of the thumbnails.

[Top of page]

Demo

Image Viewer

Click on a thumbnail to display it. Click on the viewer to open the image in a new window (full size).

The title appears above the image, comments below. The appearance of every aspect can be customized by adjusting the HTML and CSS.

Click the button to start the slide show.

[Top of page]

Code

HTML

<div id="image-title"></div>
<div id="viewer"></div>
<div id="image-comment"></div>
<div id="imagesBox"></div>
<input type="button" value="Play/Pause Slide Show" 
    onclick="javascript:viewer.PlaySlideShow();return false;" />

Javascript

<script language="javascript" src="../../js/x/x_core.js"></script>
<script language="javascript" src="../../js/y/ylib.js"></script>
<script language="javascript" src="../../js/y/y_ImageViewer.js"></script>
<script language="javascript">
    var viewer;
    var imageObjArray  = 
        [{src:"../../image/wowo-vertical.gif",
          title:"WOWO logo - vertical",
          text:"Hmnnn... that looks familiar"},
         {src:"../../image/wowo-logo.gif",
          title:"WOWO logo - regular",
          text:"That's more like it! The Web On Web Off logo"},
         {src:"../../image/mona_lisa.jpg",
          title:"Mona Lisa",
          text:"The Mona Lisa image is larger than the viewer, 
                may scroll in IE 6..."},
         {src:"../../image/Water lilies.jpg",
          title:"Water lilies",
          text:"A sample picture. Many more images can be added 
                to the 'image box', which is scrollable."}];    
        
        window.onload = function(){
	        viewer = 
	            new ylib.widget.ImageViewer("viewer", "imagesBox", 
	                imageObjArray, "image-title", "image-comment", 0);
        }
</script>

Css

#viewer,
#imagesBox,
#image-title, 
#image-comment {
    width: 400px;
    margin: 0 auto 0 auto;
}
#viewer,
#imagesBox {
    border: solid 1px purple;
    overflow: auto;
}
#viewer {
    height: 400px;
    text-align: center;
    vertical-align: middle;
}
#viewer img {
    max-height: 400px;
    max-width: 400px;
    cursor: pointer;
    display: block;
    margin: 0 auto 0 auto;
}
#imagesBox {
    height: 100px;
    margin-bottom: 5px;
}        
#imagesBox img {
    height: 30px;
    width: 30px;
    float: left;
    margin: 5px 5px;
    cursor: pointer;
}
#image-title{
    font-weight: bold;
    margin-top: 5px;
}
#image-comment {
    padding: 4px 0 4px 0; 
}
[Top of page]

Files

[Top of page]