Image Dialog jQuery Plugin

About the Plugin

The Image Dialog jQuery Plugin is a simple lightweight plugin (1.7 KB) for viewing an image in a modal dialog box. It does not require any CSS to function although extra styling can be applied if desired. It behaves in a responsive manner if the browser size, scroll position or orientation changes, to see this in action resize your browser when the image dialog is open.

Demos

• Basic demo with no extra styling

Downloads

• Image Dialog Plugin - minimised (1.7 KB)
• Image Dialog Plugin (3.8 KB)

Using the Plugin

As this is a jQuery plugin you must have the jQuery script included in your page, you can download it or link directly to it in a CDN, see the jQuery download page for more information on getting this setup.
Download and add the plugin script to your page:

<script src="jquery.imagedialog.min.js"></script>

Add an attribute called "data-full-img" to each thumbnail image with the path of the full size image:

<img alt="This is my image" 
	src="Thumbnail.jpg" 
	data-full-img="FullSizeImage.jpg" />

(This is a custom data attribute, for more information on custom data attributes see the HTML5 specification.)

Add a call to the plugin on a selector within the document ready function:

$(document).ready(function(){
	$('img').imageDialog();
});

Once everything has been setup, open your page and click on one of the thumbnail images, the plugin will download the full size image and display it in a dialog box which is centred on your screen, the image dimensions will be scaled down if required.

Design Requirements

These are the design requirements which I wanted to fulfill:

• When a thumbnail image is clicked, a simple dialog box should open and display a full size image, centred on the screen.
• The full size image should be loaded on demand as users may not want to view the full image.
• A loading indicator should be displayed while the image is downloading.
• The dialog should have responsive behaviour, it should resize and reposition when the browser size or orientation changes.
• If the page is scrolled, the dialog should reposition when scrolling is finished.
• Clicking anywhere on the screen should close the dialog box.
• The alt or title text should be displayed as the title of the dialog.
• The plugin should have minimal impact on page performance and load time.
• The plugin should not require any CSS by default although extra styling can be added if required.

There are many image viewer plugins out there but I couldn't find one that met all of these requirements so I decided to create this plugin.