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】携帯サイトを初めて作ることになりました。まず何からやれば?どこで勉強したらいいですか?

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

【飯田開催】水上浩一ネットショップ売上げアップセミナー 令和元年11月18日

水上先生のセミナーを企画しましたので、ご案内します。 売上ゼロ円からのネットショップ、売れない原因と ≫続きを読む

【Q】キーワードの選び方を教えてください。

キーワードについて理解することで、SEO対策の効果がぐんとあがります。遠回りに見えるかもしれないけど ≫続きを読む

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

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

Facebookで、自分の過去の投稿を探したい場合

え~、、っと、あの記事はたしかFacebookで投稿したはず。 あの時の写真を使いたい、あの時にリン ≫続きを読む

no image
[リクルートID]定期ニュースの停止

[リクルートID]定期ニュースの停止ができずイライラマックス!   ポンパレで一度買い物しただけなの ≫続きを読む

グーグルマイビジネスのオーナー申請のやり方

私の友人で、とあるお店を経営しているのですが、 グーグルマイビジネスを取引先である大手ポータルサイト ≫続きを読む

no image
TinyMCEにスタイルを追加する

自分への備忘録なので丁寧な記事ではなくてすみません。 function.phpに下記を追加 /**  ≫続きを読む

根羽村取材記 長野県の最南端、愛知県から信州への入り口です。

長野県根羽村をご存知でしょうか。長野県の南の町、飯田市の方に根羽村知ってる?ってきくと、知らないとい ≫続きを読む

▲ページ先頭へ