Event: resize: Difference between revisions

From Turn.js Documentation
Jump to navigation Jump to search
(Created page with "<yambe:breadcrumb>Zoom Events</yambe:breadcrumb>")
 
No edit summary
Line 1: Line 1:
This event is 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>

Revision as of 02:23, 9 July 2012

This event is 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>