├── .gitignore
├── bower.json
├── package.json
├── fullscreen.css
├── README.md
├── fullscreen.js
└── sandbox
    └── fullscreen.html


/.gitignore:
--------------------------------------------------------------------------------
1 | bower_components/
2 | node_modules/
3 | package-lock.json
4 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "flickity-fullscreen",
 3 |   "description": "Enable fullscreen view of Flickity carousels",
 4 |   "main": [
 5 |     "fullscreen.js",
 6 |     "fullscreen.css"
 7 |   ],
 8 |   "dependencies": {
 9 |     "flickity": "^2.1.0",
10 |     "tap-listener": "^2.0.0"
11 |   },
12 |   "authors": [
13 |     "David DeSandro"
14 |   ],
15 |   "license": "GPL-3.0",
16 |   "keywords": [
17 |     "flickity",
18 |     "carousel",
19 |     "fullscreen"
20 |   ],
21 |   "homepage": "",
22 |   "ignore": [
23 |     "**/.*",
24 |     "node_modules",
25 |     "bower_components",
26 |     "test",
27 |     "tests",
28 |     "package.json",
29 |     "sandbox"
30 |   ]
31 | }
32 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "flickity-fullscreen",
 3 |   "version": "1.0.1",
 4 |   "description": "Enable fullscreen view of Flickity carousels",
 5 |   "main": "fullscreen.js",
 6 |   "style": "fullscreen.css",
 7 |   "dependencies": {
 8 |     "flickity": "^2.1.0",
 9 |     "tap-listener": "^2.0.0"
10 |   },
11 |   "scripts": {
12 |     "test": "echo \"Error: no test specified\" && exit 1"
13 |   },
14 |   "keywords": [
15 |     "flickity",
16 |     "carousel",
17 |     "fullscreen"
18 |   ],
19 |   "author": "David DeSandro",
20 |   "license": "GPL-3.0",
21 |   "repository": {
22 |     "type": "git",
23 |     "url": "git+https://github.com/metafizzy/flickity-fullscreen.git"
24 |   },
25 |   "bugs": {
26 |     "url": "https://github.com/metafizzy/flickity-fullscreen/issues"
27 |   },
28 |   "homepage": "https://github.com/metafizzy/flickity-fullscreen#readme"
29 | }
30 | 


