The problem at hand was a landing page for a SAAS app with screenshots where it was hard to read the text in the screenshots (think a dense, information packed dashboard). Nick said to me “those should be zoomable; just zoom.js”. I made my usual grumbles about being front end challenged but then realized that I was basically being a winer – and I hate winers, so to work!
It should be noted that Zoom.js is jQuery based which means that it won’t work off the bat in Rails 5.1 without the gem ‘jquery-rails’ line being present in Gemfile.
Disclaimer: I recognize that some of this isn’t perfect. Specifically this library is clearly packaged to be installed by gulp in an automated fashion but I’ve never had a lot of luck with gulp hence the use below of wget / curl.
How to Add zoom.js to a Rails Application
Please note that jQuery has been a core Rails dependency for years and years so steps 1 and 2 likely aren’t needed for you.
- Add jquery to your Rails app if it isn’t present. Add jquery-rails to Gemfile:
- Require jquery in your application.js:
//= require juery
- Add the data-action=>”zoom” to your image_tag calls for any images you want to be zoomable like this:
<%=image_tag(“screenshot_dashboard.png”, :class => “img-responsive”, :alt => “a dashboard view”, “data-action” => “zoom”)%>
- In your terminal, change into the app/assets/stylesheets directory:
- Do a wget or curl on the url for the css. I got this url by navigating the source tree down to zoom.css and then viewing the file and clicking the raw view:
- Do a wget or curl on the url for the js. I got this url by navigating the source tree down to zoom.js and then viewing the file and clicking the raw view:
- Add the css and js to your application layout, application.html.erb, with two lines like these (obviously you need to add angle braces around them; my blogging tool eats the text if I show them, alas):
link href="assets/zoom.css" rel="stylesheet"