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

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

@ -1,14 +1,17 @@
<div class="publication">
<div id="magazine"> <div id="magazine">
</div> </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" %> <%= stylesheet_link_tag "publications/pdf-turn.css" %>
<%= javascript_include_tag "publications/pdf/pdf.worker.js" %> <%= javascript_include_tag "publications/pdf/pdf.worker.js" %>
<%= javascript_include_tag "publications/pdf/pdf.js" %> <%= javascript_include_tag "publications/pdf/pdf.js" %>
<%= javascript_include_tag "publications/turn.min.js" %> <%= javascript_include_tag "publications/turn.min.js" %>
<%= javascript_include_tag "publications/pdf-turn.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"> <style type="text/css">
div.flip-control { div.flip-control {
width: 400px; width: 400px;
@ -52,6 +55,9 @@ div.flip-control a {
background-image: -o-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%); background-image: -ms-linear-gradient(left, #FFF 95%, #ddd 100%);
} }
.publication .button-mid {
display: block;
}
</style> </style>
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function(){ $(document).ready(function(){
@ -169,11 +175,11 @@ div.flip-control a {
$('#magazine').turn('next'); $('#magazine').turn('next');
}); });
$('#prev').click(function(){ $('.publication .prev-button').click(function(){
$('#magazine').turn('previous'); $('#magazine').turn('previous');
return false; return false;
}); });
$('#next').click(function(){ $('.publication .next-button').click(function(){
$('#magazine').turn('next'); $('#magazine').turn('next');
return false; return false;
}); });