jQuery Zoomer

Zoom up your iFrames

View on GitHub

Browser support

Tested and working: Chrome, FF3.6+, IE8+

Usage

$('iframe').zoomer({ width: 200, zoom: 0.5 });

Demo

Click here to insert text into the iFrame.


Full Reference

Options

Name Default [Description]
width 'auto'
height 'auto'
zoom 0.4
tranformOrigin '0 0'
loadingType 'message'
Other option: 'spinner'
loadingMessage 'Generating preview...'
Message displayed while the iFrame is loading
spinnerURL 'http://oi46.tinypic.com/6y375z.jpg'
Requires loadingType: 'spinner'
message 'Open Page'
The text displayed on hover
ieMessageButtonClass 'btn btn-secondary'
Class name added to the Open Page button in IE
messageURL false
Use a different URL on click then the src of the iFrame
onComplete function($iframe) {}
Callback function after the iFrame has loaded and been zoomed

Methods

Name Description
$iframe.zoomer('fadeIn') Fades out the loading message to reveal the iFrame beneath.
$iframe.zoomer('fadeOut') Fades in the loading message to hide the iFrame beneath.
$iframe.zoomer('src', newSrc) Changes the src of the iFrame seamlessly. (Fades in the loading message, sets the iFrame src to newSrc and then fades out the loading message after the iFrame finishes loading and gets zoomed.)
$iframe.zoomer('refresh') Alias to calling $iframe.zoomer('src', currentSrc)
$iframe.zoomer('zoomedBodyHeight') Returns the height of the iFrame in zoomed space. (Example: if iFrame contents have height of 800px and zoom is set to 0.5, returns 400.)