FF IE9+ Chrome

jQuery Full Screen Image Viewer

Author: Dynamic Drive

Dependencies: jQuery and Zoomio

Description: Easily display featured images on your page in their full glory with jQuery Full Screen Image Viewer! Easy as pie to set up as a jQuery plugin, the script expands any image to fill the entire browser screen when clicked on, with the option to further zoom in on the details when the user mouses over the enlarged image. The script is ideal for product images on ecommerce sites or simply high resolution images that demand a larger stage.

The script works on all modern desktop and mobile browsers. On touch devices such as an iPad, zooming in and panning is done with a tap and glide of the finger across the full screen image.

On small mobile devices such as a phone, the script by default disables itself, as it's more intuitive simply to use the native pinch to zoom to get in closer on images. You can configure the breaking point used inside the script.

Demos (click on any of the images below):



Directions

Step 1: Add the following code to the <head> section of your page:

Select All

The code above references 4 external files, which you need to download below (right click/ select "Save As"):

  1. ddfullscreenimageviewer.js
  2. ddfullscreenimageviewer.css
  3. zoomio.js (dependency file. Project Page)
  4. zoomio.css (dependency file)

Step 2: Then, insert the following sample thumbnail images to the BODY of your page to see how to set up the script on arbitrary images:

Select All

Setup Information

Full Screen Image Viewer is defined as a jQuery plugin. Simply call the fullscreenimage() function on top of the desired image(s) to make them full screen when the user clicks on them:

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

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

$('img.thumbnails').fullscreenimage() // add Full Screen Image to all images with class "thumbnails"
$('#singleimage').fullscreenimage() // add Full Screen Image to single image with ID "singleimage"

Supported Options

$(selector).fullscreenimage() supports a small list of options you can enter to customize the experience for the target images:

fullscreenimage() function options
setting Description
largeimage: "url_or_image_path"

defaults to undefined

Specifies an alternate, "larger" version of the original image the script should load when showing the image full screen. This should be the same image jsut with higher resolution and dimensions compared to the original. If not defined, the script uses the original image, just enlarged to fill the whole screen instead.
scale: number

defaults to 1

Specifies whether the enlarged image should be zoomable when the mouse rolls over it.  A value of 1 disables the function, while any number larger than 1 sets the zoom level at that number, such as 2 for 2x zoom.

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

$('#myimage').fullscreenimage({
	largeimage: 'images/largecat.jpg' // single option, no comma
})

//OR

$('#myimage').fullscreenimage({
	largeimage: 'images/largecat.jpg',
	scale: 3 // <-- No comma after last option
})

The options above can also be set via the "data-" attribute on the image's HTML markup instead for your convenience. For example:

<img class="thumbnails" src="tallgirlsmall.jpg" data-large="tallgirllarge.jpg" data-scale="4" /> 

The "data-" attribute always takes precedence over the same option set via the initialization code.

Setting Breaking Point for disabling Full Screen Image Viewer

The script is disabled by default on small screen mobile devices (device width of 680px or less), as it's more intuitive simply for users to use the native "pinch to zoom" function instead. The "breaking point" to disable the script is defined in the following line inside fullscreenimageviewer.js:

var disablescriptmql = window.matchMedia? window.matchMedia("screen and (max-device-width: 680px)") : {matches: false, addListener: function(){}}

Change the code in red to your own to modify the conditions for disabling the script, which is based on CSS media queries. See here for a list of common media query conditions.

Wordpress Users: Step by Step instructions to add ANY Dynamic Drive script to an entire Wordpress theme or individual Post