Lightboxが動かない場合はこれを試して

   web入門, 初心者のためのHTMLとcss| 

久々にLightboxを使おうとしたら、何故か動かなくてはまってしまったので、メモしておきます。

1)Lightbox本家サイトからスクリプトをダウンロードしてくる

http://lokeshdhakar.com/projects/lightbox2/

2016-09-20_005739

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)ソースサンプル

<a href=“画像のURL” data-lightbox=“任意の名前” data-title=“ここに説明文を入れる”><img src=“画像のURL” /></a>
 
グループにする場合
<a href=“画像のURL” data-lightbox=“グループ名”><img src=“画像のURLその1”></a>
<a href=“画像のURL” data-lightbox=“グループ名”><img src=“画像のURLその2”></a>
<a href=“画像のURL” data-lightbox=“グループ名”><img src=“画像のURLその3”></a>
 

   web入門, 初心者のためのHTMLとcss| 

  関連記事

件名:Document2 というメールは開かないで削除 メールの受信がストップする場合もあるようです

「件名:Document2」というメールが送られてきた場合、メールを開かずに削除してください。このメ ≫続きを読む

【Q】ネットショップには「ランディングページが大事」と聞きました。ランディングページって何ですか?

まずはランディングページ、見てみてください。こんなページのことです。ランディングページのリンク集 テ ≫続きを読む

Photoshopの色相・彩度のチュートリアル

(1)色相・彩度を選 (2)左下の手のひらマークをクリックし、スポイトで変更したい色を選択する (3 ≫続きを読む

長野県中小企業振興センター主催、ネットショップ経営者のための売上向上セミナー

8月5日(金)13:30~ ホテルメトロポリタン長野で、このようなセミナーがあります。主催は(公財) ≫続きを読む

飯田でのセミナーご参加ありがとうございました

飯田のセミナー、大好評のうちに終了しました。アンケート結果、皆さんとても勉強になった、また参加したい ≫続きを読む

no image
手取りが10万円になるように、源泉徴収税(復興税をプラス)を加算して見積もりする方法

(手取額が897,900円以下の場合に限ります。) 1 税率が10.21%の場合 手取額÷0.897 ≫続きを読む

【Q】ブログを使ったSEO対策があると聞きました。具体的にどうすればいいですか?

ブログを使ったSEO対策  以前は、被リンクを貰う方法と言えば、「相互リンク集」の作成が主流でした。 ≫続きを読む

【Q】ドメインの引っ越しについて何からしたら良いかわかりません。具体的には今別会社で管理しているのを私が管理したいのですが・・・

ドメインの移管は何度やってもけっこう大変というか、失敗しないように出来るかちょっと緊張します。 とい ≫続きを読む

【Q】ホームページのバックアップってどうすればいいですか?

バックアップについてお話する前に、ホームページには2種類あることを復習しますね。 1つは静的に作られ ≫続きを読む

(WEB制作入門1)静的サイトと動的サイトの違い

静的サイトの作り方 2000年くらいのこと。わたしがWEB制作をお仕事としてやり始めたころのことです ≫続きを読む

▲ページ先頭へ