•  
•  
•  
•  

Header 4

Header 3

Header 2

Header 1

scriptheaderfoot Eliz Lake

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
<img class="thumbnails" src="drinkbeachsmall.jpg" data-large="drinkbeach.jpg" data-scale="4" /> <img class="thumbnails" src="girlglassessmall.jpg" />

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.

Copyright 2016 Dynamic Drive [ Top ]