first commit 2
This commit is contained in:
hmw1001
@@ -0,0 +1,143 @@
|
||||
.turnjs-slider{
|
||||
width:600px;
|
||||
height:8px;
|
||||
background:rgba(0,0,0, 0.2);
|
||||
-webkit-border-radius:5px;
|
||||
-moz-border-radius:5px;
|
||||
-o-border-radius:5px;
|
||||
-ms-border-radius:5px;
|
||||
border-radius:5px;
|
||||
margin:20px auto;
|
||||
}
|
||||
|
||||
.turnjs-slider .thumbnail{
|
||||
width:115px;
|
||||
height:85px;
|
||||
position:absolute;
|
||||
background:rgba(0,0,0, 0.5);
|
||||
z-index:10000;
|
||||
top:-100px;
|
||||
left:-17px;
|
||||
display:none;
|
||||
|
||||
-webkit-transform:translate3d(0px, 50px, 0px) scale(0.1, 0.1);
|
||||
-webkit-transition:-webkit-transform 0.2s;
|
||||
-webkit-border-radius:5px;
|
||||
|
||||
-moz-transform:translate3d(0px, 50px, 0px) scale(0.1, 0.1);
|
||||
-moz-transition:-moz-transform 0.2s;
|
||||
-moz-border-radius:5px;
|
||||
|
||||
-o-transform:translate3d(0px, 50px, 0px) scale(0.1, 0.1);
|
||||
-o-transition:-o-transform 0.2s;
|
||||
-o-border-radius:5px;
|
||||
|
||||
-ms-transform:translate3d(0px, 50px, 0px) scale(0.1, 0.1);
|
||||
-ms-transition:-ms-transform 0.2s;
|
||||
-ms-border-radius:5px;
|
||||
|
||||
transform:translate3d(0px, 50px, 0px) scale(0.1, 0.1);
|
||||
transition:transform: 0.2s;
|
||||
border-radius:5px;
|
||||
}
|
||||
|
||||
.no-transition{
|
||||
-webkit-transition:none;
|
||||
-moz-transition:none;
|
||||
-o-transition:none;
|
||||
-ms-transition:none;
|
||||
}
|
||||
|
||||
.turnjs-slider .thumbnail div{
|
||||
width:100px;
|
||||
margin:7px;
|
||||
height:70px;
|
||||
background-color:white;
|
||||
}
|
||||
|
||||
.turnjs-slider .ui-state-hover .thumbnail{
|
||||
display:block;
|
||||
opacity:0;
|
||||
}
|
||||
|
||||
.turnjs-slider .ui-state-active .thumbnail{
|
||||
display:block;
|
||||
opacity:1;
|
||||
-webkit-transform:scale(1, 1);
|
||||
-moz-transform:scale(1, 1);
|
||||
-o-transform:scale(1, 1);
|
||||
-ms-transform:scale(1, 1);
|
||||
transform:scale(1, 1);
|
||||
}
|
||||
|
||||
/* Layout helpers
|
||||
----------------------------------*/
|
||||
|
||||
/* Interaction Cues
|
||||
----------------------------------*/
|
||||
.ui-state-disabled {
|
||||
cursor: default !important;
|
||||
}
|
||||
|
||||
/* Misc visuals
|
||||
----------------------------------*/
|
||||
|
||||
/* Overlays */
|
||||
.turnjs-slider .ui-widget-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.turnjs-slider .ui-slider {
|
||||
position: relative;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.turnjs-slider .ui-slider-handle{
|
||||
position: absolute;
|
||||
z-index:0;
|
||||
width:80px;
|
||||
height: 8px;
|
||||
cursor: default;
|
||||
-webkit-border-radius:5px;
|
||||
-moz-border-radius:5px;
|
||||
-ms-border-radius:5px;
|
||||
border-radius:5px;
|
||||
}
|
||||
|
||||
.turnjs-slider .ui-slider-horizontal {
|
||||
height: 8px;
|
||||
width:520px;
|
||||
margin-left:39px;
|
||||
}
|
||||
|
||||
.turnjs-slider .ui-slider-horizontal .ui-slider-handle {
|
||||
margin-left:-40px;
|
||||
margin-top:-1px;
|
||||
}
|
||||
|
||||
/* Interaction states
|
||||
----------------------------------*/
|
||||
.turnjs-slider .ui-slider-handle{
|
||||
border:1px solid white;
|
||||
background-color:black;
|
||||
opacity:0.2;
|
||||
display:block;
|
||||
-webkit-transition:opacity 0.2s;
|
||||
-moz-transition:opacity 0.2s;
|
||||
-ms-transition:opacity 0.2s;
|
||||
-o-transition:opacity 0.2s;
|
||||
transition:opacity 0.2s;
|
||||
}
|
||||
|
||||
.turnjs-slider .ui-state-hover{
|
||||
opacity:0.4;
|
||||
}
|
||||
|
||||
.turnjs-slider .ui-state-active{
|
||||
opacity:1;
|
||||
}
|
||||
|
||||
+16
@@ -0,0 +1,16 @@
|
||||
.turnjs-slide{
|
||||
width:600px;
|
||||
height:8px;
|
||||
background-color:#B4B4B4;
|
||||
border-radius:5px;
|
||||
margin:20px auto;
|
||||
}
|
||||
|
||||
.turnjs-slide .ui-slider .ui-slider-handle{
|
||||
background-color:#8F8F8F;
|
||||
z-index:10000;
|
||||
}
|
||||
|
||||
.turnjs-slide .thumbnail{
|
||||
background: #666;
|
||||
}
|
||||
@@ -0,0 +1,384 @@
|
||||
body{
|
||||
overflow:hidden;
|
||||
background-color:#fcfcfc;
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
.magazine-viewport .container{
|
||||
position:absolute;
|
||||
top:50%;
|
||||
left:50%;
|
||||
width:922px;
|
||||
height:600px;
|
||||
margin:auto;
|
||||
}
|
||||
|
||||
.magazine-viewport .magazine{
|
||||
width:922px;
|
||||
height:600px;
|
||||
left:-461px;
|
||||
top:-300px;
|
||||
}
|
||||
|
||||
.magazine-viewport .page{
|
||||
width:461px;
|
||||
height:600px;
|
||||
background-color:white;
|
||||
background-repeat:no-repeat;
|
||||
background-size:100% 100%;
|
||||
}
|
||||
|
||||
.magazine-viewport .zoomer .region{
|
||||
display:none;
|
||||
}
|
||||
|
||||
.magazine .region{
|
||||
position:absolute;
|
||||
overflow:hidden;
|
||||
background:#0066FF;
|
||||
opacity:0.2;
|
||||
-webkit-border-radius:10px;
|
||||
-moz-border-radius:10px;
|
||||
-ms-border-radius:10px;
|
||||
-o-border-radius:10px;
|
||||
border-radius:10px;
|
||||
cursor:pointer;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
|
||||
filter: alpha(opacity=20);
|
||||
}
|
||||
|
||||
.magazine .region:hover{
|
||||
opacity:0.5;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
|
||||
filter: alpha(opacity=50);
|
||||
}
|
||||
|
||||
.magazine .region.zoom{
|
||||
opacity:0.01;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";
|
||||
filter: alpha(opacity=1);
|
||||
}
|
||||
|
||||
.magazine .region.zoom:hover{
|
||||
opacity:0.2;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
|
||||
filter: alpha(opacity=20);
|
||||
}
|
||||
|
||||
.magazine .page{
|
||||
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.2);
|
||||
-moz-box-shadow:0 0 20px rgba(0,0,0,0.2);
|
||||
-ms-box-shadow:0 0 20px rgba(0,0,0,0.2);
|
||||
-o-box-shadow:0 0 20px rgba(0,0,0,0.2);
|
||||
box-shadow:0 0 20px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.magazine-viewport .page img{
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
.magazine .even .gradient{
|
||||
position:absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
width:100%;
|
||||
height:100%;
|
||||
|
||||
background:-webkit-gradient(linear, left top, right top, color-stop(0.95, rgba(0,0,0,0)), color-stop(1, rgba(0,0,0,0.2)));
|
||||
background-image:-webkit-linear-gradient(left, rgba(0,0,0,0) 95%, rgba(0,0,0,0.2) 100%);
|
||||
background-image:-moz-linear-gradient(left, rgba(0,0,0,0) 95%, rgba(0,0,0,0.2) 100%);
|
||||
background-image:-ms-linear-gradient(left, rgba(0,0,0,0) 95%, rgba(0,0,0,0.2) 100%);
|
||||
background-image:-o-linear-gradient(left, rgba(0,0,0,0) 95%, rgba(0,0,0,0.2) 100%);
|
||||
background-image:linear-gradient(left, rgba(0,0,0,0) 95%, rgba(0,0,0,0.2) 100%);
|
||||
}
|
||||
|
||||
.magazine .odd .gradient{
|
||||
position:absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
width:100%;
|
||||
height:100%;
|
||||
|
||||
background:-webkit-gradient(linear, right top, left top, color-stop(0.95, rgba(0,0,0,0)), color-stop(1, rgba(0,0,0,0.15)));
|
||||
background-image:-webkit-linear-gradient(right, rgba(0,0,0,0) 95%, rgba(0,0,0,0.15) 100%);
|
||||
background-image:-moz-linear-gradient(right, rgba(0,0,0,0) 95%, rgba(0,0,0,0.15) 100%);
|
||||
background-image:-ms-linear-gradient(right, rgba(0,0,0,0) 95%, rgba(0,0,0,0.15) 100%);
|
||||
background-image:-o-linear-gradient(right, rgba(0,0,0,0) 95%, rgba(0,0,0,0.15) 100%);
|
||||
background-image:linear-gradient(right, rgba(0,0,0,0) 95%, rgba(0,0,0,0.15) 100%);
|
||||
}
|
||||
|
||||
.magazine-viewport .zoom-in .even .gradient,
|
||||
.magazine-viewport .zoom-in .odd .gradient{
|
||||
|
||||
display:none;
|
||||
|
||||
}
|
||||
|
||||
.magazine-viewport .loader{
|
||||
background-image:url(../pics/loader.gif);
|
||||
width:22px;
|
||||
height:22px;
|
||||
position:absolute;
|
||||
top:280px;
|
||||
left:219px;
|
||||
}
|
||||
|
||||
.magazine-viewport .shadow{
|
||||
-webkit-transition: -webkit-box-shadow 0.5s;
|
||||
-moz-transition: -moz-box-shadow 0.5s;
|
||||
-o-transition: -webkit-box-shadow 0.5s;
|
||||
-ms-transition: -ms-box-shadow 0.5s;
|
||||
|
||||
-webkit-box-shadow:0 0 20px #ccc;
|
||||
-moz-box-shadow:0 0 20px #ccc;
|
||||
-o-box-shadow:0 0 20px #ccc;
|
||||
-ms-box-shadow:0 0 20px #ccc;
|
||||
box-shadow:0 0 20px #ccc;
|
||||
}
|
||||
|
||||
.magazine-viewport .next-button,
|
||||
.magazine-viewport .previous-button{
|
||||
width:22px;
|
||||
height:600px;
|
||||
position:absolute;
|
||||
top:0;
|
||||
}
|
||||
|
||||
.magazine-viewport .next-button{
|
||||
right:-22px;
|
||||
-webkit-border-radius:0 15px 15px 0;
|
||||
-moz-border-radius:0 15px 15px 0;
|
||||
-ms-border-radius:0 15px 15px 0;
|
||||
-o-border-radius:0 15px 15px 0;
|
||||
border-radius:0 15px 15px 0;
|
||||
}
|
||||
|
||||
.magazine-viewport .previous-button{
|
||||
left:-22px;
|
||||
-webkit-border-radius:15px 0 0 15px;
|
||||
-moz-border-radius:15px 0 0 15px;
|
||||
-ms-border-radius:15px 0 0 15px;
|
||||
-o-border-radius:15px 0 0 15px;
|
||||
border-radius:15px 0 0 15px;
|
||||
}
|
||||
|
||||
.magazine-viewport .previous-button-hover,
|
||||
.magazine-viewport .next-button-hover{
|
||||
background-color:rgba(0,0,0, 0.2);
|
||||
}
|
||||
|
||||
.magazine-viewport .previous-button-hover,
|
||||
.magazine-viewport .previous-button-down{
|
||||
background-image:url(../pics/arrows.png);
|
||||
background-position:-4px 284px;
|
||||
background-repeat:no-repeat;
|
||||
}
|
||||
|
||||
.magazine-viewport .previous-button-down,
|
||||
.magazine-viewport .next-button-down{
|
||||
background-color:rgba(0,0,0, 0.4);
|
||||
}
|
||||
|
||||
.magazine-viewport .next-button-hover,
|
||||
.magazine-viewport .next-button-down{
|
||||
background-image:url(../pics/arrows.png);
|
||||
background-position:-38px 284px;
|
||||
background-repeat:no-repeat;
|
||||
}
|
||||
|
||||
.magazine-viewport .zoom-in .next-button,
|
||||
.magazine-viewport .zoom-in .previous-button{
|
||||
display:none;
|
||||
}
|
||||
|
||||
.animated{
|
||||
-webkit-transition:margin-left 0.5s;
|
||||
-moz-transition:margin-left 0.5s;
|
||||
-ms-transition:margin-left 0.5s;
|
||||
-o-transition:margin-left 0.5s;
|
||||
transition:margin-left 0.5s;
|
||||
}
|
||||
|
||||
.thumbnails{
|
||||
position:absolute;
|
||||
bottom:0;
|
||||
left:0;
|
||||
width:100%;
|
||||
height:140px;
|
||||
z-index:1;
|
||||
}
|
||||
|
||||
.thumbnails > div{
|
||||
width:1050px;
|
||||
height:100px;
|
||||
margin:20px auto;
|
||||
}
|
||||
|
||||
.thumbnails ul{
|
||||
margin:0;
|
||||
padding:0;
|
||||
text-align:center;
|
||||
-webkit-transform:scale3d(0.5, 0.5, 1);
|
||||
-moz-transform:scale3d(0.5, 0.5, 1);
|
||||
-o-transform:scale3d(0.5, 0.5, 1);
|
||||
-ms-transform:scale3d(0.5, 0.5, 1);
|
||||
transform:scale3d(0.5, 0.5, 1);
|
||||
-webkit-transition:-webkit-transform ease-in-out 100ms;
|
||||
-moz-transition:-moz-transform ease-in-out 100ms;
|
||||
-ms-transition:-ms-transform ease-in-out 100ms;
|
||||
-o-transition:-o-transform ease-in-out 100ms;
|
||||
transition:transform ease-in-out 100ms;
|
||||
}
|
||||
|
||||
.thumbanils-touch ul{
|
||||
-webkit-transform:none;
|
||||
-moz-transform:none;
|
||||
-o-transform:none;
|
||||
-ms-transform:none;
|
||||
transform:none;
|
||||
}
|
||||
|
||||
.thumbnails-hover ul{
|
||||
-webkit-transform:scale3d(0.6, 0.6, 1);
|
||||
-moz-transform:scale3d(0.6, 0.6, 1);
|
||||
-o-transform:scale3d(0.6, 0.6, 1);
|
||||
-ms-transform:scale3d(0.6, 0.6, 1);
|
||||
transform:scale3d(0.6, 0.6, 1);
|
||||
}
|
||||
|
||||
.thumbnails li{
|
||||
list-style:none;
|
||||
display:inline-block;
|
||||
margin:0 5px;
|
||||
-webkit-box-shadow:0 0 10px #ccc;
|
||||
-moz-box-shadow:0 0 10px #ccc;
|
||||
-ms-box-shadow:0 0 10px #ccc;
|
||||
-o-box-shadow:0 0 10px #ccc;
|
||||
box-shadow:0 0 10px #ccc;
|
||||
-webkit-transition:-webkit-transform 60ms;
|
||||
-moz-transition:-webkit-transform 60ms;
|
||||
-o-transition:-webkit-transform 60ms;
|
||||
-ms-transition:-webkit-transform 60ms;
|
||||
transition:-webkit-transform 60ms;
|
||||
}
|
||||
|
||||
.thumbnails li span{
|
||||
display:none;
|
||||
}
|
||||
|
||||
.thumbnails .current{
|
||||
-webkit-box-shadow:0 0 10px red;
|
||||
-moz-box-shadow:0 0 10px red;
|
||||
-ms-box-shadow:0 0 10px red;
|
||||
-o-box-shadow:0 0 10px red;
|
||||
box-shadow:0 0 10px red;
|
||||
}
|
||||
|
||||
.thumbnails .thumb-hover{
|
||||
-webkit-transform:scale3d(1.3, 1.3, 1);
|
||||
-moz-transform:scale3d(1.3, 1.3, 1);
|
||||
-o-transform:scale3d(1.3, 1.3, 1);
|
||||
-ms-transform:scale3d(1.3, 1.3, 1);
|
||||
transform:scale3d(1.3, 1.3, 1);
|
||||
|
||||
-webkit-box-shadow:0 0 10px #666;
|
||||
-moz-box-shadow:0 0 10px #666;
|
||||
-ms-box-shadow:0 0 10px #666;
|
||||
-o-box-shadow:0 0 10px #666;
|
||||
box-shadow:0 0 10px #666;
|
||||
}
|
||||
|
||||
.thumbanils-touch .thumb-hover{
|
||||
-webkit-transform:none;
|
||||
-moz-transform:none;
|
||||
-o-transform:none;
|
||||
-ms-transform:none;
|
||||
transform:none;
|
||||
}
|
||||
|
||||
.thumbnails .thumb-hover span{
|
||||
position:absolute;
|
||||
bottom:-30px;
|
||||
left:0;
|
||||
z-index:2;
|
||||
width:100%;
|
||||
height:30px;
|
||||
font:bold 15px arial;
|
||||
line-height:30px;
|
||||
color:#666;
|
||||
display:block;
|
||||
cursor:default;
|
||||
}
|
||||
|
||||
.thumbnails img{
|
||||
float:left;
|
||||
}
|
||||
|
||||
.exit-message{
|
||||
position: absolute;
|
||||
top:10px;
|
||||
left:0;
|
||||
width:100%;
|
||||
height:40px;
|
||||
z-index:10000;
|
||||
}
|
||||
|
||||
.exit-message > div{
|
||||
width:140px;
|
||||
height:30px;
|
||||
margin:auto;
|
||||
background:rgba(0,0,0,0.5);
|
||||
text-align:center;
|
||||
font:12px arial;
|
||||
line-height:30px;
|
||||
color:white;
|
||||
-webkit-border-radius:10px;
|
||||
-moz-border-radius:10px;
|
||||
-ms-border-radius:10px;
|
||||
-o-border-radius:10px;
|
||||
border-radius:10px;
|
||||
}
|
||||
|
||||
.zoom-icon{
|
||||
position:absolute;
|
||||
z-index:1000;
|
||||
width:22px;
|
||||
height:22px;
|
||||
top:10px;
|
||||
right:10px;
|
||||
background-image:url(../pics/zoom-icons.png);
|
||||
background-size:88px 22px;
|
||||
}
|
||||
|
||||
.zoom-icon-in{
|
||||
background-position:0 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.zoom-icon-in.zoom-icon-in-hover{
|
||||
background-position:-22px 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.zoom-icon-out{
|
||||
background-position:-44px 0;
|
||||
}
|
||||
|
||||
.zoom-icon-out.zoom-icon-out-hover{
|
||||
background-position:-66px 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.bottom{
|
||||
position:absolute;
|
||||
left:0;
|
||||
bottom:0;
|
||||
width:100%;
|
||||
}
|
||||
@@ -0,0 +1,469 @@
|
||||
<!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>Using turn.js and the new zoom feature</title>
|
||||
<meta name="viewport" content="width = 1050, user-scalable = no" />
|
||||
<script type="text/javascript" src="../../extras/jquery.min.1.7.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 class="zoom-icon zoom-icon-in"></div>
|
||||
|
||||
<div class="magazine-viewport">
|
||||
<div class="container">
|
||||
<div class="magazine">
|
||||
<!-- Next button -->
|
||||
<div ignore="1" class="next-button"></div>
|
||||
<!-- Previous button -->
|
||||
<div ignore="1" class="previous-button"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Thumbnails -->
|
||||
<div class="thumbnails">
|
||||
<div>
|
||||
<ul>
|
||||
<li class="i">
|
||||
<img src="pages/1-thumb.jpg" width="76" height="100" class="page-1">
|
||||
<span>1</span>
|
||||
</li>
|
||||
<li class="d">
|
||||
<img src="pages/2-thumb.jpg" width="76" height="100" class="page-2">
|
||||
<img src="pages/3-thumb.jpg" width="76" height="100" class="page-3">
|
||||
<span>2-3</span>
|
||||
</li>
|
||||
<li class="d">
|
||||
<img src="pages/4-thumb.jpg" width="76" height="100" class="page-4">
|
||||
<img src="pages/5-thumb.jpg" width="76" height="100" class="page-5">
|
||||
<span>4-5</span>
|
||||
</li>
|
||||
<li class="d">
|
||||
<img src="pages/6-thumb.jpg" width="76" height="100" class="page-6">
|
||||
<img src="pages/7-thumb.jpg" width="76" height="100" class="page-7">
|
||||
<span>6-7</span>
|
||||
</li>
|
||||
<li class="d">
|
||||
<img src="pages/8-thumb.jpg" width="76" height="100" class="page-8">
|
||||
<img src="pages/9-thumb.jpg" width="76" height="100" class="page-9">
|
||||
<span>8-9</span>
|
||||
</li>
|
||||
<li class="d">
|
||||
<img src="pages/10-thumb.jpg" width="76" height="100" class="page-10">
|
||||
<img src="pages/11-thumb.jpg" width="76" height="100" class="page-11">
|
||||
<span>10-11</span>
|
||||
</li>
|
||||
<li class="i">
|
||||
<img src="pages/12-thumb.jpg" width="76" height="100" class="page-12">
|
||||
<span>12</span>
|
||||
</li>
|
||||
<ul>
|
||||
<div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
function loadApp() {
|
||||
|
||||
$('#canvas').fadeIn(1000);
|
||||
|
||||
var flipbook = $('.magazine');
|
||||
|
||||
// Check if the CSS was already loaded
|
||||
|
||||
if (flipbook.width()==0 || flipbook.height()==0) {
|
||||
setTimeout(loadApp, 10);
|
||||
return;
|
||||
}
|
||||
|
||||
// Create the flipbook
|
||||
|
||||
flipbook.turn({
|
||||
|
||||
// Magazine width
|
||||
|
||||
width: 922,
|
||||
|
||||
// Magazine height
|
||||
|
||||
height: 600,
|
||||
|
||||
// Duration in millisecond
|
||||
|
||||
duration: 1000,
|
||||
|
||||
// Hardware acceleration
|
||||
|
||||
acceleration: !isChrome(),
|
||||
|
||||
// Enables gradients
|
||||
|
||||
gradients: true,
|
||||
|
||||
// Auto center this flipbook
|
||||
|
||||
autoCenter: true,
|
||||
|
||||
// Elevation from the edge of the flipbook when turning a page
|
||||
|
||||
elevation: 50,
|
||||
|
||||
// The number of pages
|
||||
|
||||
pages: 12,
|
||||
|
||||
// Events
|
||||
|
||||
when: {
|
||||
turning: function(event, page, view) {
|
||||
|
||||
var book = $(this),
|
||||
currentPage = book.turn('page'),
|
||||
pages = book.turn('pages');
|
||||
|
||||
// Update the current URI
|
||||
|
||||
Hash.go('page/' + page).update();
|
||||
|
||||
// Show and hide navigation buttons
|
||||
|
||||
disableControls(page);
|
||||
|
||||
|
||||
$('.thumbnails .page-'+currentPage).
|
||||
parent().
|
||||
removeClass('current');
|
||||
|
||||
$('.thumbnails .page-'+page).
|
||||
parent().
|
||||
addClass('current');
|
||||
|
||||
|
||||
|
||||
},
|
||||
|
||||
turned: function(event, page, view) {
|
||||
|
||||
disableControls(page);
|
||||
|
||||
$(this).turn('center');
|
||||
|
||||
if (page==1) {
|
||||
$(this).turn('peel', 'br');
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
missing: function (event, pages) {
|
||||
|
||||
// Add pages that aren't in the magazine
|
||||
|
||||
for (var i = 0; i < pages.length; i++)
|
||||
addPage(pages[i], $(this));
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
// Zoom.js
|
||||
|
||||
$('.magazine-viewport').zoom({
|
||||
flipbook: $('.magazine'),
|
||||
|
||||
max: function() {
|
||||
|
||||
return largeMagazineWidth()/$('.magazine').width();
|
||||
|
||||
},
|
||||
|
||||
when: {
|
||||
|
||||
swipeLeft: function() {
|
||||
|
||||
$(this).zoom('flipbook').turn('next');
|
||||
|
||||
},
|
||||
|
||||
swipeRight: function() {
|
||||
|
||||
$(this).zoom('flipbook').turn('previous');
|
||||
|
||||
},
|
||||
|
||||
resize: function(event, scale, page, pageElement) {
|
||||
|
||||
if (scale==1)
|
||||
loadSmallPage(page, pageElement);
|
||||
else
|
||||
loadLargePage(page, pageElement);
|
||||
|
||||
},
|
||||
|
||||
zoomIn: function () {
|
||||
|
||||
$('.thumbnails').hide();
|
||||
$('.made').hide();
|
||||
$('.magazine').removeClass('animated').addClass('zoom-in');
|
||||
$('.zoom-icon').removeClass('zoom-icon-in').addClass('zoom-icon-out');
|
||||
|
||||
if (!window.escTip && !$.isTouch) {
|
||||
escTip = true;
|
||||
|
||||
$('<div />', {'class': 'exit-message'}).
|
||||
html('<div>Press ESC to exit</div>').
|
||||
appendTo($('body')).
|
||||
delay(2000).
|
||||
animate({opacity:0}, 500, function() {
|
||||
$(this).remove();
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
zoomOut: function () {
|
||||
|
||||
$('.exit-message').hide();
|
||||
$('.thumbnails').fadeIn();
|
||||
$('.made').fadeIn();
|
||||
$('.zoom-icon').removeClass('zoom-icon-out').addClass('zoom-icon-in');
|
||||
|
||||
setTimeout(function(){
|
||||
$('.magazine').addClass('animated').removeClass('zoom-in');
|
||||
resizeViewport();
|
||||
}, 0);
|
||||
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Zoom event
|
||||
|
||||
if ($.isTouch)
|
||||
$('.magazine-viewport').bind('zoom.doubleTap', zoomTo);
|
||||
else
|
||||
$('.magazine-viewport').bind('zoom.tap', zoomTo);
|
||||
|
||||
|
||||
// Using arrow keys to turn the page
|
||||
|
||||
$(document).keydown(function(e){
|
||||
|
||||
var previous = 37, next = 39, esc = 27;
|
||||
|
||||
switch (e.keyCode) {
|
||||
case previous:
|
||||
|
||||
// left arrow
|
||||
$('.magazine').turn('previous');
|
||||
e.preventDefault();
|
||||
|
||||
break;
|
||||
case next:
|
||||
|
||||
//right arrow
|
||||
$('.magazine').turn('next');
|
||||
e.preventDefault();
|
||||
|
||||
break;
|
||||
case esc:
|
||||
|
||||
$('.magazine-viewport').zoom('zoomOut');
|
||||
e.preventDefault();
|
||||
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
// URIs - Format #/page/1
|
||||
|
||||
Hash.on('^page\/([0-9]*)$', {
|
||||
yep: function(path, parts) {
|
||||
var page = parts[1];
|
||||
|
||||
if (page!==undefined) {
|
||||
if ($('.magazine').turn('is'))
|
||||
$('.magazine').turn('page', page);
|
||||
}
|
||||
|
||||
},
|
||||
nop: function(path) {
|
||||
|
||||
if ($('.magazine').turn('is'))
|
||||
$('.magazine').turn('page', 1);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
$(window).resize(function() {
|
||||
resizeViewport();
|
||||
}).bind('orientationchange', function() {
|
||||
resizeViewport();
|
||||
});
|
||||
|
||||
// Events for thumbnails
|
||||
|
||||
$('.thumbnails').click(function(event) {
|
||||
|
||||
var page;
|
||||
|
||||
if (event.target && (page=/page-([0-9]+)/.exec($(event.target).attr('class'))) ) {
|
||||
|
||||
$('.magazine').turn('page', page[1]);
|
||||
}
|
||||
});
|
||||
|
||||
$('.thumbnails li').
|
||||
bind($.mouseEvents.over, function() {
|
||||
|
||||
$(this).addClass('thumb-hover');
|
||||
|
||||
}).bind($.mouseEvents.out, function() {
|
||||
|
||||
$(this).removeClass('thumb-hover');
|
||||
|
||||
});
|
||||
|
||||
if ($.isTouch) {
|
||||
|
||||
$('.thumbnails').
|
||||
addClass('thumbanils-touch').
|
||||
bind($.mouseEvents.move, function(event) {
|
||||
event.preventDefault();
|
||||
});
|
||||
|
||||
} else {
|
||||
|
||||
$('.thumbnails ul').mouseover(function() {
|
||||
|
||||
$('.thumbnails').addClass('thumbnails-hover');
|
||||
|
||||
}).mousedown(function() {
|
||||
|
||||
return false;
|
||||
|
||||
}).mouseout(function() {
|
||||
|
||||
$('.thumbnails').removeClass('thumbnails-hover');
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Regions
|
||||
|
||||
if ($.isTouch) {
|
||||
$('.magazine').bind('touchstart', regionClick);
|
||||
} else {
|
||||
$('.magazine').click(regionClick);
|
||||
}
|
||||
|
||||
// Events for the next button
|
||||
|
||||
$('.next-button').bind($.mouseEvents.over, function() {
|
||||
|
||||
$(this).addClass('next-button-hover');
|
||||
|
||||
}).bind($.mouseEvents.out, function() {
|
||||
|
||||
$(this).removeClass('next-button-hover');
|
||||
|
||||
}).bind($.mouseEvents.down, function() {
|
||||
|
||||
$(this).addClass('next-button-down');
|
||||
|
||||
}).bind($.mouseEvents.up, function() {
|
||||
|
||||
$(this).removeClass('next-button-down');
|
||||
|
||||
}).click(function() {
|
||||
|
||||
$('.magazine').turn('next');
|
||||
|
||||
});
|
||||
|
||||
// Events for the next button
|
||||
|
||||
$('.previous-button').bind($.mouseEvents.over, function() {
|
||||
|
||||
$(this).addClass('previous-button-hover');
|
||||
|
||||
}).bind($.mouseEvents.out, function() {
|
||||
|
||||
$(this).removeClass('previous-button-hover');
|
||||
|
||||
}).bind($.mouseEvents.down, function() {
|
||||
|
||||
$(this).addClass('previous-button-down');
|
||||
|
||||
}).bind($.mouseEvents.up, function() {
|
||||
|
||||
$(this).removeClass('previous-button-down');
|
||||
|
||||
}).click(function() {
|
||||
|
||||
$('.magazine').turn('previous');
|
||||
|
||||
});
|
||||
|
||||
|
||||
resizeViewport();
|
||||
|
||||
$('.magazine').addClass('animated');
|
||||
|
||||
}
|
||||
|
||||
// Zoom icon
|
||||
|
||||
$('.zoom-icon').bind('mouseover', function() {
|
||||
|
||||
if ($(this).hasClass('zoom-icon-in'))
|
||||
$(this).addClass('zoom-icon-in-hover');
|
||||
|
||||
if ($(this).hasClass('zoom-icon-out'))
|
||||
$(this).addClass('zoom-icon-out-hover');
|
||||
|
||||
}).bind('mouseout', function() {
|
||||
|
||||
if ($(this).hasClass('zoom-icon-in'))
|
||||
$(this).removeClass('zoom-icon-in-hover');
|
||||
|
||||
if ($(this).hasClass('zoom-icon-out'))
|
||||
$(this).removeClass('zoom-icon-out-hover');
|
||||
|
||||
}).bind('click', function() {
|
||||
|
||||
if ($(this).hasClass('zoom-icon-in'))
|
||||
$('.magazine-viewport').zoom('zoomIn');
|
||||
else if ($(this).hasClass('zoom-icon-out'))
|
||||
$('.magazine-viewport').zoom('zoomOut');
|
||||
|
||||
});
|
||||
|
||||
$('#canvas').hide();
|
||||
|
||||
|
||||
// Load the HTML4 version if there's not CSS transform
|
||||
|
||||
yepnope({
|
||||
test : Modernizr.csstransforms,
|
||||
yep: ['../../lib/turn.js'],
|
||||
nope: ['../../lib/turn.html4.min.js'],
|
||||
both: ['../../lib/zoom.min.js', 'js/magazine.js', 'css/magazine.css'],
|
||||
complete: loadApp
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,385 @@
|
||||
/*
|
||||
* Magazine sample
|
||||
*/
|
||||
|
||||
function addPage(page, book) {
|
||||
|
||||
var id, pages = book.turn('pages');
|
||||
|
||||
// Create a new element for this page
|
||||
var element = $('<div />', {});
|
||||
|
||||
// Add the page to the flipbook
|
||||
if (book.turn('addPage', element, page)) {
|
||||
|
||||
// Add the initial HTML
|
||||
// It will contain a loader indicator and a gradient
|
||||
element.html('<div class="gradient"></div><div class="loader"></div>');
|
||||
|
||||
// Load the page
|
||||
loadPage(page, element);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function loadPage(page, pageElement) {
|
||||
|
||||
// Create an image element
|
||||
|
||||
var img = $('<img />');
|
||||
|
||||
img.mousedown(function(e) {
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
img.load(function() {
|
||||
|
||||
// Set the size
|
||||
$(this).css({width: '100%', height: '100%'});
|
||||
|
||||
// Add the image to the page after loaded
|
||||
|
||||
$(this).appendTo(pageElement);
|
||||
|
||||
// Remove the loader indicator
|
||||
|
||||
pageElement.find('.loader').remove();
|
||||
});
|
||||
|
||||
// Load the page
|
||||
|
||||
img.attr('src', 'pages/' + page + '.jpg');
|
||||
|
||||
loadRegions(page, pageElement);
|
||||
|
||||
}
|
||||
|
||||
// Zoom in / Zoom out
|
||||
|
||||
function zoomTo(event) {
|
||||
|
||||
setTimeout(function() {
|
||||
if ($('.magazine-viewport').data().regionClicked) {
|
||||
$('.magazine-viewport').data().regionClicked = false;
|
||||
} else {
|
||||
if ($('.magazine-viewport').zoom('value')==1) {
|
||||
$('.magazine-viewport').zoom('zoomIn', event);
|
||||
} else {
|
||||
$('.magazine-viewport').zoom('zoomOut');
|
||||
}
|
||||
}
|
||||
}, 1);
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Load regions
|
||||
|
||||
function loadRegions(page, element) {
|
||||
|
||||
$.getJSON('pages/'+page+'-regions.json').
|
||||
done(function(data) {
|
||||
|
||||
$.each(data, function(key, region) {
|
||||
addRegion(region, element);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Add region
|
||||
|
||||
function addRegion(region, pageElement) {
|
||||
|
||||
var reg = $('<div />', {'class': 'region ' + region['class']}),
|
||||
options = $('.magazine').turn('options'),
|
||||
pageWidth = options.width/2,
|
||||
pageHeight = options.height;
|
||||
|
||||
reg.css({
|
||||
top: Math.round(region.y/pageHeight*100)+'%',
|
||||
left: Math.round(region.x/pageWidth*100)+'%',
|
||||
width: Math.round(region.width/pageWidth*100)+'%',
|
||||
height: Math.round(region.height/pageHeight*100)+'%'
|
||||
}).attr('region-data', $.param(region.data||''));
|
||||
|
||||
|
||||
reg.appendTo(pageElement);
|
||||
}
|
||||
|
||||
// Process click on a region
|
||||
|
||||
function regionClick(event) {
|
||||
|
||||
var region = $(event.target);
|
||||
|
||||
if (region.hasClass('region')) {
|
||||
|
||||
$('.magazine-viewport').data().regionClicked = true;
|
||||
|
||||
setTimeout(function() {
|
||||
$('.magazine-viewport').data().regionClicked = false;
|
||||
}, 100);
|
||||
|
||||
var regionType = $.trim(region.attr('class').replace('region', ''));
|
||||
|
||||
return processRegion(region, regionType);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Process the data of every region
|
||||
|
||||
function processRegion(region, regionType) {
|
||||
|
||||
data = decodeParams(region.attr('region-data'));
|
||||
|
||||
switch (regionType) {
|
||||
case 'link' :
|
||||
|
||||
window.open(data.url);
|
||||
|
||||
break;
|
||||
case 'zoom' :
|
||||
|
||||
var regionOffset = region.offset(),
|
||||
viewportOffset = $('.magazine-viewport').offset(),
|
||||
pos = {
|
||||
x: regionOffset.left-viewportOffset.left,
|
||||
y: regionOffset.top-viewportOffset.top
|
||||
};
|
||||
|
||||
$('.magazine-viewport').zoom('zoomIn', pos);
|
||||
|
||||
break;
|
||||
case 'to-page' :
|
||||
|
||||
$('.magazine').turn('page', data.page);
|
||||
|
||||
break;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Load large page
|
||||
|
||||
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 page
|
||||
|
||||
function loadSmallPage(page, pageElement) {
|
||||
|
||||
var img = pageElement.find('img');
|
||||
|
||||
img.css({width: '100%', height: '100%'});
|
||||
|
||||
img.unbind('load');
|
||||
// Loadnew page
|
||||
|
||||
img.attr('src', 'pages/' + page + '.jpg');
|
||||
}
|
||||
|
||||
// http://code.google.com/p/chromium/issues/detail?id=128488
|
||||
|
||||
function isChrome() {
|
||||
|
||||
return navigator.userAgent.indexOf('Chrome')!=-1;
|
||||
|
||||
}
|
||||
|
||||
function disableControls(page) {
|
||||
if (page==1)
|
||||
$('.previous-button').hide();
|
||||
else
|
||||
$('.previous-button').show();
|
||||
|
||||
if (page==$('.magazine').turn('pages'))
|
||||
$('.next-button').hide();
|
||||
else
|
||||
$('.next-button').show();
|
||||
}
|
||||
|
||||
// Set the width and height for the viewport
|
||||
|
||||
function resizeViewport() {
|
||||
|
||||
var width = $(window).width(),
|
||||
height = $(window).height(),
|
||||
options = $('.magazine').turn('options');
|
||||
|
||||
$('.magazine').removeClass('animated');
|
||||
|
||||
$('.magazine-viewport').css({
|
||||
width: width,
|
||||
height: height
|
||||
}).
|
||||
zoom('resize');
|
||||
|
||||
|
||||
if ($('.magazine').turn('zoom')==1) {
|
||||
var bound = calculateBound({
|
||||
width: options.width,
|
||||
height: options.height,
|
||||
boundWidth: Math.min(options.width, width),
|
||||
boundHeight: Math.min(options.height, height)
|
||||
});
|
||||
|
||||
if (bound.width%2!==0)
|
||||
bound.width-=1;
|
||||
|
||||
|
||||
if (bound.width!=$('.magazine').width() || bound.height!=$('.magazine').height()) {
|
||||
|
||||
$('.magazine').turn('size', bound.width, bound.height);
|
||||
|
||||
if ($('.magazine').turn('page')==1)
|
||||
$('.magazine').turn('peel', 'br');
|
||||
|
||||
$('.next-button').css({height: bound.height, backgroundPosition: '-38px '+(bound.height/2-32/2)+'px'});
|
||||
$('.previous-button').css({height: bound.height, backgroundPosition: '-4px '+(bound.height/2-32/2)+'px'});
|
||||
}
|
||||
|
||||
$('.magazine').css({top: -bound.height/2, left: -bound.width/2});
|
||||
}
|
||||
|
||||
var magazineOffset = $('.magazine').offset(),
|
||||
boundH = height - magazineOffset.top - $('.magazine').height(),
|
||||
marginTop = (boundH - $('.thumbnails > div').height()) / 2;
|
||||
|
||||
if (marginTop<0) {
|
||||
$('.thumbnails').css({height:1});
|
||||
} else {
|
||||
$('.thumbnails').css({height: boundH});
|
||||
$('.thumbnails > div').css({marginTop: marginTop});
|
||||
}
|
||||
|
||||
if (magazineOffset.top<$('.made').height())
|
||||
$('.made').hide();
|
||||
else
|
||||
$('.made').show();
|
||||
|
||||
$('.magazine').addClass('animated');
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Number of views in a flipbook
|
||||
|
||||
function numberOfViews(book) {
|
||||
return book.turn('pages') / 2 + 1;
|
||||
}
|
||||
|
||||
// Current view in a flipbook
|
||||
|
||||
function getViewNumber(book, page) {
|
||||
return parseInt((page || book.turn('page'))/2 + 1, 10);
|
||||
}
|
||||
|
||||
function moveBar(yes) {
|
||||
if (Modernizr && Modernizr.csstransforms) {
|
||||
$('#slider .ui-slider-handle').css({zIndex: yes ? -1 : 10000});
|
||||
}
|
||||
}
|
||||
|
||||
function setPreview(view) {
|
||||
|
||||
var previewWidth = 112,
|
||||
previewHeight = 73,
|
||||
previewSrc = 'pages/preview.jpg',
|
||||
preview = $(_thumbPreview.children(':first')),
|
||||
numPages = (view==1 || view==$('#slider').slider('option', 'max')) ? 1 : 2,
|
||||
width = (numPages==1) ? previewWidth/2 : previewWidth;
|
||||
|
||||
_thumbPreview.
|
||||
addClass('no-transition').
|
||||
css({width: width + 15,
|
||||
height: previewHeight + 15,
|
||||
top: -previewHeight - 30,
|
||||
left: ($($('#slider').children(':first')).width() - width - 15)/2
|
||||
});
|
||||
|
||||
preview.css({
|
||||
width: width,
|
||||
height: previewHeight
|
||||
});
|
||||
|
||||
if (preview.css('background-image')==='' ||
|
||||
preview.css('background-image')=='none') {
|
||||
|
||||
preview.css({backgroundImage: 'url(' + previewSrc + ')'});
|
||||
|
||||
setTimeout(function(){
|
||||
_thumbPreview.removeClass('no-transition');
|
||||
}, 0);
|
||||
|
||||
}
|
||||
|
||||
preview.css({backgroundPosition:
|
||||
'0px -'+((view-1)*previewHeight)+'px'
|
||||
});
|
||||
}
|
||||
|
||||
// Width of the flipbook when zoomed in
|
||||
|
||||
function largeMagazineWidth() {
|
||||
|
||||
return 2214;
|
||||
|
||||
}
|
||||
|
||||
// decode URL Parameters
|
||||
|
||||
function decodeParams(data) {
|
||||
|
||||
var parts = data.split('&'), d, obj = {};
|
||||
|
||||
for (var i =0; i<parts.length; i++) {
|
||||
d = parts[i].split('=');
|
||||
obj[decodeURIComponent(d[0])] = decodeURIComponent(d[1]);
|
||||
}
|
||||
|
||||
return obj;
|
||||
}
|
||||
|
||||
// Calculate the width and height of a square within another square
|
||||
|
||||
function calculateBound(d) {
|
||||
|
||||
var bound = {width: d.width, height: d.height};
|
||||
|
||||
if (bound.width>d.boundWidth || bound.height>d.boundHeight) {
|
||||
|
||||
var rel = bound.width/bound.height;
|
||||
|
||||
if (d.boundWidth/rel>d.boundHeight && d.boundHeight*rel<=d.boundWidth) {
|
||||
|
||||
bound.width = Math.round(d.boundHeight*rel);
|
||||
bound.height = d.boundHeight;
|
||||
|
||||
} else {
|
||||
|
||||
bound.width = d.boundWidth;
|
||||
bound.height = Math.round(d.boundWidth/rel);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
return bound;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 759 KiB |
@@ -0,0 +1,12 @@
|
||||
[{
|
||||
"x":22,
|
||||
"y":568,
|
||||
"width":130,
|
||||
"height":12,
|
||||
"class":"link",
|
||||
"data":
|
||||
{
|
||||
"url": "http://latimes.com/shopping/vegas"
|
||||
}
|
||||
}
|
||||
]
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 422 KiB |
@@ -0,0 +1,8 @@
|
||||
[{
|
||||
"x":0,
|
||||
"y":135,
|
||||
"width":423,
|
||||
"height":182,
|
||||
"class":"zoom"
|
||||
}
|
||||
]
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 95 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 413 KiB |
@@ -0,0 +1,15 @@
|
||||
[{
|
||||
"x":181,
|
||||
"y":386,
|
||||
"width":102,
|
||||
"height":214,
|
||||
"class":"zoom"
|
||||
},
|
||||
{
|
||||
"x":289,
|
||||
"y":253,
|
||||
"width":173,
|
||||
"height":312,
|
||||
"class":"zoom"
|
||||
}
|
||||
]
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
@@ -0,0 +1 @@
|
||||
[]
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 75 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
@@ -0,0 +1 @@
|
||||
[]
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 65 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 792 KiB |
@@ -0,0 +1,45 @@
|
||||
[{
|
||||
"x":256,
|
||||
"y":161,
|
||||
"width":128,
|
||||
"height":15,
|
||||
"class":"to-page",
|
||||
"data":
|
||||
{
|
||||
"page": 8
|
||||
}
|
||||
},
|
||||
{
|
||||
"x":256,
|
||||
"y":202,
|
||||
"width":114,
|
||||
"height":15,
|
||||
"class":"to-page",
|
||||
"data":
|
||||
{
|
||||
"page": 10
|
||||
}
|
||||
},
|
||||
{
|
||||
"x":256,
|
||||
"y":244,
|
||||
"width":126,
|
||||
"height":15,
|
||||
"class":"to-page",
|
||||
"data":
|
||||
{
|
||||
"page": 12
|
||||
}
|
||||
},
|
||||
{
|
||||
"x":256,
|
||||
"y":286,
|
||||
"width":68,
|
||||
"height":15,
|
||||
"class":"to-page",
|
||||
"data":
|
||||
{
|
||||
"page": 12
|
||||
}
|
||||
}
|
||||
]
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
@@ -0,0 +1,22 @@
|
||||
[{
|
||||
"x":287,
|
||||
"y":0,
|
||||
"width":171,
|
||||
"height":143,
|
||||
"class":"zoom"
|
||||
},
|
||||
{
|
||||
"x":287,
|
||||
"y":155,
|
||||
"width":175,
|
||||
"height":134,
|
||||
"class":"zoom"
|
||||
},
|
||||
{
|
||||
"x":0,
|
||||
"y":264,
|
||||
"width":177,
|
||||
"height":123,
|
||||
"class":"zoom"
|
||||
}
|
||||
]
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 84 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 755 KiB |
@@ -0,0 +1 @@
|
||||
[]
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 984 KiB |
@@ -0,0 +1,22 @@
|
||||
[{
|
||||
"x":270,
|
||||
"y":0,
|
||||
"width":161,
|
||||
"height":148,
|
||||
"class":"zoom"
|
||||
},
|
||||
{
|
||||
"x":51,
|
||||
"y":77,
|
||||
"width":174,
|
||||
"height":141,
|
||||
"class":"zoom"
|
||||
},
|
||||
{
|
||||
"x":33,
|
||||
"y":448,
|
||||
"width":398,
|
||||
"height":113,
|
||||
"class":"zoom"
|
||||
}
|
||||
]
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 76 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 647 KiB |
@@ -0,0 +1 @@
|
||||
[]
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 198 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1000 KiB |
@@ -0,0 +1,29 @@
|
||||
[{
|
||||
"x":33,
|
||||
"y":145,
|
||||
"width":186,
|
||||
"height":99,
|
||||
"class":"zoom"
|
||||
},
|
||||
{
|
||||
"x":33,
|
||||
"y":247,
|
||||
"width":186,
|
||||
"height":99,
|
||||
"class":"zoom"
|
||||
},
|
||||
{
|
||||
"x":33,
|
||||
"y":349,
|
||||
"width":186,
|
||||
"height":99,
|
||||
"class":"zoom"
|
||||
},
|
||||
{
|
||||
"x":33,
|
||||
"y":450,
|
||||
"width":186,
|
||||
"height":99,
|
||||
"class":"zoom"
|
||||
}
|
||||
]
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 77 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 475 KiB |
@@ -0,0 +1,12 @@
|
||||
[{
|
||||
"x":29,
|
||||
"y":558,
|
||||
"width":117,
|
||||
"height":14,
|
||||
"class":"link",
|
||||
"data" :
|
||||
{
|
||||
"url": "http://www.celineinvegas.com"
|
||||
}
|
||||
}
|
||||
]
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 970 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 59 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 759 B |
@@ -0,0 +1,400 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Using turn.js and the new zoom feature</title>
|
||||
<meta name="viewport" content="width = 1050, user-scalable = no" />
|
||||
<link rel="icon" type="image/png" href="../../pics/favicon.png" />
|
||||
<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/modernizr.2.5.3.min.js"></script>
|
||||
<script type="text/javascript" src="../../lib/hash.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="canvas">
|
||||
|
||||
<div class="zoom-icon zoom-icon-in"></div>
|
||||
|
||||
<div class="magazine-viewport">
|
||||
<div class="container">
|
||||
<div class="magazine">
|
||||
<!-- Next button -->
|
||||
<div ignore="1" class="next-button"></div>
|
||||
<!-- Previous button -->
|
||||
<div ignore="1" class="previous-button"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div id="slider-bar" class="turnjs-slider">
|
||||
<div id="slider"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
function loadApp() {
|
||||
|
||||
$('#canvas').fadeIn(1000);
|
||||
|
||||
var flipbook = $('.magazine');
|
||||
|
||||
// Check if the CSS was already loaded
|
||||
|
||||
if (flipbook.width()==0 || flipbook.height()==0) {
|
||||
setTimeout(loadApp, 10);
|
||||
return;
|
||||
}
|
||||
|
||||
// Create the flipbook
|
||||
|
||||
flipbook.turn({
|
||||
|
||||
// Magazine width
|
||||
|
||||
width: 922,
|
||||
|
||||
// Magazine height
|
||||
|
||||
height: 600,
|
||||
|
||||
// Duration in millisecond
|
||||
|
||||
duration: 1000,
|
||||
|
||||
// Enables gradients
|
||||
|
||||
gradients: true,
|
||||
|
||||
// Auto center this flipbook
|
||||
|
||||
autoCenter: true,
|
||||
|
||||
// Elevation from the edge of the flipbook when turning a page
|
||||
|
||||
elevation: 50,
|
||||
|
||||
// The number of pages
|
||||
|
||||
pages: 12,
|
||||
|
||||
// Events
|
||||
|
||||
when: {
|
||||
turning: function(event, page, view) {
|
||||
|
||||
var book = $(this),
|
||||
currentPage = book.turn('page'),
|
||||
pages = book.turn('pages');
|
||||
|
||||
// Update the current URI
|
||||
|
||||
Hash.go('page/' + page).update();
|
||||
|
||||
// Show and hide navigation buttons
|
||||
|
||||
disableControls(page);
|
||||
|
||||
},
|
||||
|
||||
turned: function(event, page, view) {
|
||||
|
||||
disableControls(page);
|
||||
|
||||
$(this).turn('center');
|
||||
|
||||
$('#slider').slider('value', getViewNumber($(this), page));
|
||||
|
||||
if (page==1) {
|
||||
$(this).turn('peel', 'br');
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
missing: function (event, pages) {
|
||||
|
||||
// Add pages that aren't in the magazine
|
||||
|
||||
for (var i = 0; i < pages.length; i++)
|
||||
addPage(pages[i], $(this));
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
// Zoom.js
|
||||
|
||||
$('.magazine-viewport').zoom({
|
||||
flipbook: $('.magazine'),
|
||||
|
||||
max: function() {
|
||||
|
||||
return largeMagazineWidth()/$('.magazine').width();
|
||||
|
||||
},
|
||||
|
||||
when: {
|
||||
swipeLeft: function() {
|
||||
|
||||
$(this).zoom('flipbook').turn('next');
|
||||
|
||||
},
|
||||
|
||||
swipeRight: function() {
|
||||
|
||||
$(this).zoom('flipbook').turn('previous');
|
||||
|
||||
},
|
||||
|
||||
resize: function(event, scale, page, pageElement) {
|
||||
|
||||
if (scale==1)
|
||||
loadSmallPage(page, pageElement);
|
||||
else
|
||||
loadLargePage(page, pageElement);
|
||||
|
||||
},
|
||||
|
||||
zoomIn: function () {
|
||||
|
||||
$('#slider-bar').hide();
|
||||
$('.made').hide();
|
||||
$('.magazine').removeClass('animated').addClass('zoom-in');
|
||||
$('.zoom-icon').removeClass('zoom-icon-in').addClass('zoom-icon-out');
|
||||
|
||||
if (!window.escTip && !$.isTouch) {
|
||||
escTip = true;
|
||||
|
||||
$('<div />', {'class': 'exit-message'}).
|
||||
html('<div>Press ESC to exit</div>').
|
||||
appendTo($('body')).
|
||||
delay(2000).
|
||||
animate({opacity:0}, 500, function() {
|
||||
$(this).remove();
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
zoomOut: function () {
|
||||
|
||||
$('#slider-bar').fadeIn();
|
||||
$('.exit-message').hide();
|
||||
$('.made').fadeIn();
|
||||
$('.zoom-icon').removeClass('zoom-icon-out').addClass('zoom-icon-in');
|
||||
|
||||
setTimeout(function(){
|
||||
$('.magazine').addClass('animated').removeClass('zoom-in');
|
||||
resizeViewport();
|
||||
}, 0);
|
||||
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Zoom event
|
||||
|
||||
if ($.isTouch)
|
||||
$('.magazine-viewport').bind('zoom.doubleTap', zoomTo);
|
||||
else
|
||||
$('.magazine-viewport').bind('zoom.tap', zoomTo);
|
||||
|
||||
|
||||
// Using arrow keys to turn the page
|
||||
|
||||
$(document).keydown(function(e){
|
||||
|
||||
var previous = 37, next = 39, esc = 27;
|
||||
|
||||
switch (e.keyCode) {
|
||||
case previous:
|
||||
|
||||
// left arrow
|
||||
$('.magazine').turn('previous');
|
||||
e.preventDefault();
|
||||
|
||||
break;
|
||||
case next:
|
||||
|
||||
//right arrow
|
||||
$('.magazine').turn('next');
|
||||
e.preventDefault();
|
||||
|
||||
break;
|
||||
case esc:
|
||||
|
||||
$('.magazine-viewport').zoom('zoomOut');
|
||||
e.preventDefault();
|
||||
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
// URIs - Format #/page/1
|
||||
|
||||
Hash.on('^page\/([0-9]*)$', {
|
||||
yep: function(path, parts) {
|
||||
var page = parts[1];
|
||||
|
||||
if (page!==undefined) {
|
||||
if ($('.magazine').turn('is'))
|
||||
$('.magazine').turn('page', page);
|
||||
}
|
||||
|
||||
},
|
||||
nop: function(path) {
|
||||
|
||||
if ($('.magazine').turn('is'))
|
||||
$('.magazine').turn('page', 1);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
$(window).resize(function() {
|
||||
resizeViewport();
|
||||
}).bind('orientationchange', function() {
|
||||
resizeViewport();
|
||||
});
|
||||
|
||||
// Regions
|
||||
|
||||
if ($.isTouch) {
|
||||
$('.magazine').bind('touchstart', regionClick);
|
||||
} else {
|
||||
$('.magazine').click(regionClick);
|
||||
}
|
||||
|
||||
// Events for the next button
|
||||
|
||||
$('.next-button').bind($.mouseEvents.over, function() {
|
||||
|
||||
$(this).addClass('next-button-hover');
|
||||
|
||||
}).bind($.mouseEvents.out, function() {
|
||||
|
||||
$(this).removeClass('next-button-hover');
|
||||
|
||||
}).bind($.mouseEvents.down, function() {
|
||||
|
||||
$(this).addClass('next-button-down');
|
||||
|
||||
}).bind($.mouseEvents.up, function() {
|
||||
|
||||
$(this).removeClass('next-button-down');
|
||||
|
||||
}).click(function() {
|
||||
|
||||
$('.magazine').turn('next');
|
||||
|
||||
});
|
||||
|
||||
// Events for the next button
|
||||
|
||||
$('.previous-button').bind($.mouseEvents.over, function() {
|
||||
|
||||
$(this).addClass('previous-button-hover');
|
||||
|
||||
}).bind($.mouseEvents.out, function() {
|
||||
|
||||
$(this).removeClass('previous-button-hover');
|
||||
|
||||
}).bind($.mouseEvents.down, function() {
|
||||
|
||||
$(this).addClass('previous-button-down');
|
||||
|
||||
}).bind($.mouseEvents.up, function() {
|
||||
|
||||
$(this).removeClass('previous-button-down');
|
||||
|
||||
}).click(function() {
|
||||
|
||||
$('.magazine').turn('previous');
|
||||
|
||||
});
|
||||
|
||||
|
||||
// Slider
|
||||
|
||||
$( "#slider" ).slider({
|
||||
min: 1,
|
||||
max: numberOfViews(flipbook),
|
||||
|
||||
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');
|
||||
|
||||
$('.magazine').turn('page', Math.max(1, $(this).slider('value')*2 - 2));
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
resizeViewport();
|
||||
|
||||
$('.magazine').addClass('animated');
|
||||
|
||||
}
|
||||
|
||||
// Zoom icon
|
||||
|
||||
$('.zoom-icon').bind('mouseover', function() {
|
||||
|
||||
if ($(this).hasClass('zoom-icon-in'))
|
||||
$(this).addClass('zoom-icon-in-hover');
|
||||
|
||||
if ($(this).hasClass('zoom-icon-out'))
|
||||
$(this).addClass('zoom-icon-out-hover');
|
||||
|
||||
}).bind('mouseout', function() {
|
||||
|
||||
if ($(this).hasClass('zoom-icon-in'))
|
||||
$(this).removeClass('zoom-icon-in-hover');
|
||||
|
||||
if ($(this).hasClass('zoom-icon-out'))
|
||||
$(this).removeClass('zoom-icon-out-hover');
|
||||
|
||||
}).bind('click', function() {
|
||||
|
||||
if ($(this).hasClass('zoom-icon-in'))
|
||||
$('.magazine-viewport').zoom('zoomIn');
|
||||
else if ($(this).hasClass('zoom-icon-out'))
|
||||
$('.magazine-viewport').zoom('zoomOut');
|
||||
|
||||
});
|
||||
|
||||
$('#canvas').hide();
|
||||
|
||||
|
||||
// Load the HTML4 version if there's not CSS transform
|
||||
|
||||
yepnope({
|
||||
test : Modernizr.csstransforms,
|
||||
yep: ['../../lib/turn.min.js'],
|
||||
nope: ['../../lib/turn.html4.min.js', 'css/jquery.ui.html4.css'],
|
||||
both: ['../../lib/zoom.min.js', 'css/jquery.ui.css', 'js/magazine.js', 'css/magazine.css'],
|
||||
complete: loadApp
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user