#177 Nebraska-Man strip show scrollable view on mobile

This commit is contained in:
neil 2022-11-05 15:26:44 +08:00
parent 2907cfa4e0
commit fc4a93a26c
2 changed files with 103 additions and 80 deletions

View file

@ -65,39 +65,53 @@
}
.flipbook .page {
height: 100%;
width: 100%;
height: 100%;
}
.flipbook .page img {
width: 100%;
height: 100%;
}
/* .flipbook.desktop .page {
height: 100%;
}
.flipbook.desktop .page img {
height: 100%;
} */
#comicstrip #desktop_view {
display: none;
}
#comistrip #flipbook_mobile {
display: block;
}
#comicstrip.desktop #desktop_view {
display: flex;
}
#comicstrip.desktop #flipbook_mobile {
display: none;
}
</style>
<section class="nb-man-latest">
<div class="container">
<div class="row">
<div class="container" id="comicstrip">
<div class="row" id="desktop_view">
<div class="col">
<div class="wrapper">
<div class="aspect">
<div class="aspect-inner">
<div class="flipbook" id="flipbook">
<div class="page"><img src="/Images/nb-man-cover-one.jpg" draggable="false" alt="" /></div>
<div class="page"><img src="/Images/nebraksa_man/Nebraska_Man_01.jpg" draggable="false" alt="" /></div>
<div class="page"><img src="/Images/nebraksa_man/Nebraska_Man_02.jpg" draggable="false" alt="" /></div>
<div class="page"><img src="/Images/nebraksa_man/Nebraska_Man_03.jpg" draggable="false" alt="" /></div>
<div class="page"><img src="/Images/nebraksa_man/Nebraska_Man_04.jpg" draggable="false" alt="" /></div>
<div class="page"><img src="/Images/nebraksa_man/Nebraska_Man_05.jpg" draggable="false" alt="" /></div>
<div class="page"><img src="/Images/nebraksa_man/Nebraska_Man_06.jpg" draggable="false" alt="" /></div>
<div class="page"><img src="/Images/nebraksa_man/Nebraska_Man_07.jpg" draggable="false" alt="" /></div>
<div class="page"><img src="/Images/nebraksa_man/Nebraska_Man_08.jpg" draggable="false" alt="" /></div>
</div>
{{- partial "nebraska-man-001.html" "flipbook_desktop" -}}
</div>
</div>
</div>
</div>
</div>
{{- partial "nebraska-man-001.html" "flipbook_mobile" -}}
</div>
</section>
@ -187,25 +201,25 @@
<script type="text/javascript">
const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
function loadApp() {
// Create the flipbook
$('.flipbook').turn({
// Enable gradients
gradients: true,
// Auto center this flipbook
autoCenter: true
});
}
// Load the HTML4 version if there's not CSS transform
if (!isMobile) {
const comicstripEl = document.getElementById('comicstrip');
comicstripEl.classList.add('desktop');
const flipbookEL = document.getElementById('flipbook_desktop');
// Load the HTML4 version if there's not CSS transform
yepnope({
test : Modernizr.csstransforms,
yep: ['/js/turn.js'],
@ -214,8 +228,6 @@ yepnope({
complete: loadApp
});
var flipbookEL = document.getElementById('flipbook');
window.addEventListener('resize', function (e) {
flipbookEL.style.width = '';
flipbookEL.style.height = '';
@ -225,7 +237,7 @@ window.addEventListener('resize', function (e) {
$(flipbookEL).turn({
autoCenter: true
});
}
</script>

View file

@ -0,0 +1,11 @@
<div class="flipbook" id="{{- . -}}">
<div class="page"><img src="/Images/nb-man-cover-one.jpg" draggable="false" alt="" /></div>
<div class="page"><img src="/Images/nebraksa_man/Nebraska_Man_01.jpg" draggable="false" alt="" /></div>
<div class="page"><img src="/Images/nebraksa_man/Nebraska_Man_02.jpg" draggable="false" alt="" /></div>
<div class="page"><img src="/Images/nebraksa_man/Nebraska_Man_03.jpg" draggable="false" alt="" /></div>
<div class="page"><img src="/Images/nebraksa_man/Nebraska_Man_04.jpg" draggable="false" alt="" /></div>
<div class="page"><img src="/Images/nebraksa_man/Nebraska_Man_05.jpg" draggable="false" alt="" /></div>
<div class="page"><img src="/Images/nebraksa_man/Nebraska_Man_06.jpg" draggable="false" alt="" /></div>
<div class="page"><img src="/Images/nebraksa_man/Nebraska_Man_07.jpg" draggable="false" alt="" /></div>
<div class="page"><img src="/Images/nebraksa_man/Nebraska_Man_08.jpg" draggable="false" alt="" /></div>
</div>