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| 

  関連記事

エックスサーバーでWEBフォントの提供開始

私が愛用しているエックスサーバー http://www.xserver.ne.jp/ で、ウェブフォ ≫続きを読む

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

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

スマホでfacebookしてるときにいきなり音がならないように

スマホでFBをチェックしてると、動画が表示されたとたんに音が鳴りはじめて焦ったことありませんか? 音 ≫続きを読む

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

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

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

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

ブログを作る場合はサブドメインより、独自ドメインの下にが◎

わたしは信州EC実践会というネットマーケティングの勉強会の事務局をしていますが、 ネットショップ運営 ≫続きを読む

調整レイヤーの使い方

フォトレタッチの極意1:紅葉の色彩をアップする | Adobe Creative Station 部 ≫続きを読む

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

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

フォトショップでバウンディングボックスを自動表示

これ・・・意外と便利なのに、初期設定ではそうなってないので知らずに使っている人が多いかもしれません。 ≫続きを読む

初めてのWordPressにおすすめ twentytwelve

かわいいネイルサロンのホームページを作成させていただきましたので紹介します。 長野県駒ヶ根市のネイル ≫続きを読む

▲ページ先頭へ