Replace Fluidbox with Zooming

Author: migueldemoura

README.md

@@ -41,6 +41,7 @@ Used tools
   - [Jekyll Sitemap](https://github.com/jekyll/jekyll-sitemap)
   - [HTML5 Boilerplate](https://html5boilerplate.com/) (Influenced by)
   - [Kickster](https://kickster.nielsenramon.com/)
+  - [Zooming](https://github.com/kingdido999/zooming/)
   - [Retina.js](https://imulus.github.io/retinajs/)
   - [STACSS](https://stacss.nielsenramon.com/)
   - [Yarn](https://yarnpkg.com)

_assets/javascripts/application.js

@@ -1,13 +1,15 @@
 //= require_self
 
-$(function() {
+$(document).ready(function() {
   // ScrollAppear
   if (typeof $.fn.scrollAppear === 'function') {
     $('.scrollappear').scrollAppear();
   }
 
-  // Fluidbox
-  $('.fluidbox-trigger').fluidbox();
+  // Zooming
+  new Zooming(
+    {customSize: '100%', scaleBase: 0.9, scaleExtra: 0, enableGrab: false}
+  ).listen('img[data-action="zoom"]');
 
   // Share buttons
   $('.article-share a').on('click', function() {

_assets/javascripts/vendor.js

@@ -1,5 +1,4 @@
 //= require jquery
-//= require throttle-debounce-fn/dist/throttle-debounce-fn.js
-//= require fluidbox
+//= require zooming
 //= require retinajs/dist/retina.js
 //= require svgxuse/svgxuse.js

_assets/stylesheets/dark.scss

@@ -47,7 +47,6 @@ $article-paginator-color-hover: $gray-lightest;
 // Vendors
 
 @import "vendor/normalize";
-@import "../yarn/fluidbox/src/css/_fluidbox.scss";
 
 // Settings
 

_assets/stylesheets/light.scss

@@ -47,7 +47,6 @@ $article-paginator-color-hover: $gray-darkest;
 // Vendors
 
 @import "vendor/normalize";
-@import "../yarn/fluidbox/src/css/_fluidbox.scss";
 
 // Settings
 

_includes/image.html

@@ -1,5 +1,9 @@
 <a href="{% asset '{{ include.path-detail }}' @path %}"
    data-rjs="{% asset '{{ include.path-detail }}' @path %}"
-   class="fluidbox-trigger">
-  <img src="{% asset '{{ include.path }}' @path %}" alt="{{ include.alt }}" />
+>
+  <img src="{% asset '{{ include.path }}' @path %}" alt="{{ include.alt }}"
+       data-action="zoom"
+       data-zooming-width="{{ assets[include.path].width }}"
+       data-zooming-height="{{ assets[include.path].height }}"
+  />
 </a>

package-lock.json

@@ -7,8 +7,7 @@
   },
   "dependencies": {
     "jquery": "^3.2.1",
-    "throttle-debounce-fn": "^1.0.1",
-    "fluidbox": "^2.0.5",
+    "zooming": "^2.0.0",
     "retinajs": "^2.1.1",
     "webfontloader": "^1.6.28",
     "svgxuse": "^1.2.4"