Event: resize: Difference between revisions
Jump to navigation
Jump to search
(Created page with "<yambe:breadcrumb>Zoom Events</yambe:breadcrumb>") |
mNo edit summary |
||
(5 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
This event is triggered when after [[Method: zoomIn|zoomIn]] or [[Method: zoomOut|zoomOut]] is called. It's designed to perform the resize operation over the pages of the flipbook. Therefore, the [[Event: resize|resize]] will be fired when a page might be resized. | |||
{| class="wikitable" | |||
|- | |||
! scope="col"| Argument | |||
! scope="col"| Type | |||
! scope="col"| Description | |||
|- | |||
| event | |||
| Object | |||
| Event Object | |||
|- | |||
| zoomValue | |||
| Number | |||
| The new zoom value | |||
|- | |||
| page | |||
| Number | |||
| The number of the page that must be resized | |||
|- | |||
| pageElement | |||
| jQuery Element | |||
| The page element | |||
|} | |||
Example: | |||
<pre class="javascript"> | |||
$("#zoom-view").bind("zoom.resize", function(event, newZoom, page, pageElement) { | |||
if (newZoom==1) | |||
loadDefaultPage(page, pageElement); | |||
else if (newZoom==1) | |||
loadLargePage(page, pageElement); | |||
}); | |||
// Load large pages | |||
function loadLargePage(page, pageElement) { | |||
var img = $("<img />"); | |||
img.load(function() { | |||
var prevImg = pageElement.find("img"); | |||
$(this).css({width: "100%", height: "100%"}); | |||
$(this).appendTo(pageElement); | |||
prevImg.remove(); | |||
}); | |||
// Loadnew page | |||
img.attr("src", "pages/"+ page + "-large.jpg"); | |||
} | |||
// Load small pages | |||
function loadDefaultPage(page, pageElement) { | |||
pageElement.find("img"). | |||
img.css({width: "100%", height: "100%"}). | |||
attr("src", "pages/" + page + "-default.jpg"); | |||
} | |||
</pre> | |||
<yambe:breadcrumb>Zoom Events</yambe:breadcrumb> | <yambe:breadcrumb>Zoom Events</yambe:breadcrumb> |
Latest revision as of 02:26, 9 July 2012
This event is triggered when after zoomIn or zoomOut is called. It's designed to perform the resize operation over the pages of the flipbook. Therefore, the resize will be fired when a page might be resized.
Argument | Type | Description |
---|---|---|
event | Object | Event Object |
zoomValue | Number | The new zoom value |
page | Number | The number of the page that must be resized |
pageElement | jQuery Element | The page element |
Example:
$("#zoom-view").bind("zoom.resize", function(event, newZoom, page, pageElement) { if (newZoom==1) loadDefaultPage(page, pageElement); else if (newZoom==1) loadLargePage(page, pageElement); }); // Load large pages function loadLargePage(page, pageElement) { var img = $("<img />"); img.load(function() { var prevImg = pageElement.find("img"); $(this).css({width: "100%", height: "100%"}); $(this).appendTo(pageElement); prevImg.remove(); }); // Loadnew page img.attr("src", "pages/"+ page + "-large.jpg"); } // Load small pages function loadDefaultPage(page, pageElement) { pageElement.find("img"). img.css({width: "100%", height: "100%"}). attr("src", "pages/" + page + "-default.jpg"); }
<yambe:breadcrumb>Zoom Events</yambe:breadcrumb>