--------------------------------------------------------------------------------
/fullscreen.css:
--------------------------------------------------------------------------------
 1 | /* Flickity fullscreen v1.0.1
 2 | ------------------------- */
 3 | 
 4 | .flickity-enabled.is-fullscreen {
 5 |   position: fixed;
 6 |   left: 0;
 7 |   top: 0;
 8 |   width: 100%;
 9 |   height: 100%;
10 |   background: hsla(0, 0%, 0%, 0.9);
11 |   padding-bottom: 35px;
12 |   z-index: 1;
13 | }
14 | 
15 | .flickity-enabled.is-fullscreen .flickity-page-dots {
16 |   bottom: 10px;
17 | }
18 | 
19 | .flickity-enabled.is-fullscreen .flickity-page-dots .dot {
20 |   background: white;
21 | }
22 | 
23 | /* prevent page scrolling when flickity is fullscreen */
24 | html.is-flickity-fullscreen {
25 |   overflow: hidden;
26 | }
27 | 
28 | /* ---- flickity-fullscreen-button ---- */
29 | 
30 | .flickity-fullscreen-button {
31 |   display: block;
32 |   right: 10px;
33 |   top: 10px;
34 |   width: 24px;
35 |   height: 24px;
36 |   border-radius: 4px;
37 | }
38 | 
39 | /* right-to-left */
40 | .flickity-rtl .flickity-fullscreen-button {
41 |   right: auto;
42 |   left: 10px;
43 | }
44 | 
45 | .flickity-fullscreen-button-exit { display: none; }
46 | 
47 | .flickity-enabled.is-fullscreen .flickity-fullscreen-button-exit { display: block; }
48 | .flickity-enabled.is-fullscreen .flickity-fullscreen-button-view { display: none; }
49 | 
50 | .flickity-fullscreen-button .flickity-button-icon {
51 |   position: absolute;
52 |   width: 16px;
53 |   height: 16px;
54 |   left: 4px;
55 |   top: 4px;
56 | }
57 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Flickity fullscreen
  2 | 
  3 | _Enable fullscreen view for Flickity carousels_
  4 | 
  5 | ## Install
  6 | 
  7 | Add `fullscreen.css` to your stylesheets and `fullscreen.js` to your scripts.
  8 | 
  9 | ### Download
 10 | 
 11 | + [fullscreen.css](https://unpkg.com/flickity-fullscreen@1/fullscreen.css)
 12 | + [fullscreen.js](https://unpkg.com/flickity-fullscreen@1/fullscreen.js)
 13 | 
 14 | ### CDN
 15 | 
 16 | ``` html
 17 | <link rel="stylesheet" href="https://unpkg.com/flickity-fullscreen@1/fullscreen.css">
 18 | ```
 19 | 
 20 | ``` html
 21 | <script src="https://unpkg.com/flickity-fullscreen@1/fullscreen.js"></script>
 22 | ```
 23 | 
 24 | ### Package managers
 25 | 
 26 | npm: `npm install flickity-fullscreen`
 27 | 
 28 | Bower: `bower install flickity-fullscreen`
 29 | 
 30 | ## Usage
 31 | 
 32 | Enable fullscreen behavior by setting `fullscreen: true` in Flickity options.
 33 | 
 34 | ``` js
 35 | // jQuery
 36 | var $carousel = $('.carousel').flickity({
 37 |   fullscreen: true,
 38 | });
 39 | ```
 40 | 
 41 | ``` js
 42 | // vanilla JS
 43 | var flkty = $('.carousel').flickity({
 44 |   fullscreen: true,
 45 | });
 46 | ```
 47 | 
 48 | ``` html
 49 | <!-- HTML -->
 50 | <div class="carousel" data-flickity='{ "fullscreen": true }'>
 51 |   ...
 52 | </div>
 53 | ```
 54 | 
 55 | ### Webpack & Browserify
 56 | 
 57 | ``` js
 58 | var Flickity = require('flickity-fullscreen');
 59 | 
 60 | var flkty = new Flickity( '.carousel', {
 61 |   fullscreen: true,
 62 | });
 63 | ```
 64 | 
 65 | ### RequireJS
 66 | 
 67 | ``` js
 68 | requirejs( [ 'path/to/flickity-fullscreen' ], function( Flickity ) {
 69 |   var flkty = new Flickity( '.carousel', {
 70 |     fullscreen: true,
 71 |   });
 72 | });
 73 | ```
 74 | 
 75 | ## Style
 76 | 
 77 | `.is-fullscreen` is added to the carousel when fullscreen.
 78 | 
 79 | Size cells to take up full height with CSS.
 80 | 
 81 | ```css
 82 | /* normal */
 83 | .carousel-cell {
 84 |   height: 200px;
 85 | }
 86 | 
 87 | /* fullscreen */
 88 | .carousel.is-fullscreen .carousel-cell {
 89 |   height: 100%;
 90 | }
 91 | ```
 92 | 
 93 | ## Methods
 94 | 
 95 | ### viewFullscreen
 96 | 
 97 | Expand carousel to fullscreen.
 98 | 
 99 | ``` js
100 | // jQuery
101 | $carousel.flickity('viewFullscreen');
102 | 
103 | // vanilla JS
104 | flkty.viewFullscreen();
105 | ```
106 | 
107 | ### exitFullscreen
108 | 
109 | Collapse carousel from fullscreen back to normal size & position.
110 | 
111 | ``` js
112 | // jQuery
113 | $carousel.flickity('exitFullscreen');
114 | 
115 | // vanilla JS
116 | flkty.exitFullscreen();
117 | ```
118 | 
119 | ### toggleFullscreen
120 | 
121 | Expand or collapse carousel fullscreen view.
122 | 
123 | ``` js
124 | // jQuery
125 | $carousel.flickity('toggleFullscreen');
126 | 
127 | // vanilla JS
128 | flkty.toggleFullscreen();
129 | ```
130 | 
131 | ---
132 | 
133 | By [Metafizzy](https://metafizzy.co) 🌈🐻
134 | 


--------------------------------------------------------------------------------
/fullscreen.js:
--------------------------------------------------------------------------------
  1 | /*!
  2 |  * Flickity fullscreen v1.0.1
  3 |  * Enable fullscreen view for Flickity
  4 |  */
  5 | 
  6 | /*jshint browser: true, undef: true, unused: true, strict: true*/
  7 | 
  8 | ( function( window, factory ) {
  9 |   // universal module definition
 10 |   /*jshint strict: false */ /*globals define, module, require */
 11 |   if ( typeof define == 'function' && define.amd ) {
 12 |     // AMD
 13 |     define( [
 14 |       'flickity/js/index',
 15 |       'tap-listener/tap-listener',
 16 |     ], factory );
 17 |   } else if ( typeof module == 'object' && module.exports ) {
 18 |     // CommonJS
 19 |     module.exports = factory(
 20 |       require('flickity'),
 21 |       require('tap-listener')
 22 |     );
 23 |   } else {
 24 |     // browser global
 25 |     factory(
 26 |       window.Flickity,
 27 |       window.TapListener
 28 |     );
 29 |   }
 30 | 
 31 | }( window, function factory( Flickity, TapListener ) {
 32 | 
 33 | 'use strict';
 34 | 
 35 | Flickity.createMethods.push('_createFullscreen');
 36 | var proto = Flickity.prototype;
 37 | 
 38 | 
 39 | proto._createFullscreen = function() {
 40 |   this.isFullscreen = false;
 41 | 
 42 |   if ( !this.options.fullscreen ) {
 43 |     return;
 44 |   }
 45 |   // buttons
 46 |   this.viewFullscreenButton = new FullscreenButton( 'view', this );
 47 |   this.exitFullscreenButton = new FullscreenButton( 'exit', this );
 48 | 
 49 |   this.on( 'activate', this._changeFullscreenActive );
 50 |   this.on( 'deactivate', this._changeFullscreenActive );
 51 | };
 52 | 
 53 | // ----- activation ----- //
 54 | 
 55 | proto._changeFullscreenActive = function() {
 56 |   var childMethod = this.isActive ? 'appendChild' : 'removeChild';
 57 |   this.element[ childMethod ]( this.viewFullscreenButton.element );
 58 |   this.element[ childMethod ]( this.exitFullscreenButton.element );
 59 |   // activate or deactivate buttons
 60 |   var activeMethod = this.isActive ? 'activate' : 'deactivate';
 61 |   this.viewFullscreenButton[ activeMethod ]();
 62 |   this.exitFullscreenButton[ activeMethod ]();
 63 | };
 64 | 
 65 | // ----- view, exit, toggle ----- //
 66 | 
 67 | proto.viewFullscreen = function() {
 68 |   this._changeFullscreen( true );
 69 |   this.focus();
 70 | };
 71 | 
 72 | proto.exitFullscreen = function() {
 73 |   this._changeFullscreen( false );
 74 | };
 75 | 
 76 | proto._changeFullscreen = function( isView ) {
 77 |   if ( this.isFullscreen == isView ) {
 78 |     return;
 79 |   }
 80 |   this.isFullscreen = isView;
 81 |   var classMethod = isView ? 'add' : 'remove';
 82 |   document.documentElement.classList[ classMethod ]('is-flickity-fullscreen');
 83 |   this.element.classList[ classMethod ]('is-fullscreen');
 84 |   this.resize();
 85 |   // HACK extra reposition on fullscreen for images
 86 |   if ( this.isFullscreen ) {
 87 |     this.reposition();
 88 |   }
 89 | };
 90 | 
 91 | proto.toggleFullscreen = function() {
 92 |   this._changeFullscreen( !this.isFullscreen );
 93 | };
 94 | 
 95 | // ----- setGallerySize ----- //
 96 | 
 97 | // overwrite so fullscreen cells are full height
 98 | var setGallerySize = proto.setGallerySize;
 99 | proto.setGallerySize = function() {
100 |   if ( !this.options.setGallerySize ) {
101 |     return;
102 |   }
103 |   if ( this.isFullscreen ) {
104 |     // remove height style on fullscreen
105 |     this.viewport.style.height = '';
106 |   } else {
107 |     // otherwise, do normal
108 |     setGallerySize.call( this );
109 |   }
110 | };
111 | 
112 | // ----- keyboard ----- //
113 | 
114 | // ESC key closes full screen
115 | Flickity.keyboardHandlers[27] = function() {
116 |   this.exitFullscreen();
117 | };
118 | 
119 | // ----- FullscreenButton ----- //
120 | 
121 | function FullscreenButton( name, flickity ) {
122 |   this.name = name;
123 |   this.createButton();
124 |   this.createIcon();
125 |   // events
126 |   // trigger viewFullscreen or exitFullscreen on button tap
127 |   this.onTap = function() {
128 |     flickity[ name + 'Fullscreen' ]();
129 |   };
130 |   this.bindTap( this.element );
131 |   this.clickHandler = this.onClick.bind( this );
132 | }
133 | 
134 | FullscreenButton.prototype = Object.create( TapListener.prototype );
135 | 
136 | FullscreenButton.prototype.createButton = function() {
137 |   var element = this.element = document.createElement('button');
138 |   element.className = 'flickity-button flickity-fullscreen-button ' +
139 |     'flickity-fullscreen-button-' + this.name;
140 |   // set label
141 |   var label = capitalize( this.name + ' full-screen' );
142 |   element.setAttribute( 'aria-label', label );
143 |   element.title = label;
144 | };
145 | 
146 | function capitalize( text ) {
147 |   return text[0].toUpperCase() + text.slice(1);
148 | }
149 | 
150 | var svgURI = 'http://www.w3.org/2000/svg';
151 | 
152 | var pathDirections = {
153 |   view: 'M15,20,7,28h5v4H0V20H4v5l8-8Zm5-5,8-8v5h4V0H20V4h5l-8,8Z',
154 |   exit: 'M32,3l-7,7h5v4H18V2h4V7l7-7ZM3,32l7-7v5h4V18H2v4H7L0,29Z',
155 | };
156 | 
157 | FullscreenButton.prototype.createIcon = function() {
158 |   var svg = document.createElementNS( svgURI, 'svg');
159 |   svg.setAttribute( 'class', 'flickity-button-icon' );
160 |   svg.setAttribute( 'viewBox', '0 0 32 32' );
161 |   // path & direction
162 |   var path = document.createElementNS( svgURI, 'path');
163 |   var direction = pathDirections[ this.name ];
164 |   path.setAttribute( 'd', direction );
165 |   // put it together
166 |   svg.appendChild( path );
167 |   this.element.appendChild( svg );
168 | };
169 | 
170 | FullscreenButton.prototype.activate = function() {
171 |   this.on( 'tap', this.onTap );
172 |   this.element.addEventListener( 'click', this.clickHandler );
173 | };
174 | 
175 | FullscreenButton.prototype.deactivate = function() {
176 |   this.off( 'tap', this.onTap );
177 |   this.element.removeEventListener( 'click', this.clickHandler );
178 | };
179 | 
180 | FullscreenButton.prototype.onClick = function() {
181 |   var focused = document.activeElement;
182 |   if ( focused && focused == this.element ) {
183 |     this.onTap();
184 |   }
185 | };
186 | 
187 | // ----- fin ----- //
188 | 
189 | return Flickity;
190 | 
191 | }));
192 | 


--------------------------------------------------------------------------------
/sandbox/fullscreen.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | <head>
  4 |   <meta charset="utf-8" />
  5 |   <meta name="viewport" content="width=device-width" />
  6 | 
  7 |   <title>fullscreen</title>
  8 | 
  9 |   <link rel="stylesheet" href="../bower_components/flickity/css/flickity.css" />
 10 |   <link rel="stylesheet" href="../fullscreen.css" />
 11 | 
 12 |   <style>
 13 |     * { box-sizing: border-box; }
 14 | 
 15 |     body {
 16 |       background: #EEE;
 17 |       font-family: sans-serif;
 18 |     }
 19 | 
 20 |     .container {
 21 |       max-width: 720px;
 22 |       padding: 40px;
 23 |       background: white;
 24 |       margin: 0px auto ;
 25 |     }
 26 | 
 27 |     .copy {
 28 |       font-size: 20px;
 29 |       color: #555;
 30 |       line-height: 1.4;
 31 |     }
 32 | 
 33 |     .carousel {
 34 |       margin: 80px 0;
 35 |     }
 36 | 
 37 |     .carousel.is-fullscreen {
 38 |       margin: 0;
 39 |     }
 40 | 
 41 |     .carousel-image-cell {
 42 |       height: 240px;
 43 |       min-width: 100px;
 44 |       margin-right: 10px;
 45 |     }
 46 | 
 47 |     .carousel-image-cell img {
 48 |       display: block;
 49 |       max-height: 100%;
 50 |       /* HACK vertically center */
 51 |       /* could use flexbox, but doesn't work in Chrome & Safari */
 52 |       top: 50%;
 53 |       position: relative;
 54 |       transform: translateY(-50%)
 55 |     }
 56 | 
 57 |     .carousel.is-fullscreen .carousel-image-cell {
 58 |       height: 100%;
 59 |     }
 60 | 
 61 |     .carousel-number-cell {
 62 |       width: 80%;
 63 |       background: #6C6;
 64 |       border-radius: 4px;
 65 |       height: 200px;
 66 |       margin: 0 5px;
 67 |       display: flex;
 68 |       align-items: center;
 69 |       justify-content: center;
 70 |     }
 71 |     
 72 |     .carousel-number-cell b {
 73 |       font-size: 80px;
 74 |       color: white;
 75 |       display: block;
 76 |     }
 77 | 
 78 |     .carousel.is-fullscreen .carousel-number-cell {
 79 |       height: 100%;
 80 |     }
 81 |   </style>
 82 | 
 83 | </head>
 84 | <body>
 85 | 
 86 | <div class="container">
 87 | 
 88 |   <h1>fullscreen</h1>
 89 | 
 90 |   <div class="copy">
 91 |     <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>
 92 |     <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>
 93 |     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
 94 |     <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>
 95 |     <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>
 96 |     <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>
 97 |     <ul>
 98 |       <li>consectetur adipisicing elit, sed do eiusmod tempor </li>
 99 |       <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>
100 |       <li>fugiat nulla pariatur. Excepteur sint </li>
101 |       <li>occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
102 |     </ul>
103 |     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
104 |     <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>
105 | 
106 |     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
107 |     <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>
108 |   </div>
109 | 
110 |   <h2>Cells fit to image</h2>
111 | 
112 | <div class="carousel carousel--gallery">
113 |   <div class="carousel-image-cell"><img data-flickity-lazyload="https://picsum.photos/720/540/?image=517" /></div>
114 |   <div class="carousel-image-cell"><img data-flickity-lazyload="https://picsum.photos/540/720/?image=696" /></div>
115 |   <div class="carousel-image-cell"><img data-flickity-lazyload="https://picsum.photos/720/540/?image=56" /></div>
116 |   <div class="carousel-image-cell"><img data-flickity-lazyload="https://picsum.photos/800/500/?image=1084" /></div>
117 |   <div class="carousel-image-cell"><img data-flickity-lazyload="https://picsum.photos/720/540/?image=1080" /></div>
118 |   <div class="carousel-image-cell"><img data-flickity-lazyload="https://picsum.photos/640/640/?image=1074" /></div>
119 |   <div class="carousel-image-cell"><img data-flickity-lazyload="https://picsum.photos/720/540/?image=1069" /></div>
120 |   <div class="carousel-image-cell"><img data-flickity-lazyload="https://picsum.photos/800/500/?image=1062" /></div>
121 |   <div class="carousel-image-cell"><img data-flickity-lazyload="https://picsum.photos/720/540/?image=1002" /></div>
122 |   <div class="carousel-image-cell"><img data-flickity-lazyload="https://picsum.photos/640/640/?image=935" /></div>
123 |   <div class="carousel-image-cell"><img data-flickity-lazyload="https://picsum.photos/720/540/?image=855" /></div>
124 |   <div class="carousel-image-cell"><img data-flickity-lazyload="https://picsum.photos/640/640/?image=824" /></div>
125 |   <div class="carousel-image-cell"><img data-flickity-lazyload="https://picsum.photos/540/720/?image=797" /></div>
126 |   <div class="carousel-image-cell"><img data-flickity-lazyload="https://picsum.photos/720/540/?image=718" /></div>
127 |   <div class="carousel-image-cell"><img data-flickity-lazyload="https://picsum.photos/720/540/?image=652" /></div>
128 |   <div class="carousel-image-cell"><img data-flickity-lazyload="https://picsum.photos/720/540/?image=627" /></div>
129 |   <div class="carousel-image-cell"><img data-flickity-lazyload="https://picsum.photos/720/540/?image=429" /></div>
130 |   <div class="carousel-image-cell"><img data-flickity-lazyload="https://picsum.photos/720/540/?image=433" /></div>
131 |   <div class="carousel-image-cell"><img data-flickity-lazyload="https://picsum.photos/720/540/?image=189" /></div>
132 |   <div class="carousel-image-cell"><img data-flickity-lazyload="https://picsum.photos/720/540/?image=40" /></div>
133 | </div>
134 | 
135 |   <p>
136 |     <button class="expand-button">Fullscreen</button>
137 |   </p>
138 | 
139 | 
140 |   <div class="copy">
141 |     <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>
142 |     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
143 |     <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>
144 |     <ul>
145 |       <li>Lorem ipsum dolor sit amet, </li>
146 |       <li>consectetur adipisicing elit, sed do eiusmod tempor </li>
147 |       <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>
148 |     </ul>
149 |     <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>
150 |     <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>
151 |   </div>
152 | 
153 |   <div class="carousel carousel--numbers" data-flickity='{ "fullscreen": true }'>
154 |     <div class="carousel-number-cell"><b>1</b></div>
155 |     <div class="carousel-number-cell"><b>2</b></div>
156 |     <div class="carousel-number-cell"><b>3</b></div>
157 |     <div class="carousel-number-cell"><b>4</b></div>
158 |     <div class="carousel-number-cell"><b>5</b></div>
159 |     <div class="carousel-number-cell"><b>6</b></div>
160 |     <div class="carousel-number-cell"><b>7</b></div>
161 |     <div class="carousel-number-cell"><b>8</b></div>
162 |   </div>
163 | 
164 | 
165 |   <div class="copy">
166 |     <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>
167 |     <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>
168 |     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
169 |     <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>
170 |   </div>
171 | 
172 |   <svg viewBox="0 0 32 32" width="32" height="32">
173 |     <path d="M0 32 V 20 H 4 v 8 h 8 v 4 Z m 32 0 V 20H28v8H20v4ZM0 0V12H4V4h8V0ZM20 0V4h8v8h4V0Z" />
174 |   </svg>
175 | 
176 |   <svg viewBox="0 0 32 32" style="width: 32px; height: 32px">
177 |     <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
178 |       M 0 32 v-12 h4 v8 h8 v4 Z M 32 32 h-12 v-4 h8 v-8 h4 Z" />
179 |   </svg>
180 | 
181 | </div>
182 | 
183 | <script src="../bower_components/get-size/get-size.js"></script>
184 | <script src="../bower_components/desandro-matches-selector/matches-selector.js"></script>
185 | <script src="../bower_components/ev-emitter/ev-emitter.js"></script>
186 | <script src="../bower_components/unipointer/unipointer.js"></script>
187 | <script src="../bower_components/unidragger/unidragger.js"></script>
188 | <script src="../bower_components/tap-listener/tap-listener.js"></script>
189 | <script src="../bower_components/fizzy-ui-utils/utils.js"></script>
190 | 
191 | <script src="../bower_components/flickity/js/cell.js"></script>
192 | <script src="../bower_components/flickity/js/slide.js"></script>
193 | <script src="../bower_components/flickity/js/animate.js"></script>
194 | <script src="../bower_components/flickity/js/flickity.js"></script>
195 | <script src="../bower_components/flickity/js/drag.js"></script>
196 | <script src="../bower_components/flickity/js/prev-next-button.js"></script>
197 | <script src="../bower_components/flickity/js/page-dots.js"></script>
198 | <script src="../bower_components/flickity/js/add-remove-cell.js"></script>
199 | <!-- <script src="../js/player.js"></script> -->
200 | <script src="../bower_components/flickity/js/lazyload.js"></script>
201 | 
202 | <script src="../fullscreen.js"></script>
203 | 
204 | <script>
205 | 
206 | var galleryCarousel = document.querySelector('.carousel--gallery');
207 | 
208 | var galleryFlkty = new Flickity( galleryCarousel, {
209 |   fullscreen: true,
210 |   lazyLoad: 2,
211 | });
212 | 
213 | document.querySelector('.expand-button').onclick = function() {
214 |   galleryFlkty.viewFullscreen();
215 | };
216 | 
217 | </script>
218 | 
219 | </body>
220 | </html>
221 | 


--------------------------------------------------------------------------------