chiu
/
publication
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

調整上下頁樣式

This commit is contained in:
邱博亞 2023-06-23 18:17:59 +08:00
parent 9b0762f1e9
commit 3f836c8374
1 changed files with 41 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
app/views/publications/_viewer.html.erb
View File

@ -1,14 +1,17 @@
<div id="magazine">
<div class="publication">
<div id="magazine">
</div>
<ul class="button-mid">
<i class="fa fa-angle-left prev-button" aria-label="上一張"></i>
<i class="fa fa-angle-right next-button" aria-label="下一張"></i>
</ul>
</div>
<%= stylesheet_link_tag "publications/pdf-turn.css" %>
<%= javascript_include_tag "publications/pdf/pdf.worker.js" %>
<%= javascript_include_tag "publications/pdf/pdf.js" %>
<%= javascript_include_tag "publications/turn.min.js" %>
<%= javascript_include_tag "publications/pdf-turn.js" %>
<div class="flip-control">
<a href="#" id="prev"> Previous </a>
<a href="#" id="next"> Next </a>
</div>
<style type="text/css">
div.flip-control {
width: 400px;
@ -19,39 +22,42 @@ div.flip-control a {
margin-left: 10px;
}
#magazine {
margin: auto;
width: 100%;
}
margin: auto;
width: 100%;
}
#magazine .turn-page {
background-color: #ccc;
background-size: 100% 100%;
}
#magazine .turn-page {
background-color: #ccc;
background-size: 100% 100%;
}
#magazine .loader {
background-image: url(https://cdn.jsdelivr.net/gh/Qiu-Weidong/blog/resources/images/loader.gif);
width: 24px;
height: 24px;
display: block;
position: absolute;
top: 238px;
left: 188px;
}
#magazine .loader {
background-image: url(https://cdn.jsdelivr.net/gh/Qiu-Weidong/blog/resources/images/loader.gif);
width: 24px;
height: 24px;
display: block;
position: absolute;
top: 238px;
left: 188px;
}
#magazine .odd {
background-image: -webkit-linear-gradient(right, #FFF 95%, #ddd 100%);
background-image: -moz-linear-gradient(right, #FFF 95%, #ddd 100%);
background-image: -o-linear-gradient(right, #FFF 95%, #ddd 100%);
background-image: -ms-linear-gradient(right, #FFF 95%, #ddd 100%);
#magazine .odd {
background-image: -webkit-linear-gradient(right, #FFF 95%, #ddd 100%);
background-image: -moz-linear-gradient(right, #FFF 95%, #ddd 100%);
background-image: -o-linear-gradient(right, #FFF 95%, #ddd 100%);
background-image: -ms-linear-gradient(right, #FFF 95%, #ddd 100%);
}
}
#magazine .even {
background-image: -webkit-linear-gradient(left, #FFF 95%, #ddd 100%);
background-image: -moz-linear-gradient(left, #FFF 95%, #ddd 100%);
background-image: -o-linear-gradient(left, #FFF 95%, #ddd 100%);
background-image: -ms-linear-gradient(left, #FFF 95%, #ddd 100%);
}
#magazine .even {
background-image: -webkit-linear-gradient(left, #FFF 95%, #ddd 100%);
background-image: -moz-linear-gradient(left, #FFF 95%, #ddd 100%);
background-image: -o-linear-gradient(left, #FFF 95%, #ddd 100%);
background-image: -ms-linear-gradient(left, #FFF 95%, #ddd 100%);
}
.publication .button-mid {
display: block;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
@ -169,11 +175,11 @@ div.flip-control a {
$('#magazine').turn('next');
});
$('#prev').click(function(){
$('.publication .prev-button').click(function(){
$('#magazine').turn('previous');
return false;
});
$('#next').click(function(){
$('.publication .next-button').click(function(){
$('#magazine').turn('next');
return false;
});