ライトボックス（Lightbox）のJavaScript読み込みはヘッダー<head>じゃなくてボディー<body>【Webデザイン】
1年以上前の記事です。内容が古い可能性があります。
最近、LP（ランディングページ）を作ることが多くなりました。
先日、とあるLPを作っていた際に、写真の見せ方にライトボックス（Lightbox）を使用することになりました。
ライトボックスってのは写真をクリックすると大きく表示されるというやつですね。
かつてはprototype.jsをライブラリとして使っていましたが今はjQuery版が普及しているようです。
で、自分がよく使っているのもそのJQuery版。
当然、何度も設置した経験あるのですが、最近ではWordPressのプラグインを使っちゃったりしちゃっていたので、直接ソースをHTMLに埋め込んだりということをやってないんですよね。
で、久しぶりにHTML直書きでライトボックスを設置したのですがこれがなかなか動いてくれない。
ううむ。
ちなみに、以下のサイトを参考にライトボックス導入を進めていました。
□ Lightbox最新版（2.7.1）の設置方法と使い方 – アイデアハッカー
なお、現在の最新版は2.8.2ですので、この辺りで仕様変更が行われている可能性もあるわけです。
で、いろいろ調べた結果、原因が分かりました。
実は、2.7.1から2.8.2にバージョンがアップしていく間に、lightbox.js（またはlightbox.min.js）のJavaScriptプログラムを読み込ませるタグを書く場所が<head>内から<body>内に変更になっていたようなんです。
そりゃ動かんわ。
具体的には上記設置ブログから引用させていただくと、
STEP3：設置方法
先ほど配置したファイルを読み込みます。
これでLightboxを使う準備が整いました。
の6行目、
<script src=“js/lightbox.min.js”></script>
は<head>内ではなく、<body>内に書くということになります。
もちろん、バージョンが2.7.1であれば上記のとおりでいいのでしょうけれど。。
いやしかし、なんでこんな仕様変更が行われたんでしょうね。
そういえば、Googleタグマネージャーのソースの記述場所ですが、<head>内ではなく<body>タグの直下とされていますが、<head>内じゃ動かないこういったプログラム結構多いのかもしれません。
ということで、意外とこのことを書いているブログが少なかったので記事にしました。
いずれ、ライトボックス最新版2.8.2の設置方法としてしっかりまとめておこうと思います。
アドセンス広告メイン
関連記事
-
-
Google Maps API
1年以上前の記事です。内容が古い可能性があります。Google Maps API …
-
-
ブログの角丸部分をCSS3の「border-radius」プロパティに変えてみた【Webデザイン】
1年以上前の記事です。内容が古い可能性があります。今年、HTML5及びCSS3が …
-
-
紙サイズ一覧Web対応版
1年以上前の記事です。内容が古い可能性があります。実は僕、印刷会社にいながらもち …
-
-
フォルダ名またはファイル名が一致しません
1年以上前の記事です。内容が古い可能性があります。またまたパソコン教室での話。思 …
-
-
実はユーザーはオープンよりもクローズドを求めている
1年以上前の記事です。内容が古い可能性があります。何かとオープン化オープン化とい …
-
-
定額見放題の映像オンデマンド配信サービス「Hulu（フールー）」。日テレ（日本テレビ）が買収
1年以上前の記事です。内容が古い可能性があります。みなさん、Hulu（フールー） …
-
-
営業手当てがほしいっす。
1年以上前の記事です。内容が古い可能性があります。最近、足で稼ぐ営業ではほとんど …
-
-
外注探し
1年以上前の記事です。内容が古い可能性があります。ここのところ立て続けに外注業者 …
-
-
投稿、固定ページ等、記事が複製できるプラグイン「Duplicate Post」【WordPress】
1年以上前の記事です。内容が古い可能性があります。概ね「livedoor Blo …
-
-
インターネットは強者のツール？ #3
1年以上前の記事です。内容が古い可能性があります。では、強者はどのようにインター …
