Add detach method (resolve #2)

README.md

@@ -140,6 +140,18 @@ zoom.update({
 })
 ```
 
+#### `.detach()`
+
+Releases the images related to the zoom from the plugin.
+
+```js
+const zoom = mediumZoom('#my-image')
+
+zoom.detach()
+```
+
+*Emits an event [`detach`](#events).*
+
 #### `.addEventListeners(type, listener)`
 
 Registers the specified listener on each target of the zoom.
@@ -160,6 +172,7 @@ zoom.addEventListeners('hidden', () => {
 | shown            | Fired when the zoom has finished being animated                     |
 | hide             | Fired immediately when the `hide` instance method is called         |
 | hidden           | Fired when the zoom out has finished being animated                 |
+| detach           | Fired when the `detach` instance method is called                   |
 
 ```js
 const zoom = mediumZoom('#image-tracked')
@@ -246,6 +259,16 @@ zoom.addEventListeners('show', event => {
   console.log(`"${event.target.alt}" has been zoomed ${++counter} times`)
 })
 ```
+
+<details>
+ <summary>Detach the zoom after a while</summary>
+```js
+const zoom = mediumZoom('#image-detach')
+
+setTimeout(() => {
+  zoom.detach()
+}, 5000)
+```
 </details>
 
 ## Demo

demo/index.html

@@ -138,6 +138,15 @@ <h1 class="header__title">Medium Zoom — Demo</h1>
         reprehenderit accusantium quasi a autem neque asperiores, tenetur impedit repudiandae quos.
       </p>
 
+      <figure>
+        <img
+          id="zoom-detach"
+          src="https://static.pexels.com/photos/106118/pexels-photo-106118.jpeg"
+          alt="Zoom detached after 5 seconds"
+        >
+        <figcaption>Zoom detached after 5 seconds</figcaption>
+      </figure>
+
       <h2>Journal</h2>
 
       <blockquote id="journal">
@@ -157,7 +166,7 @@ <h2>Journal</h2>
       </div>
     </footer>
 
-    <script src="../dist/medium-zoom.js"></script>
+    <script src="../dist/medium-zoom.min.js"></script>
     <script>
       window.addEventListener('load', function () {
         // Add the zoom effect to the hero image
@@ -170,6 +179,13 @@ <h2>Journal</h2>
           zoomToTrigger.show()
         })
 
+        // Add a zoom to be detached
+        const zoomToDetach = mediumZoom('#zoom-detach')
+
+        setTimeout(function () {
+          zoomToDetach.detach()
+        }, 5000)
+
         // Add zooms to a container
         const containerZoom = [
           heroZoom,
@@ -185,7 +201,8 @@ <h2>Journal</h2>
           mediumZoom('#zoom-metaClick', {
             metaClick: false
           }),
-          zoomToTrigger
+          zoomToTrigger,
+          zoomToDetach
         ]
 
         // Write in the journal an image is zoomed
@@ -196,6 +213,11 @@ <h2>Journal</h2>
             const time = (new Date()).toLocaleTimeString()
             journal.innerHTML += `<p>❯ "${event.target.alt}" was zoomed at ${time}`
           })
+
+          zoom.addEventListeners('detach', function (event) {
+            const time = (new Date()).toLocaleTimeString()
+            journal.innerHTML += `<p>❯ "${event.target.alt}" was detached at ${time}`
+          })
         })
       })
     </script>