New implementation: webslides clone

.eslintrc

@@ -128,5 +128,3 @@
     "yield-star-spacing": [2, "after"]
   }
 }
-
-

src/js/plugins/zoom.js

@@ -1,5 +1,6 @@
 import DOM from '../utils/dom';
 import Keys from '../utils/keys';
+import Slide from '../modules/slide';
 
 
 const CLASSES = {
@@ -8,6 +9,8 @@ const CLASSES = {
   WRAP: 'wrap-zoom'
 };
 
+const ID = 'webslides-zoomed';
+
 /**
  * Zoom plugin.
  */
@@ -23,12 +26,19 @@ export default class Zoom {
      */
     this.ws_ = wsInstance;
 
+    /**
+     * @type {WebSlides}
+     * @private
+     */
+    this.zws_ = {};
+
     /**
      * @type {boolean}
      * @private
      */
     this.isZoomed_ = false;
 
+    this.preBuildZoom_();
     document.addEventListener('keydown', this.onKeyDown.bind(this));
   }
 
@@ -45,51 +55,66 @@ export default class Zoom {
   }
 
   /**
-   * Zoom In the slider, scales the slides and uses a grid layout to show them
+   * Prepare zoom structure, scales the slides and uses a grid layout
+   * to show them
    */
-  zoomIn() {
-    this.ws_.el.classList.add(CLASSES.ZOOM);
-    this.ws_.goToSlide(0);
+  preBuildZoom_() {
+    // Clone #webslides element
+    this.zws_.el = this.ws_.el.cloneNode();
+    this.zws_.el.id = ID;
+    this.zws_.el.className = CLASSES.ZOOM;
+    // Clone the slides
+    this.zws_.slides = [].map.call(this.ws_.slides,
+        (slide, i) => {
+          const s_ = slide.el.cloneNode(true);
+          this.zws_.el.appendChild(s_);
+          return new Slide(s_, i);
+        });
+    DOM.hide(this.zws_.el);
+    DOM.after(this.zws_.el, this.ws_.el);
 
-    this.ws_.slides.forEach( elem => {
+    // Creates the container for each slide
+    this.zws_.slides.forEach( elem => {
       const wrap = DOM.wrap(elem.el, 'div');
       wrap.className = CLASSES.WRAP;
       const div = DOM.wrap(wrap, 'div');
       div.className = CLASSES.DIV;
 
+      // Calculates the margins in relation to window width
       const divCSS = window.getComputedStyle(div);
       const marginW = DOM.parseSize(divCSS.paddingLeft)
         + DOM.parseSize(divCSS.paddingRight);
       const marginH = DOM.parseSize(divCSS.paddingTop)
         + DOM.parseSize(divCSS.paddingBottom);
 
-      elem.el.style.width = `${window.innerWidth - marginW * 4}px`;
-      elem.el.style.height = `${window.innerHeight - marginH * 4}px`;
+      // Sets element size: window size - relative margins
+      const scale = divCSS.width.includes('%') ?
+        100 / DOM.parseSize(divCSS.width) :
+        window.innerWidth / DOM.parseSize(divCSS.width);
+      elem.el.style.width = `${window.innerWidth - marginW * scale}px`;
+      elem.el.style.height = `${window.innerHeight - marginH * scale}px`;
 
+      // Because of flexbox, wrap height is required
       const slideCSS = window.getComputedStyle(elem.el);
-      wrap.style.height = `${DOM.parseSize(slideCSS.height) / 4}px`;
+      wrap.style.height = `${DOM.parseSize(slideCSS.height) / scale}px`;
     });
-
-    this.isZoomed_ = true;
   }
 
+  /**
+   * Zoom In the slider, scales the slides and uses a grid layout to show them
+   */
+  zoomIn() {
+    DOM.hide(this.ws_.el);
+    DOM.show(this.zws_.el);
+    this.isZoomed_ = true;
+  }
 
   /**
    * Zoom Out the slider, remove scale from the slides
    */
   zoomOut() {
-    this.ws_.el.classList.remove(CLASSES.ZOOM);
-
-    this.ws_.slides.forEach( elem => {
-      const wrap = elem.el.parentElement;
-      const div = wrap.parentElement;
-      elem.parent.appendChild(elem.el);
-      wrap.remove();
-      div.remove();
-      elem.el.style.width = '';
-      elem.el.style.height = '';
-    });
-
+    DOM.hide(this.zws_.el);
+    DOM.show(this.ws_.el);
     this.isZoomed_ = false;
   }
 

src/js/utils/dom.js

@@ -188,4 +188,19 @@ export default class DOM {
 
     return wrap;
   }
+
+  /**
+   * Inserts and element after another element
+   * @param {Element} elem the element to be inserted
+   * @param {Element} target the element to be inserted after
+   */
+  static after(elem, target) {
+    const parent = target.parentNode;
+
+    if (parent.lastChild == target) {
+      parent.appendChild(elem);
+    } else {
+      parent.insertBefore(elem, target.nextSibling);
+    }
+  }
 }

static/js/webslides.js

@@ -1,7 +1,7 @@
 /*!
  * Name: WebSlides
  * Version: 1.2.1
- * Date: 2017-03-22
+ * Date: 2017-04-01
  * Description: Making HTML presentations easy
  * URL: https://github.com/webslides/webslides#readme
  * Credits: @jlantunez, @LuisSacristan, @Belelros
@@ -79,7 +79,7 @@
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__custom_event__ = __webpack_require__(17);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__custom_event__ = __webpack_require__(18);
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -284,6 +284,53 @@ var DOM = function () {
 
       return result;
     }
+
+    /**
+     * Gets the integer value of a style property
+     * @param {string} prop CSS property value
+     * @return {integer} The property without the units
+     */
+
+  }, {
+    key: 'parseSize',
+    value: function parseSize(prop) {
+      return Number(prop.replace(/[^\d\.]/g, ''));
+    }
+
+    /**
+     * Wraps a HTML structure arrond a element
+     * @param {Element} elem the element to be wrapped
+     * @param {string} tag the new element tag
+     * @return {Element} the new element
+     */
+
+  }, {
+    key: 'wrap',
+    value: function wrap(elem, tag) {
+      var wrap = document.createElement(tag);
+      elem.parentElement.insertBefore(wrap, elem);
+      wrap.appendChild(elem);
+
+      return wrap;
+    }
+
+    /**
+     * Inserts and element after another element
+     * @param {Element} elem the element to be inserted
+     * @param {Element} target the element to be inserted after
+     */
+
+  }, {
+    key: 'after',
+    value: function after(elem, target) {
+      var parent = target.parentNode;
+
+      if (parent.lastChild == target) {
+        parent.appendChild(elem);
+      } else {
+        parent.insertBefore(elem, target.nextSibling);
+      }
+    }
   }]);
 
   return DOM;
