Real3D Flipbookのjquery版で冊子を作成しようと思っています。
参考にさせて頂いたサイトは
https://net-rabo.work/demo/pdf_js_book_sample/book_shelf.html
です。
同じように組み込んでみたのですが、本棚の冊子をクリックしてlightboxは立ち上がるのですが、肝心の冊子画像が表示されません。
以下ソースコードになります。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/flipbook.style.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.css">
<script src="js/flipbook.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".book-1").flipBook({
pages:[
{src:"images/book2/page1.jpg", thumb:"images/book2/thumb1.jpg", title:"Cover"},
{src:"images/book2/page2.jpg", thumb:"images/book2/thumb2.jpg", title:"Page two"},
{src:"images/book2/page3.jpg", thumb:"images/book2/thumb3.jpg", title:"Page three"},
{src:"images/book2/page4.jpg", thumb:"images/book2/thumb4.jpg", title:""},
{src:"images/book2/page5.jpg", thumb:"images/book2/thumb5.jpg", title:"Page five"},
{src:"images/book2/page6.jpg", thumb:"images/book2/thumb6.jpg", title:"Page six"},
{src:"images/book2/page7.jpg", thumb:"images/book2/thumb7.jpg", title:"Page seven"},
{src:"images/book2/page8.jpg", thumb:"images/book2/thumb8.jpg", title:"Last"}
],
lightBox:true
});
$(".book-2").flipBook({
pages:[
{src:"images/book2/page1.jpg", thumb:"images/book2/thumb1.jpg", title:"Cover"},
{src:"images/book2/page2.jpg", thumb:"images/book2/thumb2.jpg", title:"Page two"},
{src:"images/book2/page3.jpg", thumb:"images/book2/thumb3.jpg", title:"Page three"},
{src:"images/book2/page4.jpg", thumb:"images/book2/thumb4.jpg", title:""},
{src:"images/book2/page5.jpg", thumb:"images/book2/thumb5.jpg", title:"Page five"},
{src:"images/book2/page6.jpg", thumb:"images/book2/thumb6.jpg", title:"Page six"},
{src:"images/book2/page7.jpg", thumb:"images/book2/thumb7.jpg", title:"Page seven"},
{src:"images/book2/page8.jpg", thumb:"images/book2/thumb8.jpg", title:"Last"}
],
lightBox:true
});
$(".book-3").flipBook({
pages:[
{src:"images/book2/page1.jpg", thumb:"images/book2/thumb1.jpg", title:"Cover"},
{src:"images/book2/page2.jpg", thumb:"images/book2/thumb2.jpg", title:"Page two"},
{src:"images/book2/page3.jpg", thumb:"images/book2/thumb3.jpg", title:"Page three"},
{src:"images/book2/page4.jpg", thumb:"images/book2/thumb4.jpg", title:""},
{src:"images/book2/page5.jpg", thumb:"images/book2/thumb5.jpg", title:"Page five"},
{src:"images/book2/page6.jpg", thumb:"images/book2/thumb6.jpg", title:"Page six"},
{src:"images/book2/page7.jpg", thumb:"images/book2/thumb7.jpg", title:"Page seven"},
{src:"images/book2/page8.jpg", thumb:"images/book2/thumb8.jpg", title:"Last"}
],
lightBox:true
});
$(".book-4").flipBook({
pages:[
{src:"images/book2/page1.jpg", thumb:"images/book2/thumb1.jpg", title:"Cover"},
{src:"images/book2/page2.jpg", thumb:"images/book2/thumb2.jpg", title:"Page two"},
{src:"images/book2/page3.jpg", thumb:"images/book2/thumb3.jpg", title:"Page three"},
{src:"images/book2/page4.jpg", thumb:"images/book2/thumb4.jpg", title:""},
{src:"images/book2/page5.jpg", thumb:"images/book2/thumb5.jpg", title:"Page five"},
{src:"images/book2/page6.jpg", thumb:"images/book2/thumb6.jpg", title:"Page six"},
{src:"images/book2/page7.jpg", thumb:"images/book2/thumb7.jpg", title:"Page seven"},
{src:"images/book2/page8.jpg", thumb:"images/book2/thumb8.jpg", title:"Last"}
],
lightBox:true
});
})
</script>
<style type="text/css">
.bookshelf .thumb{
display: inline-block;
cursor: pointer;
margin: 0px 0.5%;
width: 15% !important;
box-shadow:0px 1px 3px rgba(0,0,0,.3);
max-width:100px;
}
.bookshelf .thumb img{
width:100%;
display:block;
vertical-align:top;
}
.bookshelf .shelf-img{
z-index:0;
height: auto;
max-width: 100%;
vertical-align: top;
margin-top:-12px;
}
.bookshelf .covers{
width:100%;
height:auto;
z-index: 99;
position: relative;
text-align:center;
}
.bookshelf{
text-align: center;
padding:0px;
}
</style>
</head>
<body>
<div class="bookshelf">
<div class="covers">
<div class="thumb book-1"><img src="images/book2/thumb1.jpg"></div>
<div class="thumb book-2"><img src="images/book2/thumb1.jpg"></div>
<div class="thumb book-3"><img src="images/book2/thumb1.jpg"></div>
<div class="thumb book-4"><img src="images/book2/thumb1.jpg"></div>
<div class="thumb book-4"><img src="images/book2/thumb1.jpg"></div>
</div>
<img class="shelf-img" src="images/shelf_wood.png">
</div>
<div class="bookshelf">
<div class="covers">
<div class="thumb book-1"><img src="images/book2/thumb1.jpg"></div>
<div class="thumb book-2"><img src="images/book2/thumb1.jpg"></div>
<div class="thumb book-3"><img src="images/book2/thumb1.jpg"></div>
</div>
<img class="shelf-img" src="images/shelf_glass.png">
</div>
<div class="bookshelf">
<div class="covers">
<div class="thumb book-1"><img src="images/book2/thumb1.jpg"></div>
<div class="thumb book-2"><img src="images/book2/thumb1.jpg"></div>
<div class="thumb book-3"><img src="images/book2/thumb1.jpg"></div>
<div class="thumb book-4"><img src="images/book2/thumb1.jpg"></div>
</div>
<img class="shelf-img" src="images/shelf_metal.png">
</div>
</body>
</html>
お詳しい方いらっしゃいましたら、ご教授頂けると幸いです。
宜しくお願い致します。
Q&A
自己解決
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。