ポートフォリオを作成する上でLightbox2を用いてrefileの画像を拡大する方法にかなり手こずったので備忘録として残します。
どなたかの参考にもなれば幸いです。
前提
refileは導入済みとします。
Lightbox2の導入
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/css/lightbox.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/js/lightbox.min.js" type="text/javascript"></script>
この2行を追加するだけでLightbox2を導入できます。
Lightbox2はjQueryで書かれているので、jQueryの読み込みをLightbox2より先に行います。
実際のコード
実際のコードの一例は下記のようになっています。
<%= link_to Refile.attachment_url(work_out, :after_image), 'data-lightbox':"work_outs", 'data-title':"全ユーザーのアフター画像が表示されます" do %>
Refile.attachment_url(work_out, :after_image)で画像（after_image）のURLを取得できることを知らなかったために結構苦戦しました...
サンプルデモ
作成したポートフォリオ上での動きは下記の通りになってます！完成！！
