
この記事が役に立ちそうな人
- 画像をクリックすると拡大する機能を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が入っているかどうか確認してみてください。