2017-12-31 261 views
2

このリンクからSimpleLightBoxを実行することができません(空白のページに通常の画像として開く画像をクリックした後)http://dbrekalo.github.io/simpleLightbox/。しかし、私は問題があります。私はJSとCSSファイル(正しく私はソースコードで開くことができます)を追加しました。次に、コードでHTMLとJSを追加しました。SimpleLightBoxは実行されません

<div class="imageGallery1"> 
    <a href="images/5x5.jpg" title="Caption for gallery item 1" ><img style="width: 300px; height: 300px" src="images/5x5.jpg" alt="Gallery image 1"/></a> 
    <a href="images/BG-BR5.jpg" title="Caption for gallery item 2"><img style="width: 300px; height: 300px" src="images/BG-BR5.jpg" alt="Gallery image 2" /></a> 
    <a href="images/BG-BR6.jpg" title="Caption for gallery item 3"><img style="width: 300px; height: 300px"src="images/BG-BR6.jpg" alt="Gallery image 3" /></a>  
</div> 
<script>$('.imageGallery1 a').simpleLightbox();</script> 

画像が正しく挿入されていると私はここブートストラップ4を使用して、私はhttps://vitas.sk/1/に取り組んでいますテンプレート(スクロールダウン)とリンクされていますので、私はあまりにもjqueryの持っています。 jQueryライブラリがで呼ばれながら

+0

jqueryとブートストラップスクリプトの後ろにlighboxスクリプトを配置してください –

答えて

2

私はあなたのテンプレートページをチェックすると、私はコンソールに

"ReferenceError: jQuery is not defined".

を誤りに気づいたがそれから私は、あなたのコードを調査し、あなたが<head>でSimpleLightBoxプラグインを呼び出していることに気づきましたページの末尾(</body>タグの直前)。

jQueryライブラリが初期化される前に、SimpleLightBoxプラグインが実行されています。

1)これは、jQueryのロードされた後、ライブラリが初期化されている修正されます:

はこの問題を解決するには、次の行います。 </body>タグの前に次の行を挿入します。

<script src="js/simpleLightbox.js" ></script> 

2)これにより、simpleLightBoxプラグインの読み込み後に実行されるメソッドが修正されます。私は、ページ全体とそのスクリプトをロードして行われたとき、コードが実行されますことを確認するために、コードの周りに$(document).ready();を追加した

$(document).ready(function() { 
    $('.imageGallery1 a').simpleLightbox(); 
}); 

:上記の行の後に(とレディ機能を追加します)、次のコードを移動し 。

+0

jqueryをドキュメントの頭に追加していますが(頭では)、両方のスクリプトを最後に持っていたいと思います。 (あなたの解決策は機能していません) –

+0

はい、bodyタグの最後の前にsimplelightboxスクリプトを追加するだけで、最初はうまくいきません。理由はわかりません。私はあなたが言っていることは、ウェブサイトhttps://vitas.sk/1/を見ていましたが、うまくいきませんでした。 –

+0

現在起こっていること:$( '。imageGallery1 a')。simpleLightbox();プラグインがロードされる前にexecturedを取得しています...私は答えによって更新されます: –

関連する問題