WowBook, a flipbook jQuery plugin Preview images,pdf, html
WowBook Documentation (neuearbeit.de) 帮助文档
display images:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="geovindu,Geovin Du, 涂聚文">
<meta name="author" content="geovindu">
<title>WowBook, a flipbook jQuery plugin Preview images- create table of contents</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="./wow_book/pdf.combined.min.js"></script>
<link rel="stylesheet" href="./wow_book/wow_book.css" type="text/css" />
<!-- Bootstrap Core CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<!-- Custom Fonts -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css" type="text/css">
<!-- Plugin CSS -->
<link rel="stylesheet" href="css/animate.min.css" type="text/css">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/creative.css" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body id="page-top">
<div id="book1" class="lightbox-images">
<div>
<h1>目录</h1>
<ul>
<li>目录 涂聚文</li>
<li><a href="#book1/2">封面................................</a></li>
<li><a href="#book1/3">目录............................第1页</a></li>
<li><a href="#book1/4">酒店推荐.........................第2页</a>
<ul>
<li><a href="#book1/5">亚朵酒店...............................第3页</a></li>
<li><a href="#book1/6">珀丽酒店...............................第4页</a></li>
<li><a href="#book1/7">明阳酒店...............................第5页</a></li>
<li><a href="#book1/8">艺嘉酒店...............................第6页</a></li>
<li><a href="#book1/9">百合酒店...............................第7页</a></li>
<li><a href="#book1/10">乐酒店.................................第8页</a></li>
<li><a href="#book1/11">香格里拉酒店...........................第9页</a></li>
<li><a href="#book1/12">明新新地酒店...........................第10页</a></li>
<li><a href="#book1/13">维也纳酒店.............................第11页</a></li>
<li><a href="#book1/14">7天连锁酒店............................第12页</a></li>
<li><a href="#book1/15">新贝酒店...............................第13页</a></li>
</ul>
</li>
<li><a href="#book1/16">餐饮推荐...........................第14页</a>
<ul>
<li><a href="#book1/17">汉阳馆.烤肉大师...........................第15页</a></li>
<li><a href="#book1/17">海底捞..................................第15页</a></li>
<li><a href="#book1/17">点都德..................................第15页</a></li>
<li><a href="#book1/18">慕湘（湖南菜）...........................第16页</a></li>
<li><a href="#book1/18">探鱼...................................第16页</a></li>
<li><a href="#book1/18">鱼小妖.................................第16页</a></li>
<li><a href="#book1/19">酸渡酸菜鱼..............................第17页</a></li>
<li><a href="#book1/19">龙发鸡煲................................第17页</a></li>
<li><a href="#book1/19">忆年四季椰子鸡锅.........................第17页</a></li>
<li><a href="#book1/20">丹桂杆（新都店）粤菜.....................第18页</a></li>
<li><a href="#book1/20">稻香迎喜皇宫............................第18页</a></li>
</ul>
</li>
<li><a href="#book1/21">封底.........................</a></li>
</ul>
</div>
<div>
<img class="book-thumb" src="img/lukfook/index.jpg" alt=""/>
</div>
<div>
<img class="book-thumb" src="img/lukfook/2021消费指南-02.png" alt=""/>
</div>
<div>
<img class="book-thumb" src="img/lukfook/2021消费指南-03.jpg" alt=""/>
</div>
<div>
<img class="book-thumb" src="img/lukfook/2021消费指南-04.jpg" alt=""/>
</div>
<div>
<img class="book-thumb" src="img/lukfook/2021消费指南-05.jpg" alt=""/>
</div>
<div>
<img class="book-thumb" src="img/lukfook/2021消费指南-06.jpg" alt=""/>
</div>
<div>
<img class="book-thumb" src="img/lukfook/2021消费指南-07.png" alt=""/>
</div>
<div>
<img class="book-thumb" src="img/lukfook/2021消费指南-08.png" alt=""/>
</div>
<div>
<img class="book-thumb" src="img/lukfook/2021消费指南-09.jpg" alt=""/>
</div>
<div>
<img class="book-thumb" src="img/lukfook/2021消费指南-10.jpg" alt=""/>
</div>
<div>
<img class="book-thumb" src="img/lukfook/2021消费指南-11.jpg" alt=""/>
</div>
<div>
<img class="book-thumb" src="img/lukfook/2021消费指南-12.jpg" alt=""/>
</div>
<div>
<img class="book-thumb" src="img/lukfook/2021消费指南-13.jpg" alt=""/>
</div>
<div>
<img class="book-thumb" src="img/lukfook/2021消费指南-14.png" alt=""/>
</div>
<div>
<img class="book-thumb" src="img/lukfook/2021消费指南-15.jpg" alt=""/>
</div>
<div>
<img class="book-thumb" src="img/lukfook/2021消费指南-16.jpg" alt=""/>
</div>
<div>
<img class="book-thumb" src="img/lukfook/2021消费指南-17.jpg" alt=""/>
</div>
<div>
<img class="book-thumb" src="img/lukfook/2021消费指南-18.jpg" alt=""/>
</div>
<div>
<img class="book-thumb" src="img/lukfook/2021消费指南-19.jpg" alt=""/>
</div>
<div>
<img class="book-thumb" src="img/lukfook/2021消费指南-20.jpg" alt=""/>
</div>
</div>
<style>
.book-thumb{
width:100%;
height: 100%;
}
.hidden-FIXME{
display: none;
}
#portfolio {
display: none;
}
header { display: none; }
#contact { display: none; }
#about {
display: none;
}
.navbar-header {
width: 100% !important;
}
.navbar-brand {
padding-right: 0;
font-size: 14px !important;
}
#nav-buy-now {
color: black;
float: right;
font-size: 14px;
font-weight: 700;
margin-right: -10px;
}
@media (min-width: 768px) {
#nav-buy-now {
margin-right: 0px;
}
}
#bs-example-navbar-collapse-1 {
display: none;
}
.wowbook {
font-family: "Open Sans","Helvetica Neue",Arial,sans-serif;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.wowbook-page-content {
padding: 1.5em;
}
.wowbook ul {
padding-left: 1em;
}
.book-thumb {
/*height: 150px;*/
box-shadow: 0 0 3px rgba(0, 0, 0, 0.5)
}
#book1-trigger, #book2-trigger, #book3-trigger {
cursor: pointer;
}
#book1-trigger:hover, #book2-trigger:hover, #book3-trigger:hover {
background: #f8f8f8;
}
.wowbook-lightbox > .wowbook-close {
background: transparent !important;
border: none !important;
color: #222 !important;
font-size: 2.5em;
}
.wowbook-lightbox > .wowbook-close:hover {
background: #444 !important;
color: white !important;
border-radius: 3px;
}
.lightbox-images1 .wowbook-book-container {
background: #6d6b92; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #6d6b92 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#6d6b92 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center, #ffffff 0%,#6d6b92 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.lightbox-images1 > .wowbook-close,
.lightbox-images2 > .wowbook-close {
color: #ccc !important;
}
.lightbox-images2 .wowbook-book-container {
background: #1E2831; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #1E2831 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#1E2831 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center, #ffffff 0%,#1E2831 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.lightbox-pdf .wowbook-book-container {
background: #e5e5e5 url(./img/bg-lightbox-pdf.png); /* Old browsers */
background: #e5e5e5 -moz-radial-gradient(center, ellipse cover, #ffffff 20%, #bbbbbb 100%); /* FF3.6-15 */
background: #e5e5e5 -webkit-radial-gradient(center, ellipse cover, #ffffff 20%,#bbbbbb 100%); /* Chrome10-25,Safari5.1-6 */
background: #e5e5e5 radial-gradient(ellipse at center, #ffffff 20%,#bbbbbb 100%); /* W3C, IE10+, FF16+, Chrome26+,Opera12+, Safari7+*/
}
.lightbox-html .wowbook-book-container {
background: url(img/book_html/wood.jpg);
}
.lightbox-html .wowbook-toolbar {
margin-top: 1em; /* FIXME */
box-sizing: content-box !important;
}
.lightbox-html .wowbook-controls {
border-radius: 6px;
width: auto;
}
.lightbox-html.wowbook-mobile .wowbook-toolbar {
margin: 0;
}
.lightbox-html.wowbook-mobile .wowbook-controls {
border-radius: 0;
width: 100%;
}
/* .lightbox-html .wowbook-controls {
border-radius: 6px;
width: auto;
background: none;
color: rgba(60, 20, 20, 0.8);
text-shadow: 0 1px 0 #fff;
box-shadow: none;
}
.lightbox-html .wowbook-control:hover {
background: none;
color: white;
text-shadow: 0 1px 0 #fff, 0 0px 5px rgba(60, 20, 20, 1);
text-shadow: 0 1px 0 #fff, 0 0px 3px #fff;
}
*/
hr {
max-width: 450px;
}
</style>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Plugin JavaScript -->
<script src="js/jquery.easing.min.js"></script>
<script src="js/jquery.fittext.js"></script>
<script src="js/wow.min.js"></script>
<!-- Custom Theme JavaScript -->
<script src="js/creative.js"></script>
<link rel="stylesheet" href="./wow_book/wow_book.css" type="text/css" />
<style>
.wowbook-right .wowbook-gutter-shadow {
background-image: url("./img/page_right_background.png");
background-position: 0 0;
width: 75px;
}
.wowbook-left .wowbook-gutter-shadow {
background-image: url("./img/page_left_background.png");
opacity: 0.5;
width: 60px;
}
.wowbook-control-currentPage {
font-family: "Segoe UI",Helvetica,Arial,sans-serif;
}
</style>
<script src="./wow_book/wow_book.min.js"></script>
<script type="text/javascript">
$(function(){
function fullscreenErrorHandler(){
if (self!=top) return "The frame is blocking full screen mode. Click on 'remove frame' button above and try to go full screen again."
}
//children: 如何设置字节点目录
var tableOfContents = [
["目录", 0],
["封面", 1],
["目录",2],
["酒店",3],
[" 亚朵酒店",4],
[" 珀丽酒店",5],
[" 明阳酒店", 6],
[" 艺嘉酒店", 7],
[" 百合酒店", 8],
[" 乐酒店", 9],
[" 香格里拉酒店",10 ],
[" 新新地酒店", 11],
[" 维也纳酒店", 12],
[" 7天连锁酒店", 13],
[" 新贝酒店", 14],
["餐饮推荐", 15],
[" 汉阳馆，海底捞，点都德",16 ],
[" 慕湘，探鱼，鱼小妖", 17],
[" 酸渡酸菜鱼，龙发鸡煲，忆年四季椰子鸡锅",18 ],
[" 丹桂轩（新都店）粤菜，稻香迎喜皇宫",19],
["封底", 20],
];
$("#book1").wowBook({
//container: true,
//containerHeight: 1056,
//containerWidth: 816*2,
/**/
height : 920,
width : 816*2,
hardcovers: true,
toolbar: "lastLeft, left, currentPage, right, lastRight, find, toc, zoomin, zoomout, download, flipsound, fullscreen, thumbnails,share",
toolbarPosition: "bottom",
perspective: 4000,
responsiveHandleWidth: 50 ,
displayToc: false,
toc: tableOfContents,
share: "twitter, facebook, reddit"
});
});
</script>
</body>
</html>
display pdf:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="geovindu,Geovin Du, 涂聚文">
<meta name="author" content="geovindu">
<title>WowBook, a flipbook jQuery plugin Preview pdf- create table of contents</title>
<script>
// Break out iframe on iOS cause safari expand iframe to fit the content, thus making
// the lightbox bigger than the browser window.
// We need to check for MSStream because Microsoft injected the word iPhone in IE11's userAgent therefore we need to exclude it.
var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
if (iOS && top.location!= self.location) {
top.location = self.location.href;
}
</script>
<!-- Bootstrap Core CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<!-- Custom Fonts -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css" type="text/css">
<!-- Plugin CSS -->
<link rel="stylesheet" href="css/animate.min.css" type="text/css">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/creative.css" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<body id="page-top">
<div id='book2-trigger' class="col-lg-4 col-md-6 text-center">
<div class="service-box">
<img class='book-thumb' src='./img/aesop_fables/aesops-fables-cover-thumb(1).jpg' />
<h3>PDF</h3>
<p class="text-muted">Wowbook rendering a pdf file, with table of contents, selectable text and search(experimental).</p>
</div>
</div>
<div style='display: none'>
<div id="book2"></div>
</div>
<style>
.hidden-FIXME{
display: none;
}
#portfolio {
display: none;
}
header { display: none; }
#contact { display: none; }
#about {
display: none;
}
.navbar-header {
width: 100% !important;
}
.navbar-brand {
padding-right: 0;
font-size: 14px !important;
}
#nav-buy-now {
color: black;
float: right;
font-size: 14px;
font-weight: 700;
margin-right: -10px;
}
@media (min-width: 768px) {
#nav-buy-now {
margin-right: 0px;
}
}
#bs-example-navbar-collapse-1 {
display: none;
}
.wowbook {
font-family: "Open Sans","Helvetica Neue",Arial,sans-serif;
}
.wowbook-page-content {
padding: 1.5em;
}
.wowbook ul {
padding-left: 1em;
}
.book-thumb {
height: 150px;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.5)
}
#book1-trigger, #book2-trigger, #book3-trigger {
cursor: pointer;
}
#book1-trigger:hover, #book2-trigger:hover, #book3-trigger:hover {
background: #f8f8f8;
}
.wowbook-lightbox > .wowbook-close {
background: transparent !important;
border: none !important;
color: #222 !important;
font-size: 2.5em;
}
.wowbook-lightbox > .wowbook-close:hover {
background: #444 !important;
color: white !important;
border-radius: 3px;
}
.lightbox-images1 .wowbook-book-container {
background: #6d6b92; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #6d6b92 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#6d6b92 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center, #ffffff 0%,#6d6b92 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.lightbox-images1 > .wowbook-close,
.lightbox-images2 > .wowbook-close {
color: #ccc !important;
}
.lightbox-images2 .wowbook-book-container {
background: #1E2831; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #1E2831 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#1E2831 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center, #ffffff 0%,#1E2831 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.lightbox-pdf .wowbook-book-container {
background: #e5e5e5 url(./img/bg-lightbox-pdf.png); /* Old browsers */
background: #e5e5e5 -moz-radial-gradient(center, ellipse cover, #ffffff 20%, #bbbbbb 100%); /* FF3.6-15 */
background: #e5e5e5 -webkit-radial-gradient(center, ellipse cover, #ffffff 20%,#bbbbbb 100%); /* Chrome10-25,Safari5.1-6 */
background: #e5e5e5 radial-gradient(ellipse at center, #ffffff 20%,#bbbbbb 100%); /* W3C, IE10+, FF16+, Chrome26+,Opera12+, Safari7+*/
}
.lightbox-html .wowbook-book-container {
background: url(img/book_html/wood.jpg);
}
.lightbox-html .wowbook-toolbar {
margin-top: 1em; /* FIXME */
box-sizing: content-box !important;
}
.lightbox-html .wowbook-controls {
border-radius: 6px;
width: auto;
}
.lightbox-html.wowbook-mobile .wowbook-toolbar {
margin: 0;
}
.lightbox-html.wowbook-mobile .wowbook-controls {
border-radius: 0;
width: 100%;
}
/* .lightbox-html .wowbook-controls {
border-radius: 6px;
width: auto;
background: none;
color: rgba(60, 20, 20, 0.8);
text-shadow: 0 1px 0 #fff;
box-shadow: none;
}
.lightbox-html .wowbook-control:hover {
background: none;
color: white;
text-shadow: 0 1px 0 #fff, 0 0px 5px rgba(60, 20, 20, 1);
text-shadow: 0 1px 0 #fff, 0 0px 3px #fff;
}
*/
hr {
max-width: 450px;
}
</style>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Plugin JavaScript -->
<script src="js/jquery.easing.min.js"></script>
<script src="js/jquery.fittext.js"></script>
<script src="js/wow.min.js"></script>
<!-- Custom Theme JavaScript -->
<script src="js/creative.js"></script>
<link rel="stylesheet" href="./wow_book/wow_book.css" type="text/css" />
<style>
.wowbook-right .wowbook-gutter-shadow {
background-image: url("./img/page_right_background.png");
background-position: 0 0;
width: 75px;
}
.wowbook-left .wowbook-gutter-shadow {
background-image: url("./img/page_left_background.png");
opacity: 0.5;
width: 60px;
}
.wowbook-control-currentPage {
font-family: "Segoe UI",Helvetica,Arial,sans-serif;
}
</style>
<script type="text/javascript" src="./wow_book/pdf.combined.min.js"></script>
<script type="text/javascript" src="./wow_book/wow_book.min.js"></script>
<script type="text/javascript">
$(function(){
function fullscreenErrorHandler(){
if (self!=top) return "The frame is blocking full screen mode. Click on 'remove frame' button above and try to go full screen again."
}
/*
高度控制
$("#book2").wowBook({
height : 370
,width : 725*2
// ,maxWidth : 800
// ,maxHeight : 400
,pageNumbers: false
,pdf: "2.pdf"
,pdfFind: true
,pdfTextSelectable: true
,lightboxClass : "lightbox-pdf"
,centeredWhenClosed : true
,hardcovers : true
,curl: false
,toolbar: "lastLeft, left, currentPage, right, lastRight, find, toc, zoomin, zoomout, download, flipsound, fullscreen, thumbnails"
,toolbarPosition : 'bottom'
,perspective: 4000
,responsiveHandleWidth : 50
,onFullscreenError: fullscreenErrorHandler
,responsiveHandleWidth: 50
});*/
//显示目录
var tableOfContents = [
["Eiffel Tower", 0],
["Breakfast", 1],
["Snowy Day", 3],
["Mountains", 5],
];
var optionsBook2 = {
height : 1024
,width : 725*2
// ,maxWidth : 800
// ,maxHeight : 400
,pageNumbers: false
,pdf: "./img/aesop_fables/2.pdf"
,pdfFind: true
,pdfTextSelectable: true
,displayToc: false //是否加载时显示目录
,toc: tableOfContents
,lightbox : "#book2-trigger"
,lightboxClass : "lightbox-pdf"
,centeredWhenClosed : true
,hardcovers : true
,curl: false
,toolbar: "lastLeft, left, currentPage, right, lastRight, find, toc, zoomin, zoomout, download, flipsound, fullscreen, thumbnails"
,thumbnailsPosition : 'bottom'
,responsiveHandleWidth : 50
,onFullscreenError: fullscreenErrorHandler
};
var books = {
"#book2" : optionsBook2,
};
$("#book2-trigger").on("click",function(){
buildBook( "#"+this.id.replace("-trigger", "") );
})
function buildBook( elem ){
var book=$.wowBook(elem);
if (!book) {
$(elem).wowBook( books[elem] );
book=$.wowBook(elem);
console.log(book);
}
// book.opts.onHideLightbox = function(){
// setTimeout( function(){ book.destroy(); }, 1000);
// }
book.showLightbox();
}
});
</script>
</body>
</html>
displays html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="geovindu,Geovin Du, 涂聚文">
<meta name="author" content="geovindu">
<title>WowBook, a flipbook jQuery plugin Preview html- create table of contents</title>
<script>
// Break out iframe on iOS cause safari expand iframe to fit the content, thus making
// the lightbox bigger than the browser window.
// We need to check for MSStream because Microsoft injected the word iPhone in IE11's userAgent therefore we need to exclude it.
var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
if (iOS && top.location!= self.location) {
top.location = self.location.href;
}
</script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="./wow_book/pdf.combined.min.js"></script>
<link rel="stylesheet" href="./wow_book/wow_book.css" type="text/css" />
<!-- Bootstrap Core CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<!-- Custom Fonts -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css" type="text/css">
<!-- Plugin CSS -->
<link rel="stylesheet" href="css/animate.min.css" type="text/css">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/creative.css" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id='book3'>
<div>
<img src='img/book_html/cover.jpg' class='wowbook-lazy' />
</div>
<div>
<h1>Easy to use</h1>
<p>Wowbook requires a basic knowledge of html and javascript to be used,
and comes several features to help you to create a book with minimum effort, like:</p>
<ul>
<li>Toolbar, table of contents and thumbnails can be created automatically.</li>
<li>Automatic page numbering.</li>
<li>Responsive.</li>
<li>Ready to use examples (based on <a href='html5boilerplate.com'>html5 boilerplate</a> ).</li>
</ul>
</div>
<div>
<h1>PDF support</h1>
<p>
Wowbook render pdf files using the library <a href="https://github.com/mozilla/pdf.js" target="_blank">PDF.js</a> from Mozilla.
</p>
<p>Wowbook pdf implementation supports:</p>
<ul>
<li>external(html) links</li>
<li>table of contents</li>
<li>selectable text</li>
<li>experimental: pdf search</li>
</ul>
<p><b>Will wowbook render my pdf file?</b> To do a basic test open the pdf file with Firefox (PDF.js is the defaul PDF viewer on Firefox). If you want make sure you can send the file to be tested.
</p>
<p>PDF.js works in the following browsers: Firefox, Chrome, Opera, IE10+. Limited support for Safari, Android and IE9. Not supported on IE8. For more information <a href="https://github.com/mozilla/pdf.js/wiki/Frequently-Asked-Questions#what-browsers-are-supported" target="_blank">click here</a>.</p>
</div>
<div>
<h1>Responsive</h1>
<p>Comes with built in features to resize the book to adapt for different screens dimensions.</p>
<p>Touch support (with pinch to zoom and double click to zoom).</p>
<p>Responsive toolbar adapts to the size of screen.</p>
<p>If you need more control on how to resize the book, you can use the javascript API to change the book's size. </p>
</div>
<div>
<h1>Right to Left</h1>
<p>Wowbook can order the book pages from right to left if you need to use right-to-left script. </p>
<br/>
<h1>Lazy Loading</h1>
<p>Wowbook can defer the loading of a page contents until the page is shown. This is especially useful in books that contains a lot of images.</p>
</div>
<div>
<h1>Slide Show</h1>
<p>Turn your book into a slide show, with configurable change slide interval.</p>
<h1>Flash support</h1>
<p>It's possible to use flash (like youtube videos) in your books, but the page that contains the flash object will be limited to the "basic flipping effect" (and ONLY that page).</p>
</div>
<div class='more bg-double-page'>
<h1>And more</h1>
<ul>
<li>Browser support : <img src='img/book_html/browser_logos-32.png' alt='browser logos'/></li>
<li>Keyboard navigation</li>
<li>Mouse wheel navigation / zoom</li>
<li>Play flipping sound</li>
<li>Documentation</li>
<li>Source code</li>
<li>Examples</li>
<li>Rich API</li>
</ul>
</div>
<div>
<img src='img/book_html/cover_last.jpg' class='wowbook-lazy' />
</div>
</div>
<style>
.hidden-FIXME{
display: none;
}
#portfolio {
display: none;
}
header { display: none; }
#contact { display: none; }
#about {
display: none;
}
.navbar-header {
width: 100% !important;
}
.navbar-brand {
padding-right: 0;
font-size: 14px !important;
}
#nav-buy-now {
color: black;
float: right;
font-size: 14px;
font-weight: 700;
margin-right: -10px;
}
@media (min-width: 768px) {
#nav-buy-now {
margin-right: 0px;
}
}
#bs-example-navbar-collapse-1 {
display: none;
}
.wowbook {
font-family: "Open Sans","Helvetica Neue",Arial,sans-serif;
margin-left: auto;
margin-right: auto;
}
.wowbook-page-content {
padding: 1.5em;
}
.wowbook ul {
padding-left: 1em;
}
.book-thumb {
height: 150px;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.5)
}
#book1-trigger, #book2-trigger, #book3-trigger {
cursor: pointer;
}
#book1-trigger:hover, #book2-trigger:hover, #book3-trigger:hover {
background: #f8f8f8;
}
.wowbook-lightbox > .wowbook-close {
background: transparent !important;
border: none !important;
color: #222 !important;
font-size: 2.5em;
}
.wowbook-lightbox > .wowbook-close:hover {
background: #444 !important;
color: white !important;
border-radius: 3px;
}
.lightbox-images1 .wowbook-book-container {
background: #6d6b92; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #6d6b92 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#6d6b92 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center, #ffffff 0%,#6d6b92 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.lightbox-images1 > .wowbook-close,
.lightbox-images2 > .wowbook-close {
color: #ccc !important;
}
.lightbox-images2 .wowbook-book-container {
background: #1E2831; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #1E2831 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#1E2831 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center, #ffffff 0%,#1E2831 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.lightbox-pdf .wowbook-book-container {
background: #e5e5e5 url(./img/bg-lightbox-pdf.png); /* Old browsers */
background: #e5e5e5 -moz-radial-gradient(center, ellipse cover, #ffffff 20%, #bbbbbb 100%); /* FF3.6-15 */
background: #e5e5e5 -webkit-radial-gradient(center, ellipse cover, #ffffff 20%,#bbbbbb 100%); /* Chrome10-25,Safari5.1-6 */
background: #e5e5e5 radial-gradient(ellipse at center, #ffffff 20%,#bbbbbb 100%); /* W3C, IE10+, FF16+, Chrome26+,Opera12+, Safari7+*/
}
.lightbox-html .wowbook-book-container {
background: url(img/book_html/wood.jpg);
}
.lightbox-html .wowbook-toolbar {
margin-top: 1em; /* FIXME */
box-sizing: content-box !important;
}
.lightbox-html .wowbook-controls {
border-radius: 6px;
width: auto;
}
.lightbox-html.wowbook-mobile .wowbook-toolbar {
margin: 0;
}
.lightbox-html.wowbook-mobile .wowbook-controls {
border-radius: 0;
width: 100%;
}
/* .lightbox-html .wowbook-controls {
border-radius: 6px;
width: auto;
background: none;
color: rgba(60, 20, 20, 0.8);
text-shadow: 0 1px 0 #fff;
box-shadow: none;
}
.lightbox-html .wowbook-control:hover {
background: none;
color: white;
text-shadow: 0 1px 0 #fff, 0 0px 5px rgba(60, 20, 20, 1);
text-shadow: 0 1px 0 #fff, 0 0px 3px #fff;
}
*/
hr {
max-width: 450px;
}
</style>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Plugin JavaScript -->
<script src="js/jquery.easing.min.js"></script>
<script src="js/jquery.fittext.js"></script>
<script src="js/wow.min.js"></script>
<!-- Custom Theme JavaScript -->
<script src="js/creative.js"></script>
<link rel="stylesheet" href="./wow_book/wow_book.css" type="text/css" />
<style>
.wowbook-right .wowbook-gutter-shadow {
background-image: url("./img/page_right_background.png");
background-position: 0 0;
width: 75px;
}
.wowbook-left .wowbook-gutter-shadow {
background-image: url("./img/page_left_background.png");
opacity: 0.5;
width: 60px;
}
.wowbook-control-currentPage {
font-family: "Segoe UI",Helvetica,Arial,sans-serif;
}
</style>
<script src="./wow_book/wow_book.min.js"></script>
<script type="text/javascript">
$(function(){
function fullscreenErrorHandler(){
if (self!=top) return "The frame is blocking full screen mode. Click on 'remove frame' button above and try to go full screen again."
}
var tableOfContents = [
["Eiffel Tower", 0],
["Breakfast", 3],
["Snowy Day", 5],
["Mountains", 7],
];
$("#book3").wowBook({
//container: true,
//containerHeight: 1056,
//containerWidth: 816*2,
height : 856,
width : 725*2,
hardcovers: true,
toolbar: "lastLeft, left, currentPage, right, lastRight, find, toc, zoomin, zoomout, download, flipsound, fullscreen, thumbnails,share",
toolbarPosition: "bottom",
perspective: 4000,
responsiveHandleWidth: 50 ,
displayToc: true,
toc: tableOfContents,
share: "twitter, facebook, reddit"
});
});
</script>
</body>
</html>
from: 3D FlipBook - Sources format
https://previews.customer.envatousercontent.com/files/63124142/index.html
Newspaper FlipBook in jQuery (page-flip.info)Diamond
FlipBook in jQuery (page-flip.info)
BookShelf Responsive (page-flip.info)
BookShelf Responsive (page-flip.info)
https://code.tutsplus.com/tutorials/how-to-use-the-wowbook-jquery-flipbook-plugin--cms-32575 介绍设置目录
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="geovindu,Geovin Du, 涂聚文">
<meta name="author" content="geovindu">
<title>WowBook, a flipbook jQuery plugin Preview html- create table of contents</title>
<script>
// Break out iframe on iOS cause safari expand iframe to fit the content, thus making
// the lightbox bigger than the browser window.
// We need to check for MSStream because Microsoft injected the word iPhone in IE11's userAgent therefore we need to exclude it.
var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
if (iOS && top.location!= self.location) {
top.location = self.location.href;
}
</script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="./wow_book/pdf.combined.min.js"></script>
<link rel="stylesheet" href="./wow_book/wow_book.css" type="text/css" />
<!-- Bootstrap Core CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<!-- Custom Fonts -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css" type="text/css">
<!-- Plugin CSS -->
<link rel="stylesheet" href="css/animate.min.css" type="text/css">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/creative.css" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!--
0,1 为封面页
第3页为示示第一页开始
最后两页为底封页
--->
<div id='book3'>
<div>
<img src='img/book_html/cover.jpg' class='wowbook-lazy' />
</div>
<div>
<h1>Easy to use</h1>
<p>Wowbook requires a basic knowledge of html and javascript to be used,
and comes several features to help you to create a book with minimum effort, like:</p>
<ul>
<li>Toolbar, table of contents and thumbnails can be created automatically.</li>
<li>Automatic page numbering.</li>
<li>Responsive.</li>
<li>目录</li>
<li>中国人.........................<a href="#book3/3">第1页</a></li>
<li>涂聚文.........................<a href="#book3/4">第2页</a></li>
<li>呀，啦嘞.......................<a href="#book3/5">第3页</a></li>
<li>扫贫...........................<a href="#book3/6">第4页</a></li>
<li>Ready to use examples (based on <a href='html5boilerplate.com'>html5 boilerplate</a> ).</li>
</ul>
</div>
<div>
<h1>PDF support</h1>
<p>
Wowbook render pdf files using the library <a href="https://github.com/mozilla/pdf.js" target="_blank">PDF.js</a> from Mozilla.
</p>
<p>Wowbook pdf implementation supports:</p>
<ul>
<li>external(html) links</li>
<li>table of contents</li>
<li>selectable text</li>
<li>experimental: pdf search</li>
</ul>
<p><b>Will wowbook render my pdf file?</b> To do a basic test open the pdf file with Firefox (PDF.js is the defaul PDF viewer on Firefox). If you want make sure you can send the file to be tested.
</p>
<p>PDF.js works in the following browsers: Firefox, Chrome, Opera, IE10+. Limited support for Safari, Android and IE9. Not supported on IE8. For more information <a href="https://github.com/mozilla/pdf.js/wiki/Frequently-Asked-Questions#what-browsers-are-supported" target="_blank">click here</a>.</p>
<p><a href="#book3/2">返回目录</a></p>
</div>
<div>
<h1>Responsive</h1>
<p>Comes with built in features to resize the book to adapt for different screens dimensions.</p>
<p>Touch support (with pinch to zoom and double click to zoom).</p>
<p>Responsive toolbar adapts to the size of screen.</p>
<p>If you need more control on how to resize the book, you can use the javascript API to change the book's size. </p>
<p><a href="#book3/2">返回目录</a></p>
</div>
<div>
<h1>Right to Left</h1>
<p>Wowbook can order the book pages from right to left if you need to use right-to-left script. </p>
<br/>
<h1>Lazy Loading</h1>
<p>Wowbook can defer the loading of a page contents until the page is shown. This is especially useful in books that contains a lot of images.</p>
<p><a href="#book3/2">返回目录</a></p>
</div>
<div>
<h1>Slide Show</h1>
<p>Turn your book into a slide show, with configurable change slide interval.</p>
<h1>Flash support</h1>
<p>It's possible to use flash (like youtube videos) in your books, but the page that contains the flash object will be limited to the "basic flipping effect" (and ONLY that page).</p>
<p><a href="#book3/2">返回目录</a></p>
</div>
<div class='more bg-double-page'>
<h1>And more</h1>
<ul>
<li>Browser support : <img src='img/book_html/browser_logos-32.png' alt='browser logos'/></li>
<li>Keyboard navigation</li>
<li>Mouse wheel navigation / zoom</li>
<li>Play flipping sound</li>
<li>Documentation</li>
<li>Source code</li>
<li>Examples</li>
<li>Rich API</li>
</ul>
</div>
<div>
<img src='img/book_html/cover_last.jpg' class='wowbook-lazy' />
</div>
</div>
<style>
.hidden-FIXME{
display: none;
}
#portfolio {
display: none;
}
header { display: none; }
#contact { display: none; }
#about {
display: none;
}
.navbar-header {
width: 100% !important;
}
.navbar-brand {
padding-right: 0;
font-size: 14px !important;
}
#nav-buy-now {
color: black;
float: right;
font-size: 14px;
font-weight: 700;
margin-right: -10px;
}
@media (min-width: 768px) {
#nav-buy-now {
margin-right: 0px;
}
}
#bs-example-navbar-collapse-1 {
display: none;
}
.wowbook {
font-family: "Open Sans","Helvetica Neue",Arial,sans-serif;
margin-left: auto;
margin-right: auto;
}
.wowbook-page-content {
padding: 1.5em;
}
.wowbook ul {
padding-left: 1em;
}
.book-thumb {
height: 150px;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.5)
}
#book1-trigger, #book2-trigger, #book3-trigger {
cursor: pointer;
}
#book1-trigger:hover, #book2-trigger:hover, #book3-trigger:hover {
background: #f8f8f8;
}
.wowbook-lightbox > .wowbook-close {
background: transparent !important;
border: none !important;
color: #222 !important;
font-size: 2.5em;
}
.wowbook-lightbox > .wowbook-close:hover {
background: #444 !important;
color: white !important;
border-radius: 3px;
}
.lightbox-images1 .wowbook-book-container {
background: #6d6b92; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #6d6b92 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#6d6b92 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center, #ffffff 0%,#6d6b92 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.lightbox-images1 > .wowbook-close,
.lightbox-images2 > .wowbook-close {
color: #ccc !important;
}
.lightbox-images2 .wowbook-book-container {
background: #1E2831; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #1E2831 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#1E2831 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center, #ffffff 0%,#1E2831 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.lightbox-pdf .wowbook-book-container {
background: #e5e5e5 url(./img/bg-lightbox-pdf.png); /* Old browsers */
background: #e5e5e5 -moz-radial-gradient(center, ellipse cover, #ffffff 20%, #bbbbbb 100%); /* FF3.6-15 */
background: #e5e5e5 -webkit-radial-gradient(center, ellipse cover, #ffffff 20%,#bbbbbb 100%); /* Chrome10-25,Safari5.1-6 */
background: #e5e5e5 radial-gradient(ellipse at center, #ffffff 20%,#bbbbbb 100%); /* W3C, IE10+, FF16+, Chrome26+,Opera12+, Safari7+*/
}
.lightbox-html .wowbook-book-container {
background: url(img/book_html/wood.jpg);
}
.lightbox-html .wowbook-toolbar {
margin-top: 1em; /* FIXME */
box-sizing: content-box !important;
}
.lightbox-html .wowbook-controls {
border-radius: 6px;
width: auto;
}
.lightbox-html.wowbook-mobile .wowbook-toolbar {
margin: 0;
}
.lightbox-html.wowbook-mobile .wowbook-controls {
border-radius: 0;
width: 100%;
}
/* .lightbox-html .wowbook-controls {
border-radius: 6px;
width: auto;
background: none;
color: rgba(60, 20, 20, 0.8);
text-shadow: 0 1px 0 #fff;
box-shadow: none;
}
.lightbox-html .wowbook-control:hover {
background: none;
color: white;
text-shadow: 0 1px 0 #fff, 0 0px 5px rgba(60, 20, 20, 1);
text-shadow: 0 1px 0 #fff, 0 0px 3px #fff;
}
*/
hr {
max-width: 450px;
}
</style>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Plugin JavaScript -->
<script src="js/jquery.easing.min.js"></script>
<script src="js/jquery.fittext.js"></script>
<script src="js/wow.min.js"></script>
<!-- Custom Theme JavaScript -->
<script src="js/creative.js"></script>
<link rel="stylesheet" href="./wow_book/wow_book.css" type="text/css" />
<style>
.wowbook-right .wowbook-gutter-shadow {
background-image: url("./img/page_right_background.png");
background-position: 0 0;
width: 75px;
}
.wowbook-left .wowbook-gutter-shadow {
background-image: url("./img/page_left_background.png");
opacity: 0.5;
width: 60px;
}
.wowbook-control-currentPage {
font-family: "Segoe UI",Helvetica,Arial,sans-serif;
}
</style>
<script src="./wow_book/wow_book.min.js"></script>
<script type="text/javascript">
$(function(){
function fullscreenErrorHandler(){
if (self!=top) return "The frame is blocking full screen mode. Click on 'remove frame' button above and try to go full screen again."
}
var tableOfContents = [
["Eiffel Tower", 0],
["Breakfast", 3],
["Snowy Day", 5],
["Mountains", 7],
];
$("#book3").wowBook({
//container: true,
//containerHeight: 1056,
//containerWidth: 816*2,
height : 856,
width : 725*2,
hardcovers: true,
toolbar: "lastLeft, left, currentPage, right, lastRight, find, toc, zoomin, zoomout, download, flipsound, fullscreen, thumbnails,share",
toolbarPosition: "bottom",
perspective: 4000,
responsiveHandleWidth: 50 ,
displayToc: true,
toc: tableOfContents,
share: "twitter, facebook, reddit"
});
});
</script>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="geovindu,Geovin Du, 涂聚文">
<meta name="author" content="geovindu">
<title>WowBook, a flipbook jQuery plugin Preview pdf- create table of contents</title>
<script>
// Break out iframe on iOS cause safari expand iframe to fit the content, thus making
// the lightbox bigger than the browser window.
// We need to check for MSStream because Microsoft injected the word iPhone in IE11's userAgent therefore we need to exclude it.
var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
if (iOS && top.location!= self.location) {
top.location = self.location.href;
}
</script>
<!-- Bootstrap Core CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<!-- Custom Fonts -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css" type="text/css">
<!-- Plugin CSS -->
<link rel="stylesheet" href="css/animate.min.css" type="text/css">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/creative.css" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<body id="page-top">
<div id='book2-trigger' class="col-lg-4 col-md-6 text-center">
<div class="service-box">
<img class='book-thumb' src='./img/aesop_fables/aesops-fables-cover-thumb(1).jpg' />
<h3>PDF</h3>
<p class="text-muted">Wowbook rendering a pdf file, with table of contents, selectable text and search(experimental).</p>
</div>
</div>
<div style='display: none'>
<div id="book2"></div>
</div>
<style>
.hidden-FIXME{
display: none;
}
#portfolio {
display: none;
}
header { display: none; }
#contact { display: none; }
#about {
display: none;
}
.navbar-header {
width: 100% !important;
}
.navbar-brand {
padding-right: 0;
font-size: 14px !important;
}
#nav-buy-now {
color: black;
float: right;
font-size: 14px;
font-weight: 700;
margin-right: -10px;
}
@media (min-width: 768px) {
#nav-buy-now {
margin-right: 0px;
}
}
#bs-example-navbar-collapse-1 {
display: none;
}
.wowbook {
font-family: "Open Sans","Helvetica Neue",Arial,sans-serif;
}
.wowbook-page-content {
padding: 1.5em;
}
.wowbook ul {
padding-left: 1em;
}
.book-thumb {
height: 150px;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.5)
}
#book1-trigger, #book2-trigger, #book3-trigger {
cursor: pointer;
}
#book1-trigger:hover, #book2-trigger:hover, #book3-trigger:hover {
background: #f8f8f8;
}
.wowbook-lightbox > .wowbook-close {
background: transparent !important;
border: none !important;
color: #222 !important;
font-size: 2.5em;
}
.wowbook-lightbox > .wowbook-close:hover {
background: #444 !important;
color: white !important;
border-radius: 3px;
}
.lightbox-images1 .wowbook-book-container {
background: #6d6b92; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #6d6b92 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#6d6b92 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center, #ffffff 0%,#6d6b92 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.lightbox-images1 > .wowbook-close,
.lightbox-images2 > .wowbook-close {
color: #ccc !important;
}
.lightbox-images2 .wowbook-book-container {
background: #1E2831; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #1E2831 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#1E2831 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center, #ffffff 0%,#1E2831 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.lightbox-pdf .wowbook-book-container {
background: #e5e5e5 url(./img/bg-lightbox-pdf.png); /* Old browsers */
background: #e5e5e5 -moz-radial-gradient(center, ellipse cover, #ffffff 20%, #bbbbbb 100%); /* FF3.6-15 */
background: #e5e5e5 -webkit-radial-gradient(center, ellipse cover, #ffffff 20%,#bbbbbb 100%); /* Chrome10-25,Safari5.1-6 */
background: #e5e5e5 radial-gradient(ellipse at center, #ffffff 20%,#bbbbbb 100%); /* W3C, IE10+, FF16+, Chrome26+,Opera12+, Safari7+*/
}
.lightbox-html .wowbook-book-container {
background: url(img/book_html/wood.jpg);
}
.lightbox-html .wowbook-toolbar {
margin-top: 1em; /* FIXME */
box-sizing: content-box !important;
}
.lightbox-html .wowbook-controls {
border-radius: 6px;
width: auto;
}
.lightbox-html.wowbook-mobile .wowbook-toolbar {
margin: 0;
}
.lightbox-html.wowbook-mobile .wowbook-controls {
border-radius: 0;
width: 100%;
}
/* .lightbox-html .wowbook-controls {
border-radius: 6px;
width: auto;
background: none;
color: rgba(60, 20, 20, 0.8);
text-shadow: 0 1px 0 #fff;
box-shadow: none;
}
.lightbox-html .wowbook-control:hover {
background: none;
color: white;
text-shadow: 0 1px 0 #fff, 0 0px 5px rgba(60, 20, 20, 1);
text-shadow: 0 1px 0 #fff, 0 0px 3px #fff;
}
*/
hr {
max-width: 450px;
}
</style>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Plugin JavaScript -->
<script src="js/jquery.easing.min.js"></script>
<script src="js/jquery.fittext.js"></script>
<script src="js/wow.min.js"></script>
<!-- Custom Theme JavaScript -->
<script src="js/creative.js"></script>
<link rel="stylesheet" href="./wow_book/wow_book.css" type="text/css" />
<style>
.wowbook-right .wowbook-gutter-shadow {
background-image: url("./img/page_right_background.png");
background-position: 0 0;
width: 75px;
}
.wowbook-left .wowbook-gutter-shadow {
background-image: url("./img/page_left_background.png");
opacity: 0.5;
width: 60px;
}
.wowbook-control-currentPage {
font-family: "Segoe UI",Helvetica,Arial,sans-serif;
}
</style>
<script type="text/javascript" src="./wow_book/pdf.combined.min.js"></script>
<script type="text/javascript" src="./wow_book/wow_book.min.js"></script>
<script type="text/javascript">
$(function(){
function fullscreenErrorHandler(){
if (self!=top) return "The frame is blocking full screen mode. Click on 'remove frame' button above and try to go full screen again."
}
/*
高度控制
$("#book2").wowBook({
height : 370
,width : 725*2
// ,maxWidth : 800
// ,maxHeight : 400
,pageNumbers: false
,pdf: "2.pdf"
,pdfFind: true
,pdfTextSelectable: true
,lightboxClass : "lightbox-pdf"
,centeredWhenClosed : true
,hardcovers : true
,curl: false
,toolbar: "lastLeft, left, currentPage, right, lastRight, find, toc, zoomin, zoomout, download, flipsound, fullscreen, thumbnails"
,toolbarPosition : 'bottom'
,perspective: 4000
,responsiveHandleWidth : 50
,onFullscreenError: fullscreenErrorHandler
,responsiveHandleWidth: 50
});*/
//显示目录
var tableOfContents = [
["Eiffel Tower", 0],
["Breakfast", 1],
["Snowy Day", 3],
["Mountains", 5],
];
var optionsBook2 = {
height : 1024
,width : 725*2
// ,maxWidth : 800
// ,maxHeight : 400
,pageNumbers: false
,pdf: "./img/aesop_fables/2.pdf"
,pdfFind: true
,pdfTextSelectable: true
,displayToc: false //是否加载时显示目录
,toc: tableOfContents
,lightbox : "#book2-trigger"
,lightboxClass : "lightbox-pdf"
,centeredWhenClosed : true
,hardcovers : true
,curl: false
,toolbar: "lastLeft, left, currentPage, right, lastRight, find, toc, zoomin, zoomout, download, flipsound, fullscreen, thumbnails"
,thumbnailsPosition : 'bottom'
,responsiveHandleWidth : 50
,onFullscreenError: fullscreenErrorHandler
};
var books = {
"#book2" : optionsBook2,
};
$("#book2-trigger").on("click",function(){
buildBook( "#"+this.id.replace("-trigger", "") );
})
function buildBook( elem ){
var book=$.wowBook(elem);
if (!book) {
$(elem).wowBook( books[elem] );
book=$.wowBook(elem);
console.log(book);
}
// book.opts.onHideLightbox = function(){
// setTimeout( function(){ book.destroy(); }, 1000);
// }
book.showLightbox();
}
});
</script>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="geovindu,Geovin Du, 涂聚文">
<meta name="author" content="geovindu">
<title>WowBook, a flipbook jQuery plugin Preview images- create table of contents</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="./wow_book/pdf.combined.min.js"></script>
<link rel="stylesheet" href="./wow_book/wow_book.css" type="text/css" />
<!-- Bootstrap Core CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<!-- Custom Fonts -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css" type="text/css">
<!-- Plugin CSS -->
<link rel="stylesheet" href="css/animate.min.css" type="text/css">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/creative.css" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body id="page-top">
<div id="book1">
<div>
<img class="book-thumb" src="img/lukfook/index.jpg" alt=""/>
</div>
<div>
<h1>目录</h1>
<ul>
<li>目录</li>
<li>酒店推荐.........................<a href="#book1/3">第1页</a>
<ul>
<li>涂聚文.........................<a href="#book1/4">第2页</a></li>
<li>呀，啦嘞.......................<a href="#book1/5">第3页</a></li>
<li>扫贫...........................<a href="#book1/6">第4页</a></li>
</ul>
</li>
<li>餐饮推荐...........................<a href="#book1/14">第12页</a></li>
</ul>
</div>
<div>
<img class="book-thumb" src="img/lukfook/02.png" alt=""/>
</div>
<div>
<img class="book-thumb" src="img/lukfook/03.jpg" alt=""/>
</div>
<div>
<img class="book-thumb" src="img/lukfook/04.jpg" alt=""/>
</div>
<div>
<img class="book-thumb" src="img/lukfook/05.jpg" alt=""/>
</div>
<div>
<img class="book-thumb" src="img/lukfook/06.jpg" alt=""/>
</div>
<div>
<img class="book-thumb" src="img/lukfook/07.jpg" alt=""/>
</div>
<div>
<img class="book-thumb" src="img/lukfook/08.png" alt=""/>
</div>
<div>
<img class="book-thumb" src="img/lukfook/09.jpg" alt=""/>
</div>
<div>
<img class="book-thumb" src="img/lukfook/10.jpg" alt=""/>
</div>
<div>
<img class="book-thumb" src="img/lukfook/11.jpg" alt=""/>
</div>
<div>
<img class="book-thumb" src="img/lukfook/12.jpg" alt=""/>
</div>
<div>
<img class="book-thumb" src="img/lukfook/13.jpg" alt=""/>
</div>
<div>
<img class="book-thumb" src="img/lukfook/14.jpg" alt=""/>
</div>
<div>
<img class="book-thumb" src="img/lukfook/15.jpg" alt=""/>
</div>
<div>
<img class="book-thumb" src="img/lukfook/16.jpg" alt=""/>
</div>
<div>
<img class="book-thumb" src="img/lukfook/17.jpg" alt=""/>
</div>
<div>
<img class="book-thumb" src="img/lukfook/18.jpg" alt=""/>
</div>
<div>
<img class="book-thumb" src="img/lukfook/19.jpg" alt=""/>
</div>
<div>
<img class="book-thumb" src="img/lukfook/20.jpg" alt=""/>
</div>
</div>
<style>
.book-thumb{
width:100%;
height: 100%;
}
.hidden-FIXME{
display: none;
}
#portfolio {
display: none;
}
header { display: none; }
#contact { display: none; }
#about {
display: none;
}
.navbar-header {
width: 100% !important;
}
.navbar-brand {
padding-right: 0;
font-size: 14px !important;
}
#nav-buy-now {
color: black;
float: right;
font-size: 14px;
font-weight: 700;
margin-right: -10px;
}
@media (min-width: 768px) {
#nav-buy-now {
margin-right: 0px;
}
}
#bs-example-navbar-collapse-1 {
display: none;
}
.wowbook {
font-family: "Open Sans","Helvetica Neue",Arial,sans-serif;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.wowbook-page-content {
padding: 1.5em;
}
.wowbook ul {
padding-left: 1em;
}
.book-thumb {
/*height: 150px;*/
box-shadow: 0 0 3px rgba(0, 0, 0, 0.5)
}
#book1-trigger, #book2-trigger, #book3-trigger {
cursor: pointer;
}
#book1-trigger:hover, #book2-trigger:hover, #book3-trigger:hover {
background: #f8f8f8;
}
.wowbook-lightbox > .wowbook-close {
background: transparent !important;
border: none !important;
color: #222 !important;
font-size: 2.5em;
}
.wowbook-lightbox > .wowbook-close:hover {
background: #444 !important;
color: white !important;
border-radius: 3px;
}
.lightbox-images1 .wowbook-book-container {
background: #6d6b92; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #6d6b92 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#6d6b92 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center, #ffffff 0%,#6d6b92 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.lightbox-images1 > .wowbook-close,
.lightbox-images2 > .wowbook-close {
color: #ccc !important;
}
.lightbox-images2 .wowbook-book-container {
background: #1E2831; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #1E2831 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#1E2831 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center, #ffffff 0%,#1E2831 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.lightbox-pdf .wowbook-book-container {
background: #e5e5e5 url(./img/bg-lightbox-pdf.png); /* Old browsers */
background: #e5e5e5 -moz-radial-gradient(center, ellipse cover, #ffffff 20%, #bbbbbb 100%); /* FF3.6-15 */
background: #e5e5e5 -webkit-radial-gradient(center, ellipse cover, #ffffff 20%,#bbbbbb 100%); /* Chrome10-25,Safari5.1-6 */
background: #e5e5e5 radial-gradient(ellipse at center, #ffffff 20%,#bbbbbb 100%); /* W3C, IE10+, FF16+, Chrome26+,Opera12+, Safari7+*/
}
.lightbox-html .wowbook-book-container {
background: url(img/book_html/wood.jpg);
}
.lightbox-html .wowbook-toolbar {
margin-top: 1em; /* FIXME */
box-sizing: content-box !important;
}
.lightbox-html .wowbook-controls {
border-radius: 6px;
width: auto;
}
.lightbox-html.wowbook-mobile .wowbook-toolbar {
margin: 0;
}
.lightbox-html.wowbook-mobile .wowbook-controls {
border-radius: 0;
width: 100%;
}
/* .lightbox-html .wowbook-controls {
border-radius: 6px;
width: auto;
background: none;
color: rgba(60, 20, 20, 0.8);
text-shadow: 0 1px 0 #fff;
box-shadow: none;
}
.lightbox-html .wowbook-control:hover {
background: none;
color: white;
text-shadow: 0 1px 0 #fff, 0 0px 5px rgba(60, 20, 20, 1);
text-shadow: 0 1px 0 #fff, 0 0px 3px #fff;
}
*/
hr {
max-width: 450px;
}
</style>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Plugin JavaScript -->
<script src="js/jquery.easing.min.js"></script>
<script src="js/jquery.fittext.js"></script>
<script src="js/wow.min.js"></script>
<!-- Custom Theme JavaScript -->
<script src="js/creative.js"></script>
<link rel="stylesheet" href="./wow_book/wow_book.css" type="text/css" />
<style>
.wowbook-right .wowbook-gutter-shadow {
background-image: url("./img/page_right_background.png");
background-position: 0 0;
width: 75px;
}
.wowbook-left .wowbook-gutter-shadow {
background-image: url("./img/page_left_background.png");
opacity: 0.5;
width: 60px;
}
.wowbook-control-currentPage {
font-family: "Segoe UI",Helvetica,Arial,sans-serif;
}
</style>
<script src="./wow_book/wow_book.min.js"></script>
<script type="text/javascript">
$(function(){
function fullscreenErrorHandler(){
if (self!=top) return "The frame is blocking full screen mode. Click on 'remove frame' button above and try to go full screen again."
}
//children: 如何设置字节点目录
var tableOfContents = [
["封面", 0],
["目录",1],
["酒店",2],
[" 亚朵酒店",3],
[" 珀丽酒店",4],
[" 明阳酒店", 5],
[" 艺嘉酒店", 6],
[" 百合酒店", 7],
[" 乐酒店", 8],
[" 香格里拉酒店", 9],
[" 新新地酒店", 10],
[" 维也纳酒店", 11],
[" 7天连锁酒店", 12],
["餐饮推荐", 13],
[" 汉阳馆，海底捞，点都德", 14],
[" ", 15],
[" ", 16],
[" ", 17],
[" ", 18],
["封底", 19],
];
$("#book1").wowBook({
//container: true,
//containerHeight: 1056,
//containerWidth: 816*2,
/**/
height : 920,
width : 816*2,
hardcovers: true,
toolbar: "lastLeft, left, currentPage, right, lastRight, find, toc, zoomin, zoomout, download, flipsound, fullscreen, thumbnails,share",
toolbarPosition: "bottom",
perspective: 4000,
responsiveHandleWidth: 50 ,
displayToc: false,
toc: tableOfContents,
share: "twitter, facebook, reddit"
});
});
</script>
</body>
</html>
https://docs.microsoft.com/en-us/previous-versions/dotnet/articles/aa478959(v=msdn.10)?redirectedfrom=MSDN
https://www.codeproject.com/articles/23949/building-trees-from-lists-in-net
https://www.c-sharpcorner.com/article/create-jstree-simply/
https://gijgo.com/tree/demos/bootstrap-treeview
https://asp.net.bigresource.com/c-Generate-table-of-content-using-itextsharp--klZPlsSN9.html
https://stackoverflow.com/questions/39037594/how-to-create-table-of-contents-in-itextsharp
https://stackoverflow.com/questions/187619/is-there-a-javascript-solution-to-generating-a-table-of-contents-for-a-page
https://github.com/leisn/MarkdigToc
https://webdevtrick.com/dynamic-table-of-contents/
https://webdevtrick.com/demos/table-of-contents/
<!doctype html>
<html>
<head runat="server">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="geovindu,Geovin Du, 涂聚文">
<meta name="author" content="geovindu">
<title>深圳展廳『消費指南』小冊子</title>
<script type="text/javascript">
// Break out iframe on iOS cause safari expand iframe to fit the content, thus making
// the lightbox bigger than the browser window.
// We need to check for MSStream because Microsoft injected the word iPhone in IE11's userAgent therefore we need to exclude it.
var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
if (iOS && top.location!= self.location) {
top.location = self.location.href;
}
</script>
<!-- Bootstrap Core CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<!-- jQuery -->
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<!-- Custom Fonts -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css" type="text/css">
<!-- Plugin CSS -->
<link rel="stylesheet" href="css/animate.min.css" type="text/css">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/creative.css" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body id="page-top">
<!-- Bootstrap Core JavaScript -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<form id="form1" runat="server">
<div runat="server" id="geovindu">
</div>
<div id="book1">
<asp:Repeater ID="rptList" runat="server">
<HeaderTemplate>
</HeaderTemplate>
<ItemTemplate>
<%#Eval("LetImage")%>
</ItemTemplate>
<FooterTemplate>
<%#rptList.Items.Count == 0 ? "<div align=\"center\" colspan=\"4\">暫無記錄</div>" : ""%>
</FooterTemplate>
</asp:Repeater>
</div>
</form>
<link rel="stylesheet" href="./css/bookthumb.css" type="text/css" />
<!-- Plugin JavaScript -->
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/jquery.fittext.js"></script>
<script type="text/javascript" src="js/wow.min.js"></script>
<!-- Custom Theme JavaScript -->
<script type="text/javascript" src="js/creative.js"></script>
<link rel="stylesheet" href="./lib/wow_book.css" type="text/css" />
<link rel="stylesheet" href="./css/book.css" type="text/css" />
<script type="text/javascript" src="./lib/wow_book.min.js"></script>
<script type="text/javascript" src="./js/bookimg.js"/></script>
</body>
</html>
哲学管理(学)人生, 文学艺术生活, 自动(计算机学)物理(学)工作, 生物(学)化学逆境, 历史(学)测绘(学)时间, 经济(学)数学金钱(理财), 心理(学)医学情绪, 诗词美容情感, 美学建筑(学)家园, 解构建构(分析)整合学习, 智商情商(IQ、EQ)运筹(学)生存.---Geovin Du(涂聚文）
浙公网安备 33010602011771号