この記事が役に立ちそうな人
  • 画像をクリックすると拡大する機能を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となりエラーが発生するのを防ぐためですね。

 

 

実際に動かしてみると、期待通りの動作をしてくれました。

 

もしlightbox2が動かない場合、そもそもRailsアプリにjQueryが入っているかどうか確認してみてください。

おすすめの記事