@@ -511,7 +558,9 @@ var Keys = {
   LEFT: 37,
   UP: 38,
   RIGHT: 39,
-  DOWN: 40
+  DOWN: 40,
+  PLUS: [107, 171],
+  MINUS: [109, 173]
 };
 
 /* harmony default export */ __webpack_exports__["a"] = (Keys);
@@ -628,7 +677,7 @@ var MobileDetector = function () {
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__plugins_plugins__ = __webpack_require__(12);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__slide__ = __webpack_require__(1);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__utils_dom__ = __webpack_require__(0);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__utils_scroll_to__ = __webpack_require__(19);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__utils_scroll_to__ = __webpack_require__(20);
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -654,7 +703,8 @@ var PLUGINS = {
   'scroll': __WEBPACK_IMPORTED_MODULE_0__plugins_plugins__["a" /* default */].Scroll,
   'touch': __WEBPACK_IMPORTED_MODULE_0__plugins_plugins__["a" /* default */].Touch,
   'video': __WEBPACK_IMPORTED_MODULE_0__plugins_plugins__["a" /* default */].Video,
-  'youtube': __WEBPACK_IMPORTED_MODULE_0__plugins_plugins__["a" /* default */].YouTube
+  'youtube': __WEBPACK_IMPORTED_MODULE_0__plugins_plugins__["a" /* default */].YouTube,
+  'zoom': __WEBPACK_IMPORTED_MODULE_0__plugins_plugins__["a" /* default */].Zoom
 };
 
 /**
@@ -1696,6 +1746,8 @@ var Navigation = function () {
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__touch__ = __webpack_require__(14);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_8__video__ = __webpack_require__(15);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_9__youtube__ = __webpack_require__(16);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_10__zoom__ = __webpack_require__(17);
+
 
 
 
@@ -1717,7 +1769,8 @@ var Navigation = function () {
   Scroll: __WEBPACK_IMPORTED_MODULE_6__scroll__["a" /* default */],
   Touch: __WEBPACK_IMPORTED_MODULE_7__touch__["a" /* default */],
   Video: __WEBPACK_IMPORTED_MODULE_8__video__["a" /* default */],
-  YouTube: __WEBPACK_IMPORTED_MODULE_9__youtube__["a" /* default */]
+  YouTube: __WEBPACK_IMPORTED_MODULE_9__youtube__["a" /* default */],
+  Zoom: __WEBPACK_IMPORTED_MODULE_10__zoom__["a" /* default */]
 });
 
 /***/ }),
@@ -2172,7 +2225,7 @@ var Player = function () {
   }
 
   /**
-   *
+   * Plays the video.
    */
 
 
