Booklet Zoom Function
Zooms on page
HTML
<link rel="stylesheet" href="http://builtbywill.com/code/booklet/src/jquery.booklet.latest.css">
<script src="http://builtbywill.com/code/booklet/src/jquery.booklet.latest.js"></script>
<div id="mybook">
<div id="someid">
<img src="https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/01.jpg" />
</div>
<div>
<p>Page Two</p>
</div>
<div>
<p>Page Three</p>
</div>
<div>
<p>Page Four</p>
</div>
</div>
CSS
img
{
width: 100%;
height: 100%;
}
.zoom
{
width: 200%;
height: 200%;
}
#someid {
width: 100%;
height: 100%;
overflow:hidden;
}
JavaScript
$(function() {
//single book
$('#mybook').booklet({
closed: true,
covers: true,
menu: '#custom-menu',
pageSelector: true,
chapterSelector: true,
arrows: true,
padding: 0,
pagePadding: 0,
width: '500',
height: '300',
pageNumbers: false
});
//multiple books with ID's
$('#mybook1, #mybook2').booklet();
//multiple books with a class
$('.mycustombooks').booklet();
});
var divdbl = $( "img:first" );
divdbl.dblclick(function() {
divdbl.toggleClass( "zoom" );
if($("img:first").hasClass("zoom"))
{
$("#mybook").booklet("option","height",300)
$("#mybook").booklet("option","width",500);
}
else
{
$("#mybook").booklet("option","height",300);
$("#mybook").booklet("option","width",500);
}
});
var clicking = false;
var previousX;
var previousY;
$("#someid").mousedown(function(e) {
e.preventDefault();
previousX = e.clientX;
previousY = e.clientY;
clicking = true;
});
$(document).mouseup(function() {
clicking = false;
});
$("#someid").mousemove(function(e) {
if (clicking) {
e.preventDefault();
var directionX = (previousX - e.clientX) > 0 ? 1 : -1;
var directionY = (previousY - e.clientY) > 0 ? 1 : -1;
//$("#mybook").scrollLeft($("#mybook").scrollLeft() + 10 * directionX);
//$("#mybook").scrollTop($("#mybook").scrollTop() + 10 * directionY);
$("#someid").scrollLeft($("#someid").scrollLeft() + (previousX - e.clientX));
$("#someid").scrollTop($("#someid").scrollTop() + (previousY - e.clientY));
previousX = e.clientX;
previousY = e.clientY;
}
});
$("#someid").mouseleave(function(e) {
clicking = false;
});