ImageViewer Documentation

Introduction

ImageViewer is a jQuery plugin for customizing image presentation. Web developer may easily embed it into the website, add header and/or footer bars to show additional content such as image title or navigation controls as well as use other options, such as fullscreen displaying, etc.

Basic Usage

The plugin is invoked by calling the imageviewer() method on a jQuery object that represents an <div> element:

<script type="text/javascript"> $(function() { $('div#viewer').imageviewer( 'options', {'size': {'w':width, 'h':height}, ...} ); $('div#viewer').imageviewer( 'show', path_to_image, '', '' ); }); </script>

If there is more than one element in the jQuery object, the plugin will be enabled for all elements in the set.

Functions and Options

There are three functions available in the ImageViewer plugin:

1. "OPTIONS" function is used to initialize ImageViewer object as well as modify its options later.

$('div#viewer').imageviewer('options', See available options);

2. "SHOW" is used to display image in ImageViewer object.

$('div#viewer').imageviewer('show', path_to_image, URL, target);

3. "HIDE" function is used to delete ImageViewer object.

$('div#viewer').imageviewer('hide');

The plugin is configurable through the use of options which are passed to the "OPTIONS" method. The available options are:

Option Description
mode

If set to "popup", ImageViewer object will work in fullscreen mode. This option should be specified before calling "SHOW" function.

example: $('div#viewer').imageviewer('options', {'mode':'popup'});
size

Set the size of ImageViewer object. If not specified ImageViewer object size depends on the showing image size.

default: auto
example: $('div#viewer').imageviewer('options', {'size': {'w':400, 'h':300}});
fade_dur

"SHOW" function uses fading animation to show or change the image. This option determines how long the animation will run (in milliseconds).

default: 0
example: $('div#viewer').imageviewer('options', {'fade_dur':1500});
header

Any html code which will be embedded into the header bar. "h_height" option must be specified along with this option.

example: $('div#viewer').imageviewer('options', {'header':html_code, 'h_height':30});
h_height

Set the height of the header bar (in pixels). "header" option must be specified along with this option.

example: $('div#viewer').imageviewer('options', {'header':html_code, 'h_height':30});
h_show

Set it to "show" to show and "hide" to hide the header bar. "h_show_dur" option may be specified along with this option.

example: $('div#viewer').imageviewer('options', {'h_show':'show', 'h_show_dur':1000});
h_show_dur

This option determines how long it will take to show/hide the header bar (in milliseconds). "h_show" option must be specified along with this option.

default: 0
example: $('div#viewer').imageviewer('options', {'h_show':'show', 'h_show_dur':1000});
footer

Any html code which will be embedded into the footer bar. "f_height" option must be specified along with this option.

example: $('div#viewer').imageviewer('options', {'footer':html_code, 'f_height':60});
f_height

Set the height of the footer bar (in pixels). "footer" option must be specified along with this option.

example: $('div#viewer').imageviewer('options', {'footer':html_code, 'f_height':60});
f_show

Set it to "show" to show and "hide" to hide the footer bar. "f_show_dur" option may be specified along with this option.

example: $('div#viewer').imageviewer('options', {'f_show':'show', 'f_show_dur':1000});
f_show_dur

This option determines how long it will take to show/hide the footer bar (in milliseconds). "f_show" option must be specified along with this option.

default: 0
example: $('div#viewer').imageviewer('options', {'f_show':'show', 'f_show_dur':1000});

Style Sheets

There are only five css classes distributed with the plugin:

You only need to include imageviewer.css style sheet file in your page header. There is also loading.gif file which is ised in ivLoadingImage class, so it should be placed in the same directory as the style sheet.