DIR : /home/kozerus/public_html/js/turnjs4/samples/jkwii/index.html
/home/kozerus/public_html/js/turnjs4/samples/jkwii
<!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>
<title>index_turnjs_jkwii.html 20190604_1917</title>
<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/jkwii-html4.css'],
both: ['js/jkwii.js', 'css/jquery.ui.css', 'css/jkwii.css'],
complete: loadApp
});
</script>
</body>
</html>
//
koh5_pano
Drag mouse to navigate.
Navigation
- Left/Right Mouse drag: Changes camera heading.
- Up/Sown Mouse drag: Changes camera pitch.
- Scroll wheel: Changes camera field of view.
- I-Key: Displays Info panel with canvas size, image size and FPS.
17.Aug.2010, Martin Wengenmayer