新・元地方の中規模印刷会社で苦悩するWebデザイナー改めWebディレクターの日記

自由な20代、窮屈な30代を経て、遂に40代になっちまったWebディレクター&パソコン講師の覚書と思う言(こと)。略称【ちほちゅう】

*

ライトボックス(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の設置方法としてしっかりまとめておこうと思います。

 - Webデザイン , ,

アドセンス広告メイン

Message

メールアドレスが公開されることはありません。

  関連記事

mixiエコーが正式版「ボイス」となったので「Twitter2mixi」を導入してみた(9/28追記)

1年以上前の記事です。内容が古い可能性があります。「mixiエコー」が正式に「m …

no image
今年最後の土曜出勤

1年以上前の記事です。内容が古い可能性があります。会社的に今年最後の土曜出社日で …

no image
12時投稿で何か変わった?

1年以上前の記事です。内容が古い可能性があります。以前告知していた12時投稿を一 …

Google Chromeではパスワードを保存しちゃいけない(Google Chromeでパスワードを確認する方法)

1年以上前の記事です。内容が古い可能性があります。誰かにパソコンを貸すことがある …

ネットでもメディア操作は行われる?

1年以上前の記事です。内容が古い可能性があります。<痴漢行為>植草・元教授に懲役 …

「mixiボイス」と「twitter」は別物

1年以上前の記事です。内容が古い可能性があります。twitterのつぶやきをmi …

ライトボックス(LIGHTBOX)最新版(v2.8.2)の設置方法

1年以上前の記事です。内容が古い可能性があります。先日、ライトボックス(Ligh …

no image
Flashな日々

1年以上前の記事です。内容が古い可能性があります。今日はFlash漬けです。 ア …

no image
うちわ祭とインターネット

1年以上前の記事です。内容が古い可能性があります。その他の「うちわ祭」関連記事& …

no image
なんかもめてるらしい。。

1年以上前の記事です。内容が古い可能性があります。ホームページに関して上層部でも …