first commit 2
This commit is contained in:
hmw1001
@@ -0,0 +1,292 @@
|
||||
<!doctype html>
|
||||
<!--[if lt IE 7 ]> <html lang="en" class="ie6"> <![endif]-->
|
||||
<!--[if IE 7 ]> <html lang="en" class="ie7"> <![endif]-->
|
||||
<!--[if IE 8 ]> <html lang="en" class="ie8"> <![endif]-->
|
||||
<!--[if IE 9 ]> <html lang="en" class="ie9"> <![endif]-->
|
||||
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
|
||||
<head>
|
||||
<script type="text/javascript" src="../../extras/jquery.min.1.7.js"></script>
|
||||
<script type="text/javascript" src="../../extras/jquery-ui-1.8.20.custom.min.js"></script>
|
||||
<script type="text/javascript" src="../../extras/jquery.mousewheel.min.js"></script>
|
||||
<script type="text/javascript" src="../../extras/modernizr.2.5.3.min.js"></script>
|
||||
<script type="text/javascript" src="../../lib/hash.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="canvas">
|
||||
<div id="book-zoom">
|
||||
<div class="sj-book">
|
||||
<div depth="5" class="hard"> <div class="side"></div> </div>
|
||||
<div depth="5" class="hard front-side"> <div class="depth"></div> </div>
|
||||
<div class="own-size"></div>
|
||||
<div class="own-size even"></div>
|
||||
<div class="hard fixed back-side p111"> <div class="depth"></div> </div>
|
||||
<div class="hard p112"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="slider-bar" class="turnjs-slider">
|
||||
<div id="slider"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
function loadApp() {
|
||||
|
||||
var flipbook = $('.sj-book');
|
||||
|
||||
// Check if the CSS was already loaded
|
||||
|
||||
if (flipbook.width()==0 || flipbook.height()==0) {
|
||||
setTimeout(loadApp, 10);
|
||||
return;
|
||||
}
|
||||
|
||||
// Mousewheel
|
||||
|
||||
$('#book-zoom').mousewheel(function(event, delta, deltaX, deltaY) {
|
||||
|
||||
var data = $(this).data(),
|
||||
step = 30,
|
||||
flipbook = $('.sj-book'),
|
||||
actualPos = $('#slider').slider('value')*step;
|
||||
|
||||
if (typeof(data.scrollX)==='undefined') {
|
||||
data.scrollX = actualPos;
|
||||
data.scrollPage = flipbook.turn('page');
|
||||
}
|
||||
|
||||
data.scrollX = Math.min($( "#slider" ).slider('option', 'max')*step,
|
||||
Math.max(0, data.scrollX + deltaX));
|
||||
|
||||
var actualView = Math.round(data.scrollX/step),
|
||||
page = Math.min(flipbook.turn('pages'), Math.max(1, actualView*2 - 2));
|
||||
|
||||
if ($.inArray(data.scrollPage, flipbook.turn('view', page))==-1) {
|
||||
data.scrollPage = page;
|
||||
flipbook.turn('page', page);
|
||||
}
|
||||
|
||||
if (data.scrollTimer)
|
||||
clearInterval(data.scrollTimer);
|
||||
|
||||
data.scrollTimer = setTimeout(function(){
|
||||
data.scrollX = undefined;
|
||||
data.scrollPage = undefined;
|
||||
data.scrollTimer = undefined;
|
||||
}, 1000);
|
||||
|
||||
});
|
||||
|
||||
// Slider
|
||||
|
||||
$( "#slider" ).slider({
|
||||
min: 1,
|
||||
max: 100,
|
||||
|
||||
start: function(event, ui) {
|
||||
|
||||
if (!window._thumbPreview) {
|
||||
_thumbPreview = $('<div />', {'class': 'thumbnail'}).html('<div></div>');
|
||||
setPreview(ui.value);
|
||||
_thumbPreview.appendTo($(ui.handle));
|
||||
} else
|
||||
setPreview(ui.value);
|
||||
|
||||
moveBar(false);
|
||||
|
||||
},
|
||||
|
||||
slide: function(event, ui) {
|
||||
|
||||
setPreview(ui.value);
|
||||
|
||||
},
|
||||
|
||||
stop: function() {
|
||||
|
||||
if (window._thumbPreview)
|
||||
_thumbPreview.removeClass('show');
|
||||
|
||||
$('.sj-book').turn('page', Math.max(1, $(this).slider('value')*2 - 2));
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// URIs
|
||||
|
||||
Hash.on('^page\/([0-9]*)$', {
|
||||
yep: function(path, parts) {
|
||||
|
||||
var page = parts[1];
|
||||
|
||||
if (page!==undefined) {
|
||||
if ($('.sj-book').turn('is'))
|
||||
$('.sj-book').turn('page', page);
|
||||
}
|
||||
|
||||
},
|
||||
nop: function(path) {
|
||||
|
||||
if ($('.sj-book').turn('is'))
|
||||
$('.sj-book').turn('page', 1);
|
||||
}
|
||||
});
|
||||
|
||||
// Arrows
|
||||
|
||||
$(document).keydown(function(e){
|
||||
|
||||
var previous = 37, next = 39;
|
||||
|
||||
switch (e.keyCode) {
|
||||
case previous:
|
||||
|
||||
$('.sj-book').turn('previous');
|
||||
|
||||
break;
|
||||
case next:
|
||||
|
||||
$('.sj-book').turn('next');
|
||||
|
||||
break;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
// Flipbook
|
||||
|
||||
flipbook.bind(($.isTouch) ? 'touchend' : 'click', zoomHandle);
|
||||
|
||||
flipbook.turn({
|
||||
elevation: 50,
|
||||
acceleration: !isChrome(),
|
||||
autoCenter: true,
|
||||
gradients: true,
|
||||
duration: 1000,
|
||||
pages: 112,
|
||||
when: {
|
||||
turning: function(e, page, view) {
|
||||
|
||||
var book = $(this),
|
||||
currentPage = book.turn('page'),
|
||||
pages = book.turn('pages');
|
||||
|
||||
if (currentPage>3 && currentPage<pages-3) {
|
||||
|
||||
if (page==1) {
|
||||
book.turn('page', 2).turn('stop').turn('page', page);
|
||||
e.preventDefault();
|
||||
return;
|
||||
} else if (page==pages) {
|
||||
book.turn('page', pages-1).turn('stop').turn('page', page);
|
||||
e.preventDefault();
|
||||
return;
|
||||
}
|
||||
} else if (page>3 && page<pages-3) {
|
||||
if (currentPage==1) {
|
||||
book.turn('page', 2).turn('stop').turn('page', page);
|
||||
e.preventDefault();
|
||||
return;
|
||||
} else if (currentPage==pages) {
|
||||
book.turn('page', pages-1).turn('stop').turn('page', page);
|
||||
e.preventDefault();
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
updateDepth(book, page);
|
||||
|
||||
if (page>=2)
|
||||
$('.sj-book .p2').addClass('fixed');
|
||||
else
|
||||
$('.sj-book .p2').removeClass('fixed');
|
||||
|
||||
if (page<book.turn('pages'))
|
||||
$('.sj-book .p111').addClass('fixed');
|
||||
else
|
||||
$('.sj-book .p111').removeClass('fixed');
|
||||
|
||||
Hash.go('page/'+page).update();
|
||||
|
||||
},
|
||||
|
||||
turned: function(e, page, view) {
|
||||
|
||||
var book = $(this);
|
||||
|
||||
if (page==2 || page==3) {
|
||||
book.turn('peel', 'br');
|
||||
}
|
||||
|
||||
updateDepth(book);
|
||||
|
||||
$('#slider').slider('value', getViewNumber(book, page));
|
||||
|
||||
book.turn('center');
|
||||
|
||||
},
|
||||
|
||||
start: function(e, pageObj) {
|
||||
|
||||
moveBar(true);
|
||||
|
||||
},
|
||||
|
||||
end: function(e, pageObj) {
|
||||
|
||||
var book = $(this);
|
||||
|
||||
updateDepth(book);
|
||||
|
||||
setTimeout(function() {
|
||||
|
||||
$('#slider').slider('value', getViewNumber(book));
|
||||
|
||||
}, 1);
|
||||
|
||||
moveBar(false);
|
||||
|
||||
},
|
||||
|
||||
missing: function (e, pages) {
|
||||
|
||||
for (var i = 0; i < pages.length; i++) {
|
||||
addPage(pages[i], $(this));
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
$('#slider').slider('option', 'max', numberOfViews(flipbook));
|
||||
|
||||
flipbook.addClass('animated');
|
||||
|
||||
// Show canvas
|
||||
|
||||
$('#canvas').css({visibility: ''});
|
||||
}
|
||||
|
||||
// Hide canvas
|
||||
|
||||
$('#canvas').css({visibility: 'hidden'});
|
||||
|
||||
// Load turn.js
|
||||
|
||||
yepnope({
|
||||
test : Modernizr.csstransforms,
|
||||
yep: ['../../lib/turn.min.js'],
|
||||
nope: ['../../lib/turn.html4.min.js', 'css/jquery.ui.html4.css', 'css/steve-jobs-html4.css'],
|
||||
both: ['js/steve-jobs.js', 'css/jquery.ui.css', 'css/steve-jobs.css'],
|
||||
complete: loadApp
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user