Q&A
コードはこれで全てですか？
HTMLも必要に思いますし、
そもそも$lightboxという変数はどこに定義されてますか？
jQuery 3.5.1
lightbox2 v2.11.3
jQuery初心者です。
lightbox2の最新版を公式サイト（github）からDLして利用しました。
https://github.com/lokesh/lightbox2/releases/tag/v2.11.3
jsとcssとimageをローカルに置きました。
画像のポップアップはしましたが、閉じるアイコンが出ておらずポップアップを閉じれません。
よく見ると、ポップアップが開く一瞬、consoleにエラーを吐いてました。
エラー行のlightbox.js:262行（プラグイン）は以下のようになっています。
js/lightbox.js
javacsript
1 // Position Lightbox 2 var top = $window.scrollTop() + this.options.positionFromTop; 3 var left = $window.scrollLeft(); 4 this.$lightbox.css({ 5 top: top + 'px', 6 left: left + 'px' 7 }).fadeIn(this.options.fadeDuration); //この部分 8
該当のソース
html
1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="utf-8"> 5 6<link media="all" rel="stylesheet" href="/css/style.css"> 7<link media="all" rel="stylesheet" href="/css/lightbox.min.css"> 8<script src="https://code.jquery.com/jquery-3.5.1.js"></script> <!-- jquery --> 9<meta name="viewport" content="width=device-width, initial-scale=1.0"> 10<title>Preview Layout</title> 11</head> 12<body> 13 14 15<a href="/images/cate-farm.jpg" data-lightbox="demo"><img class="item-show__img-bg" src="/images/cate-farm.jpg" alt=""></a> 16 17<script type="text/javascript" src="/js/lightbox.min.js"></script> 18 19</body> 20</html>
jQueryのバージョンとligtboxのバージョンが合っていないのかな？と思いましたが、lightboxが利用してるjQueryバージョンがgitに記載がないためよく分かりません。
原因分かる方いたら教えていただけないでしょうか？
宜しくお願いします。
あと念のため、githubのURLもリンクとして提示してください
ちょうど追記してるところでした。
あと
>そもそも$lightboxという変数はどこに定義されてますか？
は、プラグイン側のコードです
これかな。jquery はどこでどうやって読み込んでますか？
https://stackoverflow.com/questions/46507679/uncaught-typeerror-this-lightbox-css-fadein-is-not-a-function
jQuery本体は、<head>で読み込んでます。
>href="{{ path '/css/lightbox.min.css' }}"
今のタグではありえないコードが紛れている。
フレームワーク関係ないなら、ブラウザに出力されたHTMLを提示してください。
コードが点過ぎてコピペで再現できないのです。
こちらで補完する場所が多いと問題再現できないのでアドバイスに繋がりません。
「jQuery本体は、<head>で読み込んでます。 」「は、プラグイン側のコードです 」という説明では真意がわかりません。
本当に正しいものかわからないし、「js/lightbox.js 」の読み込み記述もないし。
文章説明より、コードを。
あとフレームワーク使ってるようですが
> {{ path '/css/lightbox.min.css' }}
現在つけられたタグだけだと再現出る環境作れる人いません。
関係ないならブラウザに表示されたHTMLを提示してください。
質問の仕方が良くなかったですね。もしかして、jquery.slim を読み込んでませんか？
度々すみません。有難う御座います。
jquery.slimだったのでslimじゃない方に指定してみましたが、同じエラーでした。
>フレームワーク関係ないなら、ブラウザに出力されたHTMLを提示してください。
はい、いったん修正します。
失礼しました。
全ソースを掲載し直しました。
コードとエラーが合わないですね。
js/lightbox.js とご自身は書いてますが、
リンクさせているのは
/js/lightbox.min.js だけ。
でもエラーはjs/lightbox.js
あと、slimじゃないほうに替えられたのならエラーも差し替えるか
slimのほうとそうじゃないほうで提示しなおしてください。
整合性がとれてないと、そこから突っ込まなければなりません。
>コードとエラーが合わないですね。
min.jsだと改行なくて見辛いと思い、js/lightbox.js を記載しました。
それからslimじゃない方に変えてもエラーは同じだったと記載してます。
回答1件
0
自己解決
lightbox2以外のライトボックス系のプラグインを試しましたが、いずれも正常に動作しました。
※lightcase, fancybox
lightbox2でないといけない理由はありませんので他のものを利用致します。
お騒がせしました。
投稿2021/02/14 05:16
総合スコア591
あなたの回答
tips
プレビュー
