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 |
falseUse 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.) |