Flipbook + caption

by sach_a

HTML

<script src="https://s3.amazonaws.com/dorothyloudon.nypl.org/assets/vendor/lib/turn.js"></script>
<div id="flipbook">
  <div class="hard">Turn.js + captions </div> 
  <div class="hard"></div>
    <div> Page 1 </div>
    <div> Page 2 </div>
    <div> Page 3 </div>
    <div> Page 4 </div>
    <div> Page 5 </div>
    <div> Page 6 </div>
    <div> Page 7 </div>
    <div> Page 8 </div>
  <div class="hard"></div>
  <div class="hard"></div>
</div>
<div class="captions">
  <div class="caption-covers">
    <div id="caption1" class="caption">front-cover</div>
    <div id="caption12" class="caption">back-cover</div>
  </div>
  <div class="caption-odd">
    <div id="caption3" class="caption">page 1</div>
    <div id="caption5" class="caption">page 3</div>
    <div id="caption7" class="caption">page 5</div>
    <div id="caption9" class="caption">page 7</div>
    <div id="caption11" class="caption">Inner cover</div>
  </div>
  <div class="caption-even">
    <div id="caption2" class="caption">Inner cover</div>
    <div id="caption4" class="caption">page 2</div>
    <div id="caption6" class="caption">page 4</div>
    <div id="caption8" class="caption">page 6</div>
    <div id="caption10" class="caption">page 8</div>
  </div>
</div>

CSS

body{
    overflow:hidden;
    margin-top:20px;
    margin-left:20px;
}

#flipbook{
    width:400px;
    height:300px;
}

#flipbook .page{
    width:400px;
    height:300px;
    background-color:white;
    line-height:300px;
    font-size:20px;
    text-align:center;
}

#flipbook .page-wrapper{
    -webkit-perspective:2000px;
    -moz-perspective:2000px;
    -ms-perspective:2000px;
    -o-perspective:2000px;
    perspective:2000px;
}

#flipbook .hard{
    background:#ccc !important;
    color:#333;
    -webkit-box-shadow:inset 0 0 5px #666;
    -moz-box-shadow:inset 0 0 5px #666;
    -o-box-shadow:inset 0 0 5px #666;
    -ms-box-shadow:inset 0 0 5px #666;
    box-shadow:inset 0 0 5px #666;
    font-weight:bold;
}

#flipbook .odd{
    background:-webkit-gradient(linear, right top, left top, color-stop(0.95, #FFF), color-stop(1, #DADADA));
    background-image:-webkit-linear-gradient(right, #FFF 95%, #C4C4C4 100%);
    background-image:-moz-linear-gradient(right, #FFF 95%, #C4C4C4 100%);
    background-image:-ms-linear-gradient(right, #FFF 95%, #C4C4C4 100%);
    background-image:-o-linear-gradient(right, #FFF 95%, #C4C4C4 100%);
    background-image:linear-gradient(right, #FFF 95%, #C4C4C4 100%);
    -webkit-box-shadow:inset 0 0 5px #666;
    -moz-box-shadow:inset 0 0 5px #666;
    -o-box-shadow:inset 0 0 5px #666;
    -ms-box-shadow:inset 0 0 5px #666;
    box-shadow:inset 0 0 5px #666;
    
}

#flipbook .even{
    background:-webkit-gradient(linear, left top, right top, color-stop(0.95, #fff), color-stop(1, #dadada));
    background-image:-webkit-linear-gradient(left, #fff 95%, #dadada 100%);
    background-image:-moz-linear-gradient(left, #fff 95%, #dadada 100%);
    background-image:-ms-linear-gradient(left, #fff 95%, #dadada 100%);
    background-image:-o-linear-gradient(left, #fff 95%, #dadada 100%);
    background-image:linear-gradient(left, #fff 95%, #dadada 100%);
    -webkit-box-shadow:inset 0...

JavaScript

$("#flipbook").turn({
    width: 400,
    height: 300,
    autoCenter: true
});

//init on document ready
$(".caption").hide()
$("#caption1").show()
console.log('front cover');

//hide & show captions script
var page=0;
var view = $("#flipbook").turn("view").join(" and ");
$("#flipbook").bind("turning", function(event, page, view) {
for (var i=1;i<=12;i++) {
	$(".caption").hide()
	$("#caption"+view[0]).show()
  $("#caption"+view[1]).show()
}
});