flickity-fullscreen
Version:
Enable fullscreen view of Flickity carousels
218 lines (178 loc) • 11.5 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>fullscreen</title>
<link rel="stylesheet" href="../node_modules/flickity/css/flickity.css" />
<link rel="stylesheet" href="../fullscreen.css" />
<style>
* { box-sizing: border-box; }
body {
background: #EEE;
font-family: sans-serif;
}
.container {
max-width: 720px;
padding: 40px;
background: white;
margin: 0px auto ;
}
.copy {
font-size: 20px;
color: #555;
line-height: 1.4;
}
.carousel {
margin: 80px 0;
}
.carousel.is-fullscreen {
margin: 0;
}
.carousel-image-cell {
height: 240px;
min-width: 100px;
margin-right: 10px;
}
.carousel-image-cell img {
display: block;
max-height: 100%;
/* HACK vertically center */
/* could use flexbox, but doesn't work in Chrome & Safari */
top: 50%;
position: relative;
transform: translateY(-50%)
}
.carousel.is-fullscreen .carousel-image-cell {
height: 100%;
}
.carousel-number-cell {
width: 80%;
background: #6C6;
border-radius: 4px;
height: 200px;
margin: 0 5px;
display: flex;
align-items: center;
justify-content: center;
}
.carousel-number-cell b {
font-size: 80px;
color: white;
display: block;
}
.carousel.is-fullscreen .carousel-number-cell {
height: 100%;
}
</style>
</head>
<body>
<div class="container">
<h1>fullscreen</h1>
<div class="copy">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<ul>
<li>consectetur adipisicing elit, sed do eiusmod tempor </li>
<li>incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </li>
<li>fugiat nulla pariatur. Excepteur sint </li>
<li>occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<h2>Cells fit to image</h2>
<div class="carousel carousel--gallery">
<div class="carousel-image-cell"><img data-flickity-lazyload="https://picsum.photos/720/540/?image=517" /></div>
<div class="carousel-image-cell"><img data-flickity-lazyload="https://picsum.photos/540/720/?image=696" /></div>
<div class="carousel-image-cell"><img data-flickity-lazyload="https://picsum.photos/720/540/?image=56" /></div>
<div class="carousel-image-cell"><img data-flickity-lazyload="https://picsum.photos/800/500/?image=1084" /></div>
<div class="carousel-image-cell"><img data-flickity-lazyload="https://picsum.photos/720/540/?image=1080" /></div>
<div class="carousel-image-cell"><img data-flickity-lazyload="https://picsum.photos/640/640/?image=1074" /></div>
<div class="carousel-image-cell"><img data-flickity-lazyload="https://picsum.photos/720/540/?image=1069" /></div>
<div class="carousel-image-cell"><img data-flickity-lazyload="https://picsum.photos/800/500/?image=1062" /></div>
<div class="carousel-image-cell"><img data-flickity-lazyload="https://picsum.photos/720/540/?image=1002" /></div>
<div class="carousel-image-cell"><img data-flickity-lazyload="https://picsum.photos/640/640/?image=935" /></div>
<div class="carousel-image-cell"><img data-flickity-lazyload="https://picsum.photos/720/540/?image=855" /></div>
<div class="carousel-image-cell"><img data-flickity-lazyload="https://picsum.photos/640/640/?image=824" /></div>
<div class="carousel-image-cell"><img data-flickity-lazyload="https://picsum.photos/540/720/?image=797" /></div>
<div class="carousel-image-cell"><img data-flickity-lazyload="https://picsum.photos/720/540/?image=718" /></div>
<div class="carousel-image-cell"><img data-flickity-lazyload="https://picsum.photos/720/540/?image=652" /></div>
<div class="carousel-image-cell"><img data-flickity-lazyload="https://picsum.photos/720/540/?image=627" /></div>
<div class="carousel-image-cell"><img data-flickity-lazyload="https://picsum.photos/720/540/?image=429" /></div>
<div class="carousel-image-cell"><img data-flickity-lazyload="https://picsum.photos/720/540/?image=433" /></div>
<div class="carousel-image-cell"><img data-flickity-lazyload="https://picsum.photos/720/540/?image=189" /></div>
<div class="carousel-image-cell"><img data-flickity-lazyload="https://picsum.photos/720/540/?image=40" /></div>
</div>
<p>
<button class="expand-button">Fullscreen</button>
</p>
<div class="copy">
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<ul>
<li>Lorem ipsum dolor sit amet, </li>
<li>consectetur adipisicing elit, sed do eiusmod tempor </li>
<li>incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="carousel carousel--numbers" data-flickity='{ "fullscreen": true }'>
<div class="carousel-number-cell"><b>1</b></div>
<div class="carousel-number-cell"><b>2</b></div>
<div class="carousel-number-cell"><b>3</b></div>
<div class="carousel-number-cell"><b>4</b></div>
<div class="carousel-number-cell"><b>5</b></div>
<div class="carousel-number-cell"><b>6</b></div>
<div class="carousel-number-cell"><b>7</b></div>
<div class="carousel-number-cell"><b>8</b></div>
</div>
<div class="copy">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<svg viewBox="0 0 32 32" width="32" height="32">
<path d="M0 32 V 20 H 4 v 8 h 8 v 4 Z m 32 0 V 20H28v8H20v4ZM0 0V12H4V4h8V0ZM20 0V4h8v8h4V0Z" />
</svg>
<svg viewBox="0 0 32 32" style="width: 32px; height: 32px">
<path d="M 0 0 h12 v4 h-8 v8 h-4 Z M 32 0 v12 h-4 v-8 h-8 v-4 Z
M 0 32 v-12 h4 v8 h8 v4 Z M 32 32 h-12 v-4 h8 v-8 h4 Z" />
</svg>
</div>
<script src="../node_modules/get-size/get-size.js"></script>
<script src="../node_modules/ev-emitter/ev-emitter.js"></script>
<script src="../node_modules/fizzy-ui-utils/utils.js"></script>
<script src="../node_modules/unidragger/unidragger.js"></script>
<script src="../node_modules/flickity/js/cell.js"></script>
<script src="../node_modules/flickity/js/slide.js"></script>
<script src="../node_modules/flickity/js/animate.js"></script>
<script src="../node_modules/flickity/js/core.js"></script>
<script src="../node_modules/flickity/js/drag.js"></script>
<script src="../node_modules/flickity/js/prev-next-button.js"></script>
<script src="../node_modules/flickity/js/page-dots.js"></script>
<script src="../node_modules/flickity/js/add-remove-cell.js"></script>
<script src="../node_modules/flickity/js/player.js"></script>
<script src="../node_modules/flickity/js/lazyload.js"></script>
<script src="../fullscreen.js"></script>
<script>
var galleryCarousel = document.querySelector('.carousel--gallery');
var galleryFlkty = new Flickity( galleryCarousel, {
fullscreen: true,
lazyLoad: 2,
});
document.querySelector('.expand-button').onclick = function() {
galleryFlkty.viewFullscreen();
};
</script>
</body>
</html>