Install Viewer.js

app/assets/javascripts/application.js

@@ -4,4 +4,12 @@
 //= require jquery3
 //= require popper
 //= require bootstrap-sprockets
+//= require viewerjs/dist/viewer
+//= require jquery-viewer/dist/jquery-viewer
 //= require_tree .
+
+$(document).ready(function() {
+  $('#image').viewer({
+    inline: true,
+  })
+})

app/assets/stylesheets/application.scss

@@ -1,3 +1,4 @@
 @import 'bootstrap';
 @import 'font-awesome-sprockets';
 @import 'font-awesome';
+@import 'viewerjs/dist/viewer';

app/views/passports/show.html.erb

@@ -139,7 +139,9 @@
 
     <% @passport.image.try do |image| %>
       <div class="col-md-8 col-lg-6">
-        <%= image_tag url_for(image), class: 'img-fluid' %>
+        <div>
+          <%= image_tag url_for(image), id: :image, class: 'img-fluid' %>
+        </div>
       </div>
     <% end %>
   </div>

package-lock.json

@@ -1,4 +1,17 @@
 {
   "name": "partynest",
-  "lockfileVersion": 1
+  "requires": true,
+  "lockfileVersion": 1,
+  "dependencies": {
+    "jquery-viewer": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/jquery-viewer/-/jquery-viewer-1.0.0.tgz",
+      "integrity": "sha512-j1f7AKNU+wjywS8CwtHzDymyoroUznoXnrRp87WIRVuzZzMoFtJCrj54F/0BAi2DIEkDHx/1EZl9N725M6LiIA=="
+    },
+    "viewerjs": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/viewerjs/-/viewerjs-1.3.0.tgz",
+      "integrity": "sha512-Xt0Iy/j639MwuDV5xAKhdk9PKVj9FjMvh5CVH7T7KKGeKq4tXIlDDySs2uxkmG+GpFeM6997tt9dHdzHhUwd+g=="
+    }
+  }
 }

package.json

@@ -1,5 +1,8 @@
 {
   "name": "partynest",
   "private": true,
-  "dependencies": {}
+  "dependencies": {
+    "jquery-viewer": "^1.0.0",
+    "viewerjs": "^1.3.0"
+  }
 }