Merge pull request #15 from francoischalifour/feature/examples

Add examples in JavaScript and React
francoischalifour · Sep 20, 2017 · 4b9526e · 4b9526e
2 parents e833f8e + 24e13e3
commit 4b9526e
Show file tree

Hide file tree

Showing 43 changed files with 9,245 additions and 110 deletions.
diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2016 François Chalifour
+Copyright (c) 2017 François Chalifour
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

diff --git a/examples/javascript/README.md b/examples/javascript/README.md
@@ -0,0 +1,13 @@
+# JavaScript
+
+> This is a medium-zoom example using vanilla JavaScript.
+
+## Production
+
+Open [`index.html`](index.html) which contains the [production version](https://unpkg.com/medium-zoom@0/dist/medium-zoom.min.js) of medium-zoom.
+
+## Development
+
+Open [`development.html`](development.html) which contains the [development version](../../dist/medium-zoom.min.js) of medium-zoom.
+
+[See dev instructions](../../README.md#dev).
diff --git a/examples/javascript/demo.js b/examples/javascript/demo.js
@@ -0,0 +1,49 @@
+(function () {
+  // Handle the zoom on click on the button
+  var zoomToTrigger = mediumZoom('#zoom-trigger')
+  var button = document.querySelector('#btn-trigger')
+  button.addEventListener('click', function () {
+    zoomToTrigger.show()
+  })
+
+  // Add a zoom to be detached
+  var zoomToDetach = mediumZoom('#zoom-detach')
+  setTimeout(function () {
+    zoomToDetach.detach()
+  }, 5000)
+
+  // Add zooms to a container
+  var containerZoom = [
+    mediumZoom('#zoom-default'),
+    mediumZoom('#zoom-margin', {
+      margin: 48
+    }),
+    mediumZoom('#zoom-background', {
+      background: '#212530'
+    }),
+    mediumZoom('#zoom-scrollOffset', {
+      scrollOffset: 0,
+      background: 'rgba(25, 18, 25, .9)'
+    }),
+    mediumZoom('#zoom-metaClick', {
+      metaClick: false
+    }),
+    zoomToTrigger,
+    zoomToDetach
+  ]
+
+  // Write in the journal every time an image is zoomed
+  var journal = document.querySelector('#journal')
+
+  containerZoom.forEach(function (zoom) {
+    zoom.addEventListeners('show', function (event) {
+      var time = (new Date()).toLocaleTimeString()
+      journal.innerHTML += '<p>❯ "' + event.target.alt + '" was zoomed at ' + time
+    })
+
+    zoom.addEventListeners('detach', function (event) {
+      var time = (new Date()).toLocaleTimeString()
+      journal.innerHTML += '<p>❯ "' + event.target.alt + '" was detached at ' + time
+    })
+  })
+})()
diff --git a/examples/javascript/development.html b/examples/javascript/development.html
@@ -0,0 +1,192 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="theme-color" content="#4caf50">
+
+    <link rel="shortcut icon" href="favicon.ico">
+
+    <link href="https://fonts.googleapis.com/css?family=Varela+Round|Work+Sans" rel="stylesheet">
+    <link href="reset.css" rel="stylesheet">
+    <link href="style.css" rel="stylesheet">
+
+    <title>Medium Zoom | Demo</title>
+  </head>
+
+  <body>
+    <header class="header">
+      <h1 class="header__title">Medium Zoom</h1>
+      <div class="header__subtitle">Medium zoom on your pictures in vanilla JavaScript</div>
+
+      <div class="header__info">
+        <a href="https://github.com/francoischalifour/medium-zoom" class="button">View on GitHub</a>
+        <a href="https://francoischalifour.com/lab/medium-image-zoom" class="button">Read the article</a>
+      </div>
+    </header>
+
+    <article class="container">
+      <figure>
+        <img
+          id="zoom-default"
+          src="images/image-1.jpg"
+          alt="Zoom with default options"
+        >
+        <figcaption>Zoom with default options</figcaption>
+      </figure>
+
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+        Tempora praesentium cupiditate fugit voluptas, rem eligendi, voluptatem molestias pariatur atque amet,
+        dicta, similique beatae optio quos! Hic necessitatibus dicta magni, tempore.
+        Atque illo voluptatibus fugiat id pariatur cum quasi vel ut repellendus iure quaerat,
+        doloremque sit voluptatum odio maiores provident consequuntur accusantium saepe.
+      </p>
+
+      <figure>
+        <img
+          id="zoom-margin"
+          src="images/image-2.jpg"
+          alt="Zoom with margin"
+        >
+        <figcaption>Zoom with margin</figcaption>
+      </figure>
+
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+        Ea dolores quaerat, quis modi nostrum sequi adipisci ratione esse
+         blanditiis error beatae vel non vero dolor nemo. Animi nemo quisquam ducimus!
+      </p>
+
+      <figure>
+        <img
+          id="zoom-background"
+          src="images/image-3.jpg"
+          alt="Zoom with background color"
+        >
+        <figcaption>Zoom with background color</figcaption>
+      </figure>
+
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos magnam illo,
+        quam iusto, autem ratione commodi deleniti vero magni fuga consectetur expedita,
+        voluptatum enim quidem? Rem, minima laboriosam hic! Id.
+      </p>
+
+      <figure class="pull-right">
+        <img
+          id="zoom-scrollOffset"
+          src="images/image-4.jpg"
+          alt="Zoom without scroll effect"
+        >
+        <figcaption>Zoom without scroll offset</figcaption>
+      </figure>
+
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus cum nulla
+        eligendi recusandae at quae odio, harum nesciunt ut temporibus vitae, laudantium minus.
+        Iste officia aliquid, laborum ratione maxime beatae.
+      </p>
+
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim asperiores totam fugiat
+        repellendus laboriosam accusantium, possimus similique quos repellat molestias excepturi
+        ad perspiciatis beatae! Qui repellat numquam incidunt, accusamus autem.
+      </p>
+
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+        Corrupti provident sunt recusandae enim commodi ab dolorem ipsum dolor magni
+        reprehenderit accusantium quasi a autem neque asperiores, tenetur impedit repudiandae quos.
+      </p>
+
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+        Accusamus cum nulla eligendi recusandae at quae odio, harum nesciunt ut
+        temporibus vitae, laudantium minus. Iste officia aliquid, laborum ratione maxime beatae.
+      </p>
+
+      <figure class="pull-left">
+        <img
+          id="zoom-metaClick"
+          src="images/image-5.jpg"
+          alt="Zoom without meta click"
+        >
+        <figcaption>Zoom without meta click</figcaption>
+      </figure>
+
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+        Accusamus cum nulla eligendi recusandae at quae odio, harum nesciunt ut
+        temporibus vitae, laudantium minus. Iste officia aliquid, laborum ratione maxime beatae.
+      </p>
+
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+        Corrupti provident sunt recusandae enim commodi ab dolorem ipsum dolor magni
+        reprehenderit accusantium quasi a autem neque asperiores, tenetur impedit repudiandae quos.
+      </p>
+
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+        Corporis veritatis cupiditate iure velit laboriosam eius nesciunt officiis
+        odit cumque deleniti assumenda esse exercitationem ducimus, accusantium eligendi itaque dolorem molestias saepe!
+      </p>
+
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+        Accusamus cum nulla eligendi recusandae at quae odio, harum nesciunt ut
+        temporibus vitae, laudantium minus. Iste officia aliquid, laborum ratione maxime beatae.
+      </p>
+
+      <figure>
+        <img
+          id="zoom-trigger"
+          src="images/image-6.jpg"
+          alt="Zoom to trigger"
+        >
+        <figcaption>
+          <button id="btn-trigger" class="button">Trigger the zoom</button>
+        </figcaption>
+      </figure>
+
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+        Corrupti provident sunt recusandae enim commodi ab dolorem ipsum dolor magni
+        reprehenderit accusantium quasi a autem neque asperiores, tenetur impedit repudiandae quos.
+      </p>
+
+      <figure>
+        <img
+          id="zoom-detach"
+          src="images/image-7.jpg"
+          alt="Zoom detached after 5 seconds"
+        >
+        <figcaption>Zoom detached after 5 seconds</figcaption>
+      </figure>
+
+      <h2>Journal</h2>
+
+      <blockquote id="journal">
+          <p>In this journal appears the history of the images zoomed.</p>
+      </blockquote>
+
+    </article>
+
+    <footer class="footer">
+      <div class="footer__links">
+        <a href="https://github.com/francoischalifour/medium-zoom" class="button">View on GitHub</a>
+        <a href="http://francoischalifour.com/lab/medium-image-zoom" class="button">Read the article</a>
+      </div>
+
+      <div class="footer__copyright">
+        Made by <a href="https://francoischalifour.com">François Chalifour</a>
+      </div>
+
+      <p><a href="#">Back to top</a></p>
+    </footer>
+
+    <script src="../../dist/medium-zoom.min.js"></script>
+    <script src="demo.js"></script>
+  </body>
+</html>
diff --git a/examples/javascript/favicon.ico b/examples/javascript/favicon.ico
diff --git a/examples/javascript/images/image-1.jpg b/examples/javascript/images/image-1.jpg
diff --git a/examples/javascript/images/image-2.jpg b/examples/javascript/images/image-2.jpg
diff --git a/examples/javascript/images/image-3.jpg b/examples/javascript/images/image-3.jpg
diff --git a/examples/javascript/images/image-4.jpg b/examples/javascript/images/image-4.jpg
diff --git a/examples/javascript/images/image-5.jpg b/examples/javascript/images/image-5.jpg
diff --git a/examples/javascript/images/image-6.jpg b/examples/javascript/images/image-6.jpg
diff --git a/examples/javascript/images/image-7.jpg b/examples/javascript/images/image-7.jpg