画像をクリックするとモーダルウィンドウで拡大表示されるようにする方法をまとめました。

【注意】画像の保存先がローカルではなく、AWSなどのクラウドサービスに格納している場合の実装方法です。

rightboxの実装でHTMLの記述をRailsの書き方に変換するのに四苦八苦しながらやっとのこと実装できたので、備忘録としてまとめておきます。

画像クリックでこんな感じに表示されます↓

まずヘッダーに以下のコードを貼り付けます。

<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>

貼るだけでOK。次にViewを編集していきます。

<%= link_to image.avatar, "data-lightbox" => image.avatar do %>
  <%= image_tag image.avatar, height: '250', :style=>"width:300;"%>
<% end %>

以上で実装完了です！めっちゃ簡単！！(実装まで半日かかったなんて言えない。。)

では一行ずつ処理内容を追って説明していきます。

<%= link_to image.avatar, "data-lightbox" => image.avatar do %> ～～～ <% end %>

do～endで、link_toもブロックで囲んで処理できます。

ブロックで囲むことにより複雑な処理でも対応可能になります。

第一引数に画像のデータ、第二引数にdata-lightbox属性を指定してlightboxを有効にします。属性の値には、各画像に一意の名前(つまり画像のデータ)を入れます。

これでlink_toで画像のリンクは作成できました。

<%= image_tag image.avatar, height: '250', :style=>"width:300;"%>

image_tagはHTMLの<i㎎>を生成するメソッドです。

第一引数に画像データ、第二引数にオプションを指定します。オプションの部分は各々設定してください。

以上でモーダルウィンドウの実装ができると思います。僕自身link_toの使い方が理解できていなかったようで、実装に時間がかかってしまいました。。こういった基礎の部分はしっかり使いこなせるようになっていきたい(-＿-;)