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| 

  関連記事

色域指定で、調整したい部分を選択する

(1)「選択範囲」→「色域指定」 「色域指定ウインドウ」が現れるので、「選択」のプルダウンから「指定 ≫続きを読む

(WEB制作入門2)HTMLの目的

HTMLは、世界共通のコンピューター言語で、タグというコードでできています。タグは、「こんな意味で使 ≫続きを読む

【ホームページの作り方】病院・歯科医院のホームページ作成

歯科医院のホームページは、院長・スタッフ紹介、治療内容、医院の紹介と受付時間・交通アクセスなど、だい ≫続きを読む

【Q】SEO対策しませんか?という電話がありました。どこで調べたのか私の個人情報も結構知っていて不安です。

●●グループから電話がかかってきましたか? しつこい営業でけっこう悪名高いところなので無視していただ ≫続きを読む

無料ツールや素材をダウンロードするときに気をつけよう

無料ソフトの紹介とか、無料素材配布などのサイトで、便利なものをお持ち帰りさせてもらおうとすると、知ら ≫続きを読む

Q:ハッシュタグとカテゴリーの違いとは?

ハッシュタグ #SEO対策 とか #SNS入門 とか #サポート備忘録 とか。 ハッシュタグ流行って ≫続きを読む

【ホームページの作り方】地域密着型のお店のホームページ作成

どの町にもある小さなお店、地域のお店…ふとん屋さん、本屋さん、ケーキ屋さん、中古車販売店。 ネットで ≫続きを読む

facebookページの更新だけではもったいない

HTMLやcssの講習をした生徒さんが、ネットショップのオープンに向けてがんばってます。 こだわりの ≫続きを読む

パラコードアクセサリー製作入門! in 駒ヶ根高原・ヴァンドール

突然ですが、パラコードって知ってますか。 パラシュートを結ぶ紐なんですが、弾力があって柔らかいのに、 ≫続きを読む

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

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

▲ページ先頭へ