@@ -2192,14 +2245,16 @@ var Player = function () {
     }
 
     /**
-     *
+     * Pause playing the video if it's already playing.
      */
 
   }, {
     key: 'pause',
     value: function pause() {
+      if (this.player && this.player.pauseVideo && this.player.getPlayerState() === 1) {
         this.player.pauseVideo();
       }
+    }
 
     /**
      * Get player vars by element.
@@ -2330,6 +2385,157 @@ var YouTube = function () {
 /* 17 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
+"use strict";
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__utils_dom__ = __webpack_require__(0);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__utils_keys__ = __webpack_require__(2);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__modules_slide__ = __webpack_require__(1);
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+
+
+
+
+var CLASSES = {
+  ZOOM: 'grid',
+  DIV: 'column',
+  WRAP: 'wrap-zoom'
+};
+
+var ID = 'webslides-zoomed';
+
+/**
+ * Zoom plugin.
+ */
+
+var Zoom = function () {
+  /**
+   * @param {WebSlides} wsInstance The WebSlides instance
+   * @constructor
+   */
+  function Zoom(wsInstance) {
+    _classCallCheck(this, Zoom);
+
+    /**
+     * @type {WebSlides}
+     * @private
+     */
+    this.ws_ = wsInstance;
+
+    /**
+     * @type {WebSlides}
+     * @private
+     */
+    this.zws_ = {};
+
+    /**
+     * @type {boolean}
+     * @private
+     */
+    this.isZoomed_ = false;
+
+    this.preBuildZoom_();
+    document.addEventListener('keydown', this.onKeyDown.bind(this));
+  }
+
+  /**
+   * On key down handler. Will decide if Zoom in or out
+   * @param {Event} event Key down event
+   */
+
+
+  _createClass(Zoom, [{
+    key: 'onKeyDown',
+    value: function onKeyDown(event) {
+      if (!this.isZoomed_ && __WEBPACK_IMPORTED_MODULE_1__utils_keys__["a" /* default */].MINUS.includes(event.which)) {
+        this.zoomIn();
+      } else if (this.isZoomed_ && __WEBPACK_IMPORTED_MODULE_1__utils_keys__["a" /* default */].PLUS.includes(event.which)) {
+        this.zoomOut();
+      }
+    }
+
+    /**
+     * Prepare zoom structure, scales the slides and uses a grid layout
+     * to show them
+     */
+
+  }, {
+    key: 'preBuildZoom_',
+    value: function preBuildZoom_() {
+      var _this = this;
+
+      // Clone #webslides element
+      this.zws_.el = this.ws_.el.cloneNode();
+      this.zws_.el.id = ID;
+      this.zws_.el.className = CLASSES.ZOOM;
+      // Clone the slides
+      this.zws_.slides = [].map.call(this.ws_.slides, function (slide, i) {
+        var s_ = slide.el.cloneNode(true);
+        _this.zws_.el.appendChild(s_);
+        return new __WEBPACK_IMPORTED_MODULE_2__modules_slide__["a" /* default */](s_, i);
+      });
+      __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].hide(this.zws_.el);
+      __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].after(this.zws_.el, this.ws_.el);
+
+      // Creates the container for each slide
+      this.zws_.slides.forEach(function (elem) {
+        var wrap = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].wrap(elem.el, 'div');
+        wrap.className = CLASSES.WRAP;
+        var div = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].wrap(wrap, 'div');
+        div.className = CLASSES.DIV;
+
+        // Calculates the margins in relation to window width
+        var divCSS = window.getComputedStyle(div);
+        var marginW = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].parseSize(divCSS.paddingLeft) + __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].parseSize(divCSS.paddingRight);
+        var marginH = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].parseSize(divCSS.paddingTop) + __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].parseSize(divCSS.paddingBottom);
+
+        // Sets element size: window size - relative margins
+        console.log(window.innerWidth, divCSS.width);
+        var scale = divCSS.width.includes('%') ? 100 / __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].parseSize(divCSS.width) : window.innerWidth / __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].parseSize(divCSS.width);
+        elem.el.style.width = window.innerWidth - marginW * scale + 'px';
+        elem.el.style.height = window.innerHeight - marginH * scale + 'px';
+
+        // Because of flexbox, wrap height is required
+        var slideCSS = window.getComputedStyle(elem.el);
+        wrap.style.height = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].parseSize(slideCSS.height) / scale + 'px';
+      });
+    }
+
+    /**
+     * Zoom In the slider, scales the slides and uses a grid layout to show them
+     */
+
+  }, {
+    key: 'zoomIn',
+    value: function zoomIn() {
+      __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].hide(this.ws_.el);
+      __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].show(this.zws_.el);
+      this.isZoomed_ = true;
+    }
+
+    /**
+     * Zoom Out the slider, remove scale from the slides
+     */
+
+  }, {
+    key: 'zoomOut',
+    value: function zoomOut() {
+      __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].hide(this.zws_.el);
+      __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].show(this.ws_.el);
+      this.isZoomed_ = false;
+    }
+  }]);
+
+  return Zoom;
+}();
+
+/* harmony default export */ __webpack_exports__["a"] = (Zoom);
+
+/***/ }),
+/* 18 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
 "use strict";
 var NativeCustomEvent = window.CustomEvent;
 
@@ -2375,7 +2581,7 @@ var WSCustomEvent = canIuseNativeCustom() ? NativeCustomEvent : IECustomEvent;
 /* harmony default export */ __webpack_exports__["a"] = (WSCustomEvent);
 
 /***/ }),
-/* 18 */
+/* 19 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -2400,11 +2606,11 @@ function linear(p) {
 /* harmony default export */ __webpack_exports__["a"] = ({ swing: swing, linear: linear });
 
 /***/ }),
-/* 19 */
+/* 20 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__easing__ = __webpack_require__(18);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__easing__ = __webpack_require__(19);
 /* harmony export (immutable) */ __webpack_exports__["a"] = scrollTo;
 
 

tests/media.html

@@ -0,0 +1,722 @@
+<!doctype html>
+<html lang="en" prefix="og: http://ogp.me/ns#">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <!-- CLEAN MARKUP = GOOD KARMA.
+      Hi source code lover,
+
+      you're a curious person and a fast learner ;)
+      Let's make something beautiful together. Contribute on Github:
+      https://github.com/webslides/webslides
+
+      Thanks!
+      -->
+    <!-- SEO -->
+    <title>WebSlides Tutorial: Videos, Images, and Maps</title>
+    <meta name="description" content="How to embed images, videos, and maps in your presentation.">
+
+    <!-- URL CANONICAL -->
+    <link rel="canonical" href="https://webslides.tv/demos/media">
+
+    <!-- Google Fonts -->
+    <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&amp;subset=latin-ext" rel="stylesheet">
+
+    <!-- CSS Base -->
+    <link rel="stylesheet" type='text/css' media='all' href="https://webslides.tv/wdev/static/css/base.css">
+
+    <!-- CSS Colors -->
+    <link rel="stylesheet" type='text/css' media='all' href="https://webslides.tv/wdev/static/css/colors.css">
+
+    <!-- Optional - CSS SVG Icons (Font Awesome) -->
+    <link rel="stylesheet" type='text/css' media='all' href="https://webslides.tv/wdev/static/css/svg-icons.css">
+
+    <!-- SOCIAL CARDS -->
+
+    <!-- FACEBOOK -->
+    <meta property="fb:app_id" content="293222087723772">
+    <meta property="og:url" content="https://webslides.tv/demos/media" />
+    <meta property="og:type" content="article" />
+    <meta property="og:title" content="WebSlides Tutorial: Media" />
+    <meta property="og:description" content="How to embed images, videos, and maps in your presentation.">
+    <meta property="og:updated_time" content="2017-03-30T16:24:56">
+    <meta property="og:image" content="https://webslides.tv/static/images/share-media.jpg" >
+    <meta property="og:image:width" content="800">
+    <meta property="og:image:height" content="429">
+
+    <!-- TWITTER -->
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:site" content="@webslides">
+    <meta name="twitter:creator" content="@jlantunez">
+    <meta name="twitter:title" content="WebSlides Tutorial: Media">
+    <meta name="twitter:description" content="How to embed images, videos, and maps in your presentation.">
+    <meta name="twitter:image" content="https://webslides.tv/static/images/share-media.jpg">
+
+    <!-- FAVICONS -->
+    <link rel="shortcut icon" sizes="16x16" href="https://webslides.tv/wdev/static/images/favicons/favicon.png">
+    <link rel="shortcut icon" sizes="32x32" href="https://webslides.tv/wdev/static/images/favicons/favicon-32.png">
+    <link rel="apple-touch-icon icon" sizes="76x76" href="https://webslides.tv/wdev/static/images/favicons/favicon-76.png">
+    <link rel="apple-touch-icon icon" sizes="120x120" href="https://webslides.tv/wdev/static/images/favicons/favicon-120.png">
+    <link rel="apple-touch-icon icon" sizes="152x152" href="https://webslides.tv/wdev/static/images/favicons/favicon-152.png">
+    <link rel="apple-touch-icon icon" sizes="180x180" href="https://webslides.tv/wdev/static/images/favicons/favicon-180.png">
+    <link rel="apple-touch-icon icon" sizes="192x192" href="https://webslides.tv/wdev/static/images/favicons/favicon-192.png">
+
+    <!-- Android -->
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="theme-color" content="#333333">
+
+  </head>
+  <body>
+    <header role="banner">
+      <nav role="navigation">
+        <p class="logo"><a href="https://webslides.tv/wdev" title="WebSlides">WebSlides</a></p>
+        <ul>
+          <li class="github">
+            <a rel="external" href="https://github.com/webslides/webslides" title="Github">
+              <svg class="fa-github">
+                <use xlink:href="#fa-github"></use>
+              </svg>
+              <em>WebSlides</em>
+            </a>
+          </li>
+          <li class="twitter">
+            <a rel="external" href="https://twitter.com/webslides" title="Twitter">
+              <svg class="fa-twitter">
+                <use xlink:href="#fa-twitter"></use>
+              </svg>
+              <em>@WebSlides</em>
+            </a>
+          </li>
+          <!--  <li class="dribbble"><a rel="external" href="http://dribbble.com/webslides" title="Dribbble"><svg class="fa-dribbble"><use xlink:href="#fa-dribbble"></use></svg> <em>webslides</em></a></li> -->
+        </ul>
+      </nav>
+    </header>
+    <main role="main">
+      <article id="webslides">
+
+        <!-- Quick Guide
+          - Each parent <section> in the <article id="webslides"> element is an individual slide.
+          - Vertical sliding = <article id="webslides" class="vertical">
+          - <div class="wrap"> = container 90% / <div class="wrap size-50"> = 45%;
+          -->
+
+        <section class="bg-black-blue aligncenter">
+          <span class="background dark" style="background-image:url('https://source.unsplash.com/Zq_K89I9E-8/)"></span>
+          <!--.wrap = container (width: 90%) -->
+          <div class="wrap">
+            <p class="text-subtitle">WebSlides Tutorial</p>
+            <h1 class="text-landing">Media</h1>
+            <p class="text-symbols">* * *</p>
+            <p>
+              <a class="button ghost" href="https://github.com/webslides/webslides" title="Download WebSlides">
+                <svg class="fa-github">
+                  <use xlink:href="#fa-github"></use>
+                </svg>
+                Free Download
+              </a>
+            </p>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section class="aligncenter">
+          <div class="wrap">
+            <h2><strong>A quick reference guide for beginners</strong></h2>
+            <p class="text-intro">Videos, images, maps, and charts.</p>
+            <ul class="flexblock border">
+              <li>
+                <!--div required = padding li or li>a-->
+                <div>
+                  <h3><a target="_blank" href="#slide=3">Images</a></h3>
+                  <ol>
+                    <li><a target="_blank" href="#slide=4">Background Images</a></li>
+                    <li><a target="_blank" href="#slide=6">Overlays (light and dark)</a></li>
+                    <li><a target="_blank" href="#slide=10">500+ SVG Icons</a></li>
+                    <li><a target="_blank" href="#slide=11">Logos</a></li>
+                    <li><a target="_blank" href="#slide=12">Avatars</a></li>
+                    <li><a target="_blank" href="#slide=13">Devices</a></li>
+                    <li><a target="_blank" href="#slide=14">Screenshots</a></li>
+                  </ol>
+                </div>
+              </li>
+              <li>
+                <!--div required = padding li or li>a-->
+                <div>
+                  <h3><a target="_blank" href="#slide=15">Videos</a></h3>
+                  <ol>
+                    <li><a target="_blank" href="#slide=16">Background Videos (hosted)</a></li>
+                    <li><a target="_blank" href="#slide=18">Embed YouTube videos</a></li>
+                    <li><a target="_blank" href="#slide=20">Fullscreen YouTube videos</a></li>
+                    <li>
+                      <a target="_blank" href="#slide=22"><strong>YouTube API:</strong></a>
+                      <ol>
+                        <li><a target="_blank" href="#slide=23">Autoplay, loop, mute, and no controls</a></li>
+                        <li><a target="_blank" href="#slide=25">Fullscreen video</a></li>
+                        <li><a target="_blank" href="#slide=27">Background video with overlay</a></li>
+                      </ol>
+                    </li>
+                  </ol>
+                </div>
+              </li>
+              <li>
+                <!--div required = padding li or li>a-->
+                <div>
+                  <h3><a target="_blank" href="#slide=30">Maps & Charts</a></h3>
+                  <ol>
+                    <li><a target="_blank" href="#slide=31">Embedding maps</a></li>
+                    <li><a target="_blank" href="#slide=32">Fullscreen maps</a></li>
+                    <li><a target="_blank" href="#slide=33">Embedding charts</a></li>
+                  </ol>
+                </div>
+              </li>
+            </ul>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section>
+          <span class="background-bottom" style="background-image:url('https://source.unsplash.com/GQD3Av_9A88/1600x800)"></span>
+          <div class="wrap aligncenter">
+            <h3>
+              <svg class="fa-camera">
+                <use xlink:href="#fa-camera"></use>
+              </svg>
+              Insert images wherever you want
+            </h3>
+            <p class="text-intro">15 different positions.</p>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section>
+          <div class="wrap">
+            <h3>15 Different Backgrounds</h3>
+            <ul class="text-cols">
+              <li><strong>.background</strong> (fullscreen)</li>
+              <li>.background-top (cover)</li>
+              <li>.background-bottom (cover)</li>
+              <li>.background.light (opacity)</li>
+              <li>.background.dark (opacity)</li>
+              <li>.background-center</li>
+              <li>.background-center-top</li>
+              <li>.background-center-bottom</li>
+              <li>.background-left</li>
+              <li>.background-left-top</li>
+              <li>.background-left-bottom</li>
+              <li>.background-right</li>
+              <li>.background-right-top</li>
+              <li>.background-right-bottom</li>
+              <li>.background-anim (animated)</li>
+            </ul>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section>
+          <div class="wrap size-50">
+            <h4>
+              <svg class="fa-camera">
+                <use xlink:href="#fa-camera"></use>
+              </svg>
+              .background = Fullscreen Backgrounds
+            </h4>
+            <p class="text-intro"><a href="https://source.unsplash.com/">How to embed Unsplash photos? &rarr;</a></p>
+            <pre>&lt;section&gt;
+  &lt;span class="background" style="background-image:url('https://source.unsplash.com/nwfuaYecNUs/')"&gt;&lt;/span&gt;
+  &lt;div class="wrap"&gt;
+    &lt;h1&gt;Slide&lt;/h1&gt;
+  &lt;/div&gt;
+&lt;/section&gt;</pre>
+            <p>
+              <svg class="fa-info">
+                <use xlink:href="#fa-info"></use>
+              </svg>
+              Position .background outside of .wrap container.
+            </p>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section>
+          <span class="background-right-bottom" style="background-image:url('/wdev/static/images/iphone-hand.png')"></span>
+          <div class="wrap">
+            <div class="content-left">
+              <h3>.background-(position)</h3>
+              <p><code>.background-right-bottom</code></p>
+              <ul class="flexblock specs">
+                <li>
+                  <div>
+                    <svg class="fa-wifi">
+                      <use xlink:href="#fa-wifi"></use>
+                    </svg>
+                    <h2>Ultra-Fast WiFi</h2>
+                    Simple and secure file sharing.
+                  </div>
+                </li>
+                <li>
+                  <div>
+                    <svg class="fa-battery-full">
+                      <use xlink:href="#fa-battery-full"></use>
+                    </svg>
+                    <h2>All day battery life</h2>
+                    Your battery worries may be over.
+                  </div>
+                </li>
+                <li>
+                  <div>
+                    <svg class="fa-life-ring">
+                      <use xlink:href="#fa-life-ring"></use>
+                    </svg>
+                    <h2>Lifetime Warranty </h2>
+                    We'll fix it or if we can't, we'll replace it.
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section class="aligncenter bg-black">
+          <span class="background anim" style="background-image:url('https://source.unsplash.com/n9WPPWiPPJw/')"></span>
+          <!--.wrap = container (width: 90%) -->
+          <div class="wrap">
+            <h2>.background.anim</h2>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section class="bg-black aligncenter">
+          <span class="background light" style="background-image:url('https://source.unsplash.com/1_CMoFsPfso/')"></span>
+          <div class="wrap size-50">
+            <h1 class="text-landing text-shadow">Opacity</h1>
+            <p><code>[class*="bg-"] > .background.light</code></p>
+            <pre>&lt;section class="bg-black"&gt;
+	&lt;span class="background light" style="background-image:url('https://source.unsplash.com/1_CMoFsPfso/')"&gt;&lt;/span&gt;
+	&lt;div class="wrap"&gt;
+		&lt;h1&gt;Slide&lt;/h1&gt;
+	&lt;/div&gt;
+&lt;/section&gt;</pre>
+          </div>
+        </section>
+        <section class="bg-black aligncenter">
+          <span class="background dark" style="background-image:url('https://source.unsplash.com/1_CMoFsPfso')"></span>
+          <div class="wrap size-50">
+            <h1 class="text-landing text-shadow">Opacity</h1>
+            <p><code>[class*="bg-"] > .background.dark</code></p>
+            <pre>&lt;section class="bg-black"&gt;
+	&lt;span class="background dark" style="background-image:url('https://source.unsplash.com/1_CMoFsPfso/')"&gt;&lt;/span&gt;
+	&lt;div class="wrap"&gt;
+		&lt;h1&gt;Slide&lt;/h1&gt;
+	&lt;/div&gt;
+&lt;/section&gt;</pre>
+          </div>
+        </section>
+        <section>
+          <div class="wrap size-50">
+            <p class="text-subtitle">Optional &middot; 500+ icons</p>
+            <h2>
+              <a href="http://fontawesome.io/icons/">
+                <svg class="fa-flag">
+                  <use xlink:href="#fa-flag"></use>
+                </svg>
+                Font Awesome
+              </a>
+              as SVG icons
+            </h2>
+            <pre>&lt;svg class="fa-flag"&gt;
+	&lt;use xlink:href="#fa-flag"&gt;&lt;/use&gt;
+&lt;/svg&gt;</pre>
+            <p>How to change icons?</p>
+            <ol class="text-cols">
+              <li>Go to <a href="http://fontastic.me/">fontastic.me</a>.</li>
+              <li>Create a free account.</li>
+              <li>Select new icons.</li>
+              <li>Publish as SVG sprite.</li>
+              <li>Edit <strong>svg-icons.css</strong> and <strong>svg.icons.js</strong>.</li>
+            </ol>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section>
+          <div class="wrap">
+            <h2>Transparent Logos</h2>
+            <p>
+              Change the color of a .svg/.png image using CSS. Images are property of their respective owners.
+            </p>
+            <hr>
+            <ul class="flexblock blink">
+              <li>
+                <a href="#" title="Block Link = .blink">
+                  <div>
+                    <img src="/wdev/static/images/logos/google.svg" alt="Google">
+                    <p><strong>Height recommended</strong>: 48px</p>
+                  </div>
+                </a>
+              </li>
+              <li>
+                <a href="#" title="Block Link = .blink">
+                  <div>
+                    <img class="blacklogo" src="/wdev/static/images/logos/airbnb.svg" alt="Airbnb">
+                    <p><code>img.blacklogo</code></p>
+                  </div>
+                </a>
+              </li>
+              <li>
+                <a href="#" title="Block Link = .blink">
+                  <div>
+                    <img class="graylogo" src="/wdev/static/images/logos/microsoft.svg" alt="Microsoft">
+                    <p><code>img.graylogo</code></p>
+                  </div>
+                </a>
+              </li>
+              <li class="bg-blue">
+                <a href="" title="Block Link = .blink">
+                  <div>
+                    <img class="whitelogo" src="/wdev/static/images/logos/netflix.svg" alt="Netflix">
+                    <p><code>img.whitelogo</code></p>
+                  </div>
+                </a>
+              </li>
+            </ul>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section>
+          <!--.wrap = container (width: 90%) -->
+          <div class="wrap">
+            <blockquote class="text-quote">
+              <p>An avatar is the graphical representation of the user or the user's alter ego or character. The <a href="https://en.wikipedia.org/wiki/Avatar_(computing)">word avatar</a> originates in Hinduism.</p>
+              <p><cite> <a href="http://twitter.com/username/"><img class="avatar-56" src="/wdev/static/images/avatar.jpg" alt="Avatar"> @username</a>, .avatar-56</cite></p>
+            </blockquote>
+            <hr>
+            <p><code>img[class*="avatar-"]</code> (80, 72, 64, 56, 48, and 40).</p>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section>
+          <div class="wrap">
+            <div class="grid vertical-align">
+              <div class="column">
+                <h2>Devices</h2>
+                <ul class="flexblock specs">
+                  <li>
+                    <div>
+                      <svg class="fa-wifi">
+                        <use xlink:href="#fa-wifi"></use>
+                      </svg>
+                      <h2>Ultra-Fast WiFi</h2>
+                      Simple and secure file sharing.
+                    </div>
+                  </li>
+                  <li>
+                    <div>
+                      <svg class="fa-battery-full">
+                        <use xlink:href="#fa-battery-full"></use>
+                      </svg>
+                      <h2>All day battery life</h2>
+                      Your battery worries may be over.
+                    </div>
+                  </li>
+                  <li>
+                    <div>
+                      <svg class="fa-life-ring">
+                        <use xlink:href="#fa-life-ring"></use>
+                      </svg>
+                      <h2>Lifetime Warranty </h2>
+                      We'll fix it or if we can't, we'll replace it.
+                    </div>
+                  </li>
+                </ul>
+              </div>
+              <!-- end .column-->
+              <div class="column">
+                <figure>
+                  <img class="aligncenter" src="/wdev/static/images/iphone.png" alt="iPhone">
+                </figure>
+              </div>
+              <!-- end .column-->
+            </div>
+            <!-- end .grid-->
+          </div>
+          <!-- end .wrap-->
+        </section>
+        <section>
+          <div class="wrap">
+            <div class="content-left">
+              <figure class="browser">
+                <img alt="Screenshot" src="https://webslides.tv/static/images/cover-apple.jpg">
+              </figure>
+            </div>
+            <!-- .end .content-left -->
+            <div class="content-left">
+              <h2>Screenshots</h2>
+              <p>HTML/CSS Browser.</p>
+              <pre>&lt;figure class="browser"&gt;
+  &lt;img alt="Screenshot" src="image.jpg"&gt;
+&lt;/figure&gt;</pre>
+            </div>
+            <!-- .end .content-left -->
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section class="bg-blue">
+          <span class="background dark" style="background-image:url('https://source.unsplash.com/R1J6Z1cnJZc/1600x800)"></span>
+          <div class="wrap aligncenter">
+            <h2>
+              Videos
+            </h2>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section>
+          <div class="wrap size-60">
+            <h3>Background Videos</h3>
+            <pre>&lt;video class="background-video" autoplay muted loop poster="image.jpg"&gt;
+  &lt;source src="video.mp4" type="video/mp4"&gt;
+&lt;/video&gt;</pre>
+            <p><code>.background-video</code></p>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section class="fullscreen bg-red aligncenter">
+          <div class="embed">
+            <video class="background-video dark" autoplay loop poster="https://webslides.tv/static/images/peggy.jpg">
+              <source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
+            </video>
+         </div>
+          <div class="wrap">
+            <h2><strong>Audio</strong></h2>
+            <p>Overlay: <code>section.bg-red > .background-video.dark</code> or .light</p>
+           </div>
+           <!-- .end .wrap -->
+        </section>
+        <section class="fullscreen bg-blue aligncenter">
+         <div class="embed">
+          <video class="background-video dark" autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg">
+            <source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
+          </video>
+          </div>
+          <!-- .end .embed -->
+          <div class="wrap">
+            <h2><strong>Muted</strong></h2>
+            <p>Overlay: <code>section.bg-blue > .background-video.dark</code> or .light</p>
+           </div>
+           <!-- .end .wrap -->
+        </section>
+        <section>
+          <div class="wrap">
+            <div class="content-left">
+              <h3>Responsive Videos</h3>
+              <p>Just copy and paste the code from YouTube to your slide.</p>
+              <pre>&lt;div class="embed"&gt;
+ <strong>&lt;iframe src="https://www.youtube.com/embed/XjJQBjWYDTs"&gt;
+ &lt;/iframe&gt;</strong>
+&lt;/div&gt;</pre>
+              <p><code>.embed</code> (responsive)</p>
+            </div>
+            <!-- end .content-left -->
+            <div class="content-left">
+              <!-- <div class="embed"> = Responsive -->
+              <div class="embed">
+                <iframe src="https://www.youtube.com/embed/XjJQBjWYDTs" allowfullscreen></iframe>
+              </div>
+              <!-- end .embed -->
+            </div>
+            <!-- end .content-left -->
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section>
+          <div class="wrap size-60">
+            <!-- Responsive video/iframe... Add <div class="embed"> -->
+            <div class="embed">
+              <iframe width="800" height="450" src="https://www.youtube.com/embed/3Q3eITC01Fg" allowfullscreen></iframe>
+            </div>
+            <!-- .end .embed -->
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section>
+          <div class="wrap size-60">
+            <h3>Fullscreen YouTube Video</h3>
+            <pre><strong>&lt;section class="fullscreen"&gt;</strong>
+  &lt;div class="embed"&gt;
+    &lt;iframe src="https://www.youtube.com/embed/iY05U7GaU5I"&gt;
+    &lt;/iframe&gt;
+  &lt;/div&gt;
+<strong>&lt;/section&gt;</strong>
+</pre>
+            <p><code>.fullscreen</code> > <code>.embed</code> (responsive)</p>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section class="fullscreen">
+          <!-- Fullscreen Video -->
+          <div class="embed">
+            <iframe width="800" height="450" src="https://www.youtube.com/embed/xSMB7kBynZA?playsinline=1" allowfullscreen></iframe>
+          </div>
+          <!-- .end .embed -->
+        </section>
+        <section class="frame">
+         <p class="aligncenter"><svg class="fa-thumbs-up large">
+                <use xlink:href="#fa-thumbs-up"></use>
+              </svg></p>
+          <div class="wrap size-60 bg-white">
+            <h3><a href="https://developers.google.com/youtube"><svg class="fa-youtube">
+                <use xlink:href="#fa-youtube"></use>
+              </svg> YouTube API</a></h3>
+            <p class="text-intro">Embed videos with <strong>loop, autoplay, and muted</strong> attributes. The video will automatically play when the slide is loaded.</p>
+
+            <p><strong>You should use a local or a remote server</strong> since the YouTube API doesn't seem to work nicely when using the file directly on the browser.</p>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section>
+          <div class="wrap">
+            <h3><svg class="fa-youtube">
+                <use xlink:href="#fa-youtube"></use>
+              </svg>YouTube API Parameters</h3>
+              <p>Syntax: <code>data-autoplay, data-loop, data-no-controls, data-mute</code>.</p>
+              <hr>
+           <div class="grid">
+            <div class="column">
+             <pre>&lt;div class="embed"&gt;
+  <strong>&lt;div data-youtube data-youtube-id=&quot;CQY3KUR3VzM&quot; data-autoplay data-loop&gt;
+  &lt;/div&gt;</strong>
+&lt;/div&gt;</pre>
+<p>autoplay + loop</p>
+            </div>
+            <!-- .end .column -->
+            <div class="column">
+            <pre>&lt;div class="embed"&gt;
+  <strong>&lt;div data-youtube data-youtube-id=&quot;CQY3KUR3VzM&quot; data-autoplay data-mute data-no-controls&gt;
+  &lt;/div&gt;</strong>
+&lt;/div&gt;</pre>
+<p>autoplay + mute + no controls.</p>
+            </div>
+            <!-- .end .column -->
+           </div>
+           <!-- .end .grid -->
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section>
+          <div class="wrap">
+            <div class="content-left">
+              <h3>YouTube API</h3>
+              <p><code>autoplay + loop</code></p>
+              <pre>&lt;div class="embed"&gt;
+  &lt;div data-youtube data-youtube-id=&quot;_m67JbGjWnc&quot; <strong>data-autoplay data-loop</strong>&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+            </div>
+            <!-- end .content-left -->
+            <div class="content-left">
+              <!-- <div class="embed"> = Responsive -->
+              <div class="embed">
+                <div data-youtube data-youtube-id="_m67JbGjWnc" data-autoplay data-loop></div>
+              </div>
+              <!-- end .embed -->
+            </div>
+            <!-- end .content-left -->
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section>
+          <div class="wrap size-70">
+            <h3><strong>Let's make some magic with the YouTube API</strong></h3>
+            <p>How to make a fullscreen YouTube video? <code>.fullscreen > .embed</code></p>
+              <hr>
+              <pre><strong>&lt;section class="fullscreen"&gt;</strong>
+  &lt;div class="embed"&gt;
+    &lt;div data-youtube data-youtube-id=&quot;dmkwb2KfLW8&quot; <strong>data-autoplay data-loop data-no-controls</strong>&lt;/div&gt;
+  &lt;/div&gt;
+<strong>&lt;/section&gt;</strong>
+</pre>
+<p>The video will automatically play when the slide is loaded.</p>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section class="fullscreen">
+          <!-- Fullscreen Video -->
+          <div class="embed">
+            <div data-youtube data-youtube-id="dmkwb2KfLW8" data-autoplay data-loop data-no-controls></div>
+          </div>
+          <!-- .end .embed -->
+        </section>
+        <section>
+          <div class="wrap size-70">
+            <h3><strong>Fullscreen YouTube video background</strong></h3>
+            <p>Overlaying a transparent background on an embedded Youtube video:</p>
+              <hr>
+              <pre><strong>&lt;section class="fullscreen bg-black"&gt;</strong>
+  &lt;div class="embed dark"&gt;
+    &lt;div data-youtube data-youtube-id=&quot;c9psfOxJysw&quot; <strong>data-autoplay data-loop data-mute data-no-controls</strong>&lt;/div&gt;
+  &lt;/div&gt;
+<strong>&lt;/section&gt;</strong>
+</pre>
+<p><code>.fullscreen[class*="bg-"] > .embed.dark</code> or .light</p>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section class="fullscreen bg-blue">
+          <!-- Fullscreen Video -->
+          <div class="embed dark">
+            <div data-youtube data-youtube-id="SomZsr1J7ao" data-autoplay data-loop data-mute data-no-controls></div>
+          </div>
+          <!-- .end .embed -->
+          <div class="wrap aligncenter">
+            <h2><strong>Overlay</strong></h2>
+            <p><code>.fullscreen[class*="bg-"] > .embed.dark</code> or .light</p>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section class="bg-primary">
+          <span class="background-bottom dark" style="background-image:url('https://source.unsplash.com/RkBTPqPEGDo/1600x800)"></span>
+          <div class="wrap aligncenter">
+            <h3>
+              <svg class="fa-map">
+                <use xlink:href="#fa-map"></use>
+              </svg>
+              Maps & Charts
+            </h3>
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section class="bg-black-blue frame">
+          <div class="wrap size-50">
+            <p class="text-context">Status of Net Neutrality around the world.</p>
+            <div class="embed">
+              <iframe width='800' height='450' src='https://dejiaccessnow.carto.com/viz/4f239c60-356f-11e5-b01c-0e853d047bba/embed_map' allowfullscreen></iframe>
+            </div>
+            <!-- .end .embed -->
+          </div>
+          <!-- .end .wrap -->
+        </section>
+        <section class="fullscreen frame">
+          <div class="embed">
+            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3170.254536199183!2d-5.994303837186783!3d37.38381233311839!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xbaa976bfaec1fe87!2sReal+Alc%C3%A1zar+de+Sevilla!5e0!3m2!1ses!2ses!4v1489408674667" width="600" height="450" allowfullscreen></iframe>
+          </div>
+          <!-- .end .embed -->
+        </section>
+        <section>
+          <div class="wrap size-60">
+            <h3><a href="https://www.theatlas.com/" title="I love Quartz's charts">Charts</a></h3>
+            <!-- Responsive video/iframe/chart... Add <div class="embed"> -->
+            <div class="embed">
+              <!-- I love Quartz's charts -->
+              <div class="atlas-chart" data-id="rJt91kGnx" data-width="640" data-height="449"><img alt="Chart" src="https://www.theatlas.com/i/atlas_rJt91kGnx.png" style="max-width: 100%;"></div><script src="https://www.theatlas.com/javascripts/atlas.js"></script>
+            </div>
+            <!-- end .embed -->
+          </div>
+          <!-- .end .wrap -->
+        </section>
+      </article>
+    </main>
+    <!--main-->
+
+    <!-- Required -->
+    <script src="../static/js/webslides.js"></script>
+    <script>
+      window.ws = new WebSlides();
+    </script>
+
+    <!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
+    <script defer src="/wdev/static/js/svg-icons.js"></script>
+
+  </body>
+</html>

tests/test.css

@@ -0,0 +1,31 @@
+
+#webslides-zoomed.grid {
+  background: #ccc;
+}
+
+#webslides-zoomed.grid > .column {
+  position: relative;
+}
+#webslides-zoomed.grid > .column > .wrap-zoom {
+  position: relative;
+  background: #fff;
+}
+
+#webslides-zoomed.grid > .column > .wrap-zoom > .slide {
+  transform: scale(0.25) translate(-150%, -150vh);
+  display: flex !important;
+  position: absolute;
+  top: 0;
+  left: 0;
+  clip: rect(0px auto auto 0);
+}
+
+
+
+
+.enorme {
+	position: absolute;
+	top: 0;
+	left: 0;
+	font-size: 500px;
+}

tests/test.js

@@ -0,0 +1,36 @@
+window.addEventListener("load", () => {
+  var getValue = ( px ) => {
+    return new Number( px.replace( /[^\d\.]/g, '' ) );
+  };
+
+
+  var wrap = ( query, tag ) => {
+    // Now webslides is a grid
+    const ws = document.getElementById('webslides');
+    ws.classList.add('grid');
+
+    document.querySelectorAll( query ).forEach( elem => {
+      const div = document.createElement( 'div' );
+      div.className = 'column';
+      elem.parentElement.insertBefore( div, elem );
+      const wrap = document.createElement( 'div' );
+      wrap.className = 'wrap-zoom';
+      div.appendChild( wrap );
+      wrap.appendChild( elem );
+
+      const divCSS = window.getComputedStyle( div );
+      const divW = getValue( divCSS.width );
+      const marginW = getValue( divCSS.paddingLeft ) + getValue( divCSS.paddingRight );
+      const marginH = getValue( divCSS.paddingTop ) + getValue( divCSS.paddingBottom );
+
+//      div.style.height = divH + 'px';
+      elem.style.width =  ( window.innerWidth - marginW * 4 ) + 'px';
+      elem.style.height = ( window.innerHeight - marginH * 4 )  + 'px';
+
+      const slideCSS = window.getComputedStyle( elem );
+      wrap.style.height = ( getValue( slideCSS.height ) / 4 ) + 'px';
+    });
+  };
+
+  //wrap( '.slide', 'div' );
+});