【Rails5】クリックすると画像が拡大する「lightbox2」の導入方法

2019年12月21日 2019年12月21日

まんぞー

この記事が役に立ちそうな人

画像をクリックすると拡大する機能をRailsアプリに導入したい人
JavaScriptが苦手な人

この記事では、「クリックするとウィンドウが開き画像が拡大される」という機能をRailsアプリに実装する方法を紹介していきたいと思います。

多くのWebサービスにおいて当たり前のように使われている機能ですね。

lightbox2を導入

前提条件

画像アッロード機能にはcarrierwaveを使用
jQueryはすでに導入済みの状態

今回使用するのは「lightbox2」というスクリプト。

CDN経由で利用できるため、あれこれとファイルを記述する必要が無く、JavaScriptが苦手という方でも難無く導入できると思います。

あれこれ説明するよりも実際に手を動かしていった方が早いので、さっそく始めましょう。

# app/views/layouts/application.html.erb

<head>

...
  <link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/css/lightbox.css" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/js/lightbox.min.js" type="text/javascript"></script>

...

</head>

やる事は超シンプル。テンプレートのhead内に上記のコードを記述し、CDN経由で読み込むだけです。

あとは各view内の画像を表示したい場所に次のような記述を行えばOK。

# app/views/xxxx/xxxx.html.erb

<%=  link_to @hoge.image.url, 'data-lightbox': @hoge.image do %>
  <%= image_tag @hoge.image.url if @hoge.image? %>
<% end %>

「@hoge」の部分には各自用意したインスタンス変数を入れてください。

たとえば、僕は今ポートフォリオ用にラーメンのレビューサイトを作成中なのですが、実際のコードは次のように書きました。

# app/views/ramen_shops/show.html

<%=  link_to @ramen_shop.image.url, 'data-lightbox': @ramen_shop.image do %>
  <%= image_tag @ramen_shop.image.url if @ramen_shop.image? %>
<% end %>

image_tagの後ろにif文を付けているのは、画像が無かった場合にnilとなりエラーが発生するのを防ぐためですね。