I am using turn.js in my application and would like to implement the vertical flipping similar to http://pageflip-books.com/documentation-configuration.php - VerticalMode
Can anyone let me know, how can I implement the vertical flipping in turn.js?
Vertical flipping using turn.js
2.8k views Asked by needhelpinphp At
3
There are 3 answers
0
On
1. rotate each page -90deg
2. rotate the whole book(calendar) 90deg
3. change mouse(touch) event coordinate from vertical page horizontal one
turn.js-coordinate translate method
_translateCoordinate: function(e) {
if (!e) {
return e;
}
var data = this.data().f;
var pos = data.parent.offset();
var oldX = e.pageX - pos.left;
var oldY = e.pageY - pos.top;
var newX = oldY + pos.left;
var newY = this.height() - oldX + pos.top;
return {
pageX: newX,
pageY: newY
};
},
turn.js-coordinate translate usage
_eventMove: function(e) {
var data = this.data().f;
if (!data.disabled) {
e = (isTouch) ? e.originalEvent.touches : [e];
if (data.corner) {
var pos = data.parent.offset();
var posInNewCoordinate =
flipMethods._translateCoordinate.call(this, e[0]); // here
data.corner.x = posInNewCoordinate.pageX - pos.left;
data.corner.y = posInNewCoordinate.pageY - pos.top;
_cornerActivated: function(e) {
if (e.originalEvent === undefined) {
return false;
}
e = (isTouch) ? e.originalEvent.touches : [e];
var posInNewCoordinate =
flipMethods._translateCoordinate.call(this, e[0]); // here
var data = this.data().f,
pos = data.parent.offset(),
width = this.width(),
height = this.height(),
c = {
x: Math.max(0, posInNewCoordinate.pageX - pos.left),
y: Math.max(0, posInNewCoordinate.pageY - pos.top)
},
<!doctype html>
<html>
<head>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript" src="turn.js"></script>
<style type="text/css">
#calendar,
.calendar-wrapper {
transform-origin: 0% 0% 0px;
}
#calendar .turn-page {
background-image: url('paper-texture.png');
background-repeat: repeat;
}
.page-wrapper>.page {
height: 800px;
width: 600px;
transform-origin: 0% 0% 0px;
}
</style>
</head>
<body>
<div>
<div class="calendar-wrapper">
<div id="calendar">
<div class="page-wrapper">
<div class="page" style="background-image:url(pages/01.jpg);"></div>
</div>
<div class="page-wrapper">
<div class="page" style="background-image:url(pages/02.jpg);"></div>
</div>
<div class="page-wrapper">
<div class="page" style="background-image:url(pages/03.jpg);"></div>
</div>
<div class="page-wrapper">
<div class="page" style="background-image:url(pages/04.jpg);"></div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(window).ready(function() {
var $page = $('.page-wrapper>.page');
var $calendarWrapper = $('.calendar-wrapper');
var $pageWrapper = $('.page-wrapper');
var $calendar = $('#calendar');
var height = $page.height();
var width = $page.width();
$page.css('transform', `translate3d(0px, ${width}px, 0px) rotate(-90deg)`);
$calendarWrapper.height(width);
$calendarWrapper.width(height);
$calendarWrapper.css('transform', `translate3d(${width}px, 0px, 0px) rotate(90deg)`)
$pageWrapper.height(width);
$pageWrapper.width(height);
$calendar.height(width);
$calendar.width(height);
$calendar.turn({
display: 'single',
acceleration: true,
gradients: false,
gradients: !$.isTouch,
elevation: 50,
when: {
turned: function(e, page) {
/*console.log('Current view: ', $(this).turn('view'));*/
}
}
});
});
</script>
</body>
</html>
4
On
Rotating the container by -90 degrees and the pictures by 90 degrees does produce a vertical flip-book, but the mouse event co-ordinates do not get flipped, so the animated flipping does not work as expected—you have to hover the mouse in unexpected places, and make mouse gestures in unexpected directions to make it work.
Just rotate the continer div by 90 degrees, and then rotate internal childs by -90 degrees to cancel the rotation.