Zoomio- jQuery Image Zoom v2.0
June 14th, 17': Updated to v2.04
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. Alternatively, you can specify a different, higher resolution image as the "enlarged" image that's loaded on demand instead. v2.0 feature
Zoomio can be called 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):
The first image above has a data-largesrc
attribute
defined to load a higher resolution version of the original image on hover.
Dynamically changing the zoomable image's src to create an image gallery:
Step 1: Add the below code inside the <HEAD> section of the page:
The above code references the following external files (right click, and select "Save As"):
- zoomio.css
- zoomio.js
- zoomiodemoimages.zip (all the images used in the demos for your convenience)
Step 2: Insert the below sample code into the BODY section of your page:
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"
For each image, it can consist of just a single image with large native dimensions that's scaled down initially using CSS when shown:
<img class="sampleimage" src="landscape.jpg" />
Or a "thumbnail" image with a data-largesrc
attribute defined that points to a larger, higher resolution version of itself.
In this case the script will dynamically load the larger image on demand when
the user mouses over the thumbnail:
<img class="sampleimage" src="landscapesmall.jpg data-largesrc="landscapelarge.jpg" />
In general the second approach is better, as the large image is only loaded when the user actually zooms in on it. However, it does entail creating another version of each image.
In addition to specifying a large image to be used when users
zoom in, you can also explicitly set the dimensions of the enlarged image, by
making use of the scale
option inside the zoomio()
function. A scale
value of 3 for example would set the enlarged
image to be 3 times the dimensions of the original thumbnail image shown on the
page.
Supported Options
$(selector).zoomio()
supports a small list of
options you can enter to customize the zoom area interface for the target
images:
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. |
scale: int defaults to null |
Explicitly sets the dimensions of the
enlarged image when viewers zoom in on the image, as a multiple of the
original thumbnail image's dimensions. A value of 3 for example would
set the enlarged image to be 3 times the dimensions of the original
thumbnail image shown on the page. By default the script uses the
enlarged image's native dimensions when the |
fixedcontainer: Boolean defaults to null |
Set this option to true if your
thumbnail image is wrapped inside a fixed (position:fixed )
parent element. The calculation needed to correctly position the
enlarged image changes in that case, in which this option should be set
to true when initializing Zoomio on those images. |
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="josiesmall.jpg" data-largesrc="josie.jpg"> <script> $('#celebrity').zoomio() // enable Zoomio on this image </script>
Note that in this case, I've opted to make sure of the data-largesrc
attribute to specify a larger version of the original image to be used when
zoomed in. This affects the JavaScript to come in that we'll need to update both
the image's src
and data-largesrc
properties when
changing the image.
Then, to power the buttons that update the image and reinitialize Zoomio, we
define a simple JavaScript function containing just three lines and invoke it
inside the buttons using the onClick
event handler:
<script> function changeImage(imgid, thumbsrc, largesrc){ document.getElementById(imgid).src = thumbsrc// update image src document.getElementById(imgid).setAttribute('data-largesrc', largesrc) // update data-largesrc attribute with large image path $('#celebrity').zoomio() // reinitialize Zoomio on the image } </script> <button onClick="changeImage('celebrity', 'millasmall.jpg', 'milla.jpg');">Milla</button> <button onClick="changeImage('celebrity', 'josiesmall.jpg', 'josie.jpg');">Josie</button>
Again, since we're making use of the data-largesrc
attribute to
specify a larger version of the original image, when updating it for another
image, we need to update both the image's src
and data-largesrc
attributes. Otherwise, you should only be modifying the image's src
property.
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: