Lightboxが動かない場合はこれを試して
久々にLightboxを使おうとしたら、何故か動かなくてはまってしまったので、メモしておきます。
1）Lightbox本家サイトからスクリプトをダウンロードしてくる
http://lokeshdhakar.com/projects/lightbox2/
2）下記の3つのファイルをアップロードする
js/lightbox.min.js
css/lightbox.css
images/close.png
images/loading.png
images/next.png
images/prev.png
3）<head>内に以下を記述
<link rel=”stylesheet” href=”css/lightbox.css”>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js”></script>
4）</body>の直前に以下を入れる
<script src=”js/lightbox.min.js”></script>
何故か動かなくて、検索したら、2015年6月以前に書かれたものである場合には、説明通りに記述してもうまく動かないそうで、上記が違っていました。今は<head>内に入れないようです。
aタグにrel=”lightbox”と入れるという方法が紹介されていましたが、こちらは古いみたいです。
5）ソースサンプル
- 前の記事
- （WEB制作入門6）ショッピングカートのいろいろ
- 次の記事
- 千畳敷カールで2612体験してきました
関連記事
-
-
阿智村商工会主催 ホームページ勉強会と相談会
＜小さなネットショップでも大きく成功できる通販サイト＞ セミナー開催のお知らせです。講師はwebの森… ≫続きを読む
-
-
Labカラーモードと調整レイヤーの使い方
Adobe Stockのチュートリアルに載っていたので、Photoshopでやってみたらほぼ同じだっ… ≫続きを読む
-
-
件名：Document2 というメールは開かないで削除 メールの受信がストップする場合もあるようです
「件名：Document2」というメールが送られてきた場合、メールを開かずに削除してください。このメ… ≫続きを読む
-
-
ヤマト宅急便「配達時間帯」の指定枠変更のマーク
【重要なお知らせ】宅急便「配達時間帯」の指定枠変更についてというメールが、ヤマトさんを利用しているネ… ≫続きを読む
-
-
【保存版】AIって何？まずはここから！ChatGPT / Midjourneyを初心者向けに徹底解説
最近AIの話題ばかり…敬遠していた分野だけど、ちょっとどんなものか知っておいたほうがいい… ≫続きを読む
-
-
Facebookで、自分の過去の投稿を探したい場合
え～、、っと、あの記事はたしかFacebookで投稿したはず。 あの時の写真を使いたい、あの時にリン… ≫続きを読む
-
-
無料ツールや素材をダウンロードするときに気をつけよう
無料ソフトの紹介とか、無料素材配布などのサイトで、便利なものをお持ち帰りさせてもらおうとすると、知ら… ≫続きを読む
-
-
WordPressをハッキングされるとどうなりますか？
弊社の関係者さんからの情報で、（一昨日のことです）致命的なハッキングにあってしまったWordPres… ≫続きを読む
-
-
WordPressのページ更新をするときに便利なツールあれこれ
まず、GoogleChromeはPCに入れておいてください HTMLを編集するのにとて… ≫続きを読む
-
-
【Q】最近はdivというのを使ってホームページを作ると聞きました。何故以前のようなテーブルデザインではいけないんですか？
web標準でつくるホームページ テーブルデザインではなく、スタイルシートを使って制作する方法は、時に… ≫続きを読む