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| 

  関連記事

【ホームページの作り方】建築・建設・施工・造園業等のホームページ作成

個人的な印象ですが、建築、建設会社さんで、ホームページを上手に活用しているところは、他の分野に比べて ≫続きを読む

【Q】ブログとfacebookページ、両方更新するのがしんどいです。どちらに力を入れたら良いですか?

先日友人から「うちのホームページ、全然人が見に来ないみたいで問い合わせもないしどうすれば?」と相談を ≫続きを読む

(WEB制作入門6)ショッピングカートのいろいろ

ショッピングカート・・・いろいろあって迷いますよね?どれが良いのでしょうか。ここでは、ASPサービス ≫続きを読む

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

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

【Q】ウィルスに感染したために、サイトが改ざんされたというニュースを読んで不安です

「××社のホームページが改ざんされ訪れた人にウィルス感染の危険」こんな言葉でニュースになっているので ≫続きを読む

窓が見つからない (Windowsのプログラムがどこかに行ってしまった時)

ソフトを立ち上げて、タスクバーにはたしかにそのソフトがあるのに、デスクトップ上のどこにもない!ない! ≫続きを読む

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

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

【Q】最近はdivというのを使ってホームページを作ると聞きました。何故以前のようなテーブルデザインではいけないんですか?

web標準でつくるホームページ テーブルデザインではなく、スタイルシートを使って制作する方法は、時に ≫続きを読む

【Q】リニューアルしてページ名がindex.htmlからindex.phpに変わります。名前が変わると、過去にいろんな別サイトやブログからリンクしているので、リンク切れが起きてしまうんですが、どうすれば!?

リニューアルでindex.htmlをindex.phpに変更することって結構ありますね。静的HTML ≫続きを読む

【Q】携帯サイトを初めて作ることになりました。まず何からやれば?どこで勉強したらいいですか?

携帯(ガラケー)サイトの作り方なんてもう不要な技術なのかもしれませんが、自分でも、この記事の中身をも ≫続きを読む

▲ページ先頭へ