Description

This post refers to an old version of the SimpleZoom plugin. For the latest version of this plugin check out /blog/tag/simplezoom.

In my inaugural blog post I introduced a jQuery plugin for magnifying images named SimpleZoom. The purpose of this post is to introduce the updated SimpleZoom v.0.2.2 which adds new options and greatly simplifies the invocation process.

The SimpleZoom plugin is intended to be invoked upon an <img> element for which a corresponding higher resolution image resource is available. This higher resolution image, which is provided to the plugin via its URL, then acts as the magnified image. Of course, invocation need not follow this specific pattern. Indeed, the plugin may be invoked upon any DOM element while specifying any image resource desired.

Once initialized, the SimpleZoom plugin creates a user controlled viewfinder widget which is used to designate a portion of the magnified image to be displayed within the plugins viewport widget. By default, the viewport and viewfinder widgets are combined to give the impression of a single "magnifying lens" widget. Alternatively, a separate DOM element may be specified as the plugins active viewport.

Tested for compatibility with jQuery versions 1.9.1, 1.8.2, 1.8.0 and 1.7.2 on most major browsers going back to IE7.

View Demo

Usage

The SimpleZoom plugin may be invoked in the following manner.

• JavaScript

$(target).simpleZoom(src, options);

The SimpleZoom plugin may be invoked at any point after the target element appears within the document. Indeed, it is not necessary to wait for any of the associated image resources to load.

Utility Functions

When the SimpleZoom plugin is invoked within a dynamic webpage, situations may arise in which the plugin may need to be "refreshed" in order to continue functioning properly. Such is the case when the target element is dynamically resized or translated. In these instances, the plugin can be notified of possible changes by calling a special refresh utility function. An object with references to the refresh and other utility functions are returned by the SimpleZoom plugin when 'returnUtil' : true is specified as a parameter of the options argument.

• JavaScript

var options =  {'returnUtil' : true};
var utilities = $('#small-img').simpleZoom(src, options);
utilities .refresh();

The following table details the existing utility functions.

Styles

Included in the SimpleZoom download package is a stylesheet named simplezoom.css. This is the primary stylesheet for the plugin and must be present in order for it to function. Entries in the stylesheet listed under the 'Customizable CSS' header may be edited and expanded upon. For example, the width, height and border-radius of the combined viewfinder/viewport (magnifying lens) widget may be altered by editing rules for the SZ-zoom CSS class.

The following table details the CSS classes used by the SimpleZoom plugin.

Options

Custom options may be specified for the SimpleZoom plugin as a collection of key-value pairs. Such a collection may be constructed as either a standard Object or a JSON String, and then passed to the SimpleZoom plugin as the secondary argument.

The following table details the valid parameters of the options object.

Demo

Mouseover or tap the image below.

"#small-img"

"#viewport"

• Example #1
• Example #2

<figure>
	<img id='small-img' src='/img/small.jpg' />
</figure>
<script type="text/javascript">
(function() {
	var src = '/img/large.jpg';
	$('#small-img').simpleZoom(src, {
		'fullscreen' : true
	});
})());
</script>

<figure>
	<div class='left-column'>
		<img id='small-img' src='/img/small.jpg' />
	</div>
	<div class='right-column'>
		<div id='viewport' style='height: 480px; width: 100px;'></div>
	</div>
</figure>
<script type="text/javascript">
(function() {
	var src = '/img/large.jpg';
	$('#small-img').simpleZoom(src, {
		'fullscreen' : true,
		'viewport' : '#viewport',
		'confine' : true
	});
})());
</script>