FF1+ IE8+ Opr9+

Zoomio- jQuery in-place Image Zoom

  Author: Dynamic Drive

Description: Zoomio is an easy to set up, mobile friendly Image Zoom script that overlays an enlarged image directly on top of the original image when activated. Many ecommerce sites use a similar script to enable users to get a closer look at product shots. Users simply mouse over to bring up the enlarged image that can then be explored by moving the mouse around. On mobile devices, users tap the image to bring up the larger image that can then be dragged around. The zoom function works by taking the original image and showing it in its native dimensions when triggered, meaning the same image is used as both the initial and "enlarged" image. You can call Zoomio on the same image more than once to take into account any changes to the image, such as after updating the image's src property to zoom in on a different image.

Standard Demos (move your mouse/ tap on the below images):

Dynamically changing the zoomable image's src to create an image gallery:


Directions Developer's View

Step 1: Add the below code inside the <HEAD> section of the page:

Select All

The above code references the following external files (right click, and select "Save As"):

Step 2: Insert the below sample code into the BODY section of your page:

Select All

Setup Information

Zoomio is defined as a jQuery plugin. Simply call the zoomio() function on top of the desired image(s) to make them zoomable after the document has loaded:

jQuery(function($){ // on DOM load
	$(selector).zoomio()
})

where selector is a valid jQuery selector selecting one or more images to invoke Zoomio on, such as:

$('#myimage').zoomio() // add Zoomio to a single image with ID "myimage"
$('.sampleimage').zoomio() // add Zoomio to all images with CSS class "sampleimage"

Your images should have large native dimensions to provide rich details, as Zoomio uses the same image as the original for the enlarged version.  As an example, the zoomable image landscape.jpg below has actual dimensions of 1280px by 800px, though scaled down via CSS to 300px by 187px when shown:

<img class="sampleimage" src="landscape.jpg" />

Supported Options

$(selector).zoomio() supports a small list of options you can enter to customize the zoom area interface for the target images:

zoomio() function options
setting Description
fadeduration: milliseconds

defaults to 500

The duration of the fade in effect, in milliseconds (ie: 1000 = 1 second).
w: widthString

defaults to null

The width of the zoom area interface in any desired unit, such as "300px", "80%" etc. By default Zoomio uses the width of the original image as the zoom area's width, creating an overlay that precisely overlaps the original image.
h: heightString

defaults to null

The height of the zoom area interface in any desired unit, such as "300px", "80%" etc. By default Zoomio uses the height of the original image as the zoom area's height, creating an overlay that precisely overlaps the original image.

These options should be entered as a JavaScript object, each separated by a comma unless there's only one:

$('#myimage').zoomio({
	w: '80%' // make zoom area width 80% of page. No trailing comma
})

//OR

$('#myimage').zoomio({
	w: '80%',
	h: '300px' // <-- No comma after last option
})

Calling zoomio() more than once on the same image

A cool feature of Zoomio is the ability to be called more than once on the same image, to take into account any changes made to the image. The most practical use of this is to update an image's src, then call Zoomio again on the image to make the new image zoomable as well:

We simply define the initial image and invoke Zoomio on it first to make it zoomable:

<img id="celebrity" src="josie.jpg">

<script>
$('#celebrity').zoomio() // enable Zoomio on this image
</script>
Then, to power the buttons that update the image and reinitialize Zoomio, we define a simple JavaScript function containing just two lines and invoke it inside the buttons using the onClick event handler:
<script>

function changeImage(imgid, src){
	document.getElementById(imgid).src = src // update image src
	$('#celebrity').zoomio() // reinitialize Zoomio on the image
}

</script>

<button onClick="changeImage('celebrity', 'milla.jpg');">Milla</button> <button onClick="changeImage('celebrity', 'josie.jpg');">Josie</button>

And that's all there is to it!

Creating a simple Zoomio Gallery

With the ability to call Zoomio multiple times on an image, it's easy to create a simple image gallery where the showcased image can be zoomed in each time. The following is the complete source for the image gallery seen in the demo up top:

Select All

Note: Here are the images used in the gallery.

Enjoy!