Q&A
ver.は最新のものをダウンロードしました！
urlありがとうございます、勉強してみます！
こんにちは。
phpでHPを作成中です。（中身はhtmlと大差ないですが。
jqueryで画像ギャラリーのポップアップ表現（画像をクリックすると、画面上に広がって画像が表示されるもの）をしようと思い、検索してLightbox（２？）なるものを知り、導入を試みました。
ですが、head内に
<link href="css/lightbox.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="js/lightbox.min.js"></script>を書き込み、表示したい画像群を
<ul class="gallery_List"> <li><a href="img/img01.JPG" data-lightbox="group"><img src="img/img01.JPG" width="220" height="124" border="0"></a></li> <li><a href="img/img02.JPG" data-lightbox="group"><img src="img/img02.JPG" width="220" height="124" border="0"></a></li> <li><a href="img/img03.JPG" data-lightbox="group"><img src="img/img03.JPG" width="220" height="124" border="0"></a></li> <li><a href="img/img04.JPG" data-lightbox="group"><img src="img/img04.JPG" width="220" height="124" border="0"></a></li> <br /> <li><a href="img/img05.JPG" data-lightbox="group"><img src="img/img05.JPG" width="220" height="124" border="0"></a></li> <li><a href="img/img06.png" data-lightbox="group"><img src="img/img06.png" width="220" height="124" border="0"></a></li> <li><a href="img/img10.JPG" data-lightbox="group"><img src="img/img10.JPG" width="220" height="124" border="0"></a></li> <li><a href="img/img08.png" data-lightbox="group"><img src="img/img08.png" width="220" height="124" border="0"></a></li> <br /> <li><a href="img/img09.png" data-lightbox="group"><img src="img/img09.png" width="220" height="124" border="0"></a></li> <li><a href="img/img07.png" data-lightbox="group"><img src="img/img07.png" width="220" height="124" border="0"></a></li> <li><a href="img/img11.png" data-lightbox="group"><img src="img/img11.png" width="220" height="124" border="0"></a></li> <li><a href="img/img08.JPG" data-lightbox="group"><img src="img/img12.JPG" width="220" height="124" border="0"></a></li></ul>としましたが、画像が新規タブで開かれるのみでjqueryのjの字も動作しません。
lightboxの説明記事は複数ありますが、自分には何が悪いのか不明です。
ご教授お願い致します。
回答2件
0
ベストアンサー
bodyの閉じタグの直前にJavaScriptの読み込みを置くようにと書いてありますね。
3.Ready to set Lightbox up on your page? Start by including the Lightbox CSS and Javascript. You can grab both these files from the /dist folder.
<link href="path/to/lightbox.css" rel="stylesheet"> ◦Include the Javascript at the bottom of your page before the closing </body> tag: <script src="path/to/lightbox.js"></script>
◦Include the CSS at the top of your page in your <head> tag:
投稿2015/07/30 13:48
総合スコア178
0
最新版のlightboxであれば、下記サイトが参考になりそうです。
http://ideahacker.net/2015/02/07/9680/
lightboxのバージョンはいくつになっておりますでしょうか。
投稿2015/07/30 12:38
総合スコア634
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/07/30 15:56