declan bright

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

Downloads

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:

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.

View Comments