diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index 7f337ad..343fc29 100644
--- a/app/assets/javascripts/application.js
+++ b/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,
+ })
+})
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 4fbb9f3..d276eec 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -1,3 +1,4 @@
@import 'bootstrap';
@import 'font-awesome-sprockets';
@import 'font-awesome';
+@import 'viewerjs/dist/viewer';
diff --git a/app/views/passports/show.html.erb b/app/views/passports/show.html.erb
index 935a50e..efd580f 100644
--- a/app/views/passports/show.html.erb
+++ b/app/views/passports/show.html.erb
@@ -139,7 +139,9 @@
<% @passport.image.try do |image| %>
- <%= image_tag url_for(image), class: 'img-fluid' %>
+
+ <%= image_tag url_for(image), id: :image, class: 'img-fluid' %>
+
<% end %>
diff --git a/package-lock.json b/package-lock.json
index 1b66e6a..48ad0e2 100644
--- a/package-lock.json
+++ b/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=="
+ }
+ }
}
diff --git a/package.json b/package.json
index 971cc23..14209b8 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,8 @@
{
"name": "partynest",
"private": true,
- "dependencies": {}
+ "dependencies": {
+ "jquery-viewer": "^1.0.0",
+ "viewerjs": "^1.3.0"
+ }
}