Railsでlightboxが上手く動かない

Question

Railsでlightboxを動かしたいです。

Ruby on Railsで写真を投稿できるSNSを作っています。
lightboxを一応は実装できたようなのですが、完璧に動いてくれません。
具体的には、１回写真をクリックすると真っ黒な背景に該当の写真が写るだけで、そこから一度戻ってもう一回クリックするとlightboxが動きローディングgifや閉じる×ボタンなどが出てきます。
１回目のクリックでlightboxが動くようにしたいのですが、どなたか解決方法を教えて頂けませんでしょうか。どうぞよろしくお願いいたします。

問題となりそうな部分①（view内でのdata-lightboxの指定）

<a href="<%="/post_image_one/#{@post.id}_one.jpg"%>" data-lightbox="image"><img class='post-img' src="<%="/post_image_one/#{@post.id}_one.jpg"%>"></a>

問題となりそうな部分②（application.js内でのlightbox.jsの読み込み）

require ("../../../vendor/assets/lightbox/js/lightbox-plus-jquery")

問題となりそうな部分③（application.css内でのlightbox.cssの読み込み）

*= require 'lightbox'

試したこと

色々と調べたりして試したのですが、自分の力では行き詰ってしまいました。
もしどなたか解決方法をご存知の方がおりましたら、ご教示頂けませんでしょうか。どうぞよろしくお願いいたします。

Comments

[m.ts10806]

「問題となりそうな部分」を幾つかあげられていますが、
それはどうしてそのように思ったのでしょうか。

[hirokazudesu]

ご質問ありがとうございます。light boxを実装するにあたって書き変えた、または書き加えたところが該当部分になるからです。まだ初心者でよく分からない部分も多く申し訳ございません。

[m.ts10806]

light boxは専用のcssもありませんでしたか？
あとブラウザ開発ツールの「コンソール」にエラーが表示されていないか確認してください。

[hirokazudesu]

CSSもありました！backgroundのurlをimage-urlに書き直したと思います。コンソールというのはレイルズコンソールでしょうか？それともコマンドプロンプトのことでしょうか。度々申し訳ありません。

[m.ts10806]

「ブラウザ」の「開発ツール」です。
分からなければブラウザ表示してからF12押してください。（Windowsの場合。Macは分からないので調べてもらえたら）

[hirokazudesu]

ありがとうございます。仕事終えて帰ったら確認してみます。今後とも是非よろしくお願いいたします。

[hirokazudesu]

お世話になっております。F12を押して確認したところ、特にエラーは出ませんでした・・・。

[hirokazudesu]

1回目クリックするとURLが変わるのですが、２回目の正常に動く際はURLが変わりませんでした。何か関係はありますでしょうか、、。

[hirokazudesu]

何度も申し訳ありません。１回目クリックしてURLが変わる際のURLは画像の保存先になっていました...。リンクをaタグで作っているのですが、lightboxが機能せず、aタグで指定しているURLに飛んでいる感じでしょうか。。

[hirokazudesu]

どうやらリロードしないとjava scriptが動かない状態かもしれず、それにはturbolinksをoffにする必要があるそうなので、試してみます！

Answer 1

turbolinksをoffにする必要がありました。