Lightbox設置してみた！

boota WordPress・Linux

サーバマシンの変更に伴って休止していたホームページ（WEBページ）をぼちぼち再開しようと思っています。で、そのついでと言ってはなんですが、かつて公開していた記事も加筆・修正して上げ直そうと考えていたりしてます。
でもせっかくなら何がしかのブラッシュアップを図りたい。そこで、このBLOGでも使っている、あの「写真がホワッと浮き上がってくる仕組み」をホームページでも使ってみようと思い立ちました。

というわけで、何はともあれその機能がちゃんと提供できるのかどうか、WEBページ再開に先駆けて動作テストしてみることに。
動作させるにはいくつか気をつけなければいけないこともありましたので、ちょっと備忘録的に書き留めておくことにしました。

まず、ホームページ上で「写真がホワッと浮き上がってくる仕組み」を提供してくれるスクリプトですが、最もメジャーなのはLightboxというスクリプトのようです。
このスクリプトはその作動にjQueryという別のスクリプトを利用するので、Lightboxと合わせてjQueryもダウンロードします。
なお、この投稿時点でそれぞれダウンロードできる最新版は、

Lightbox2(2.8.2)とjQuery 2.2.3

です（いずれもダウンロードサイトへのリンクになっています）。
こちらにはLightboxのスクリプトの中に（古いかもしれない）jQueryが入っている、とありましたが、僕がダウンロードしたバージョンのLightboxにはjQueryは同梱されていませんでしたので、別途ダウンロードして所定の位置に配置しました。

ダウンロードが完了したらLightbox2を解凍します（5k iMacではzipをダウンロードすると同時に解凍されていたけど、そういうものなのかしら？）。
解凍すると、次のように展開されます（[ ]はフォルダ）。

[lightbox-2-master]
         bower.json
         CONTRIBUTING.md
        [dist]
               [css]
                    lightbox.css
                    lightbox.min.css
               [images]
                    close.png
                    loading.gif
                    next.png
                    Prev.png
               [js]
                    lightbox-plus-jquery.js
                    lightbox-plus-jquery.min.js
                    lightbox-plus-jquery.min.map
                    lightbox.js
                    lightbox.min.js
                    lightbox,min.map
        [examples]
                    index.html
        Gruntfime.js
        LICENSE
        package.json
        README.md
        [src]
               [css]
                    lightbox.css
               [images]
                    close.png
                    loading.gif
                    next.png
                    Prev.png
               [js]
                    lightbox.js

この中で、必要になるのは[css][images][js]の三つ。同じバージョンで解説しているであろうサイトを見つけることができなかったのですが、[dist]以下のそれを利用する、と説明しているサイトがありました。
こちらでの説明によると、「jQyery を設置できない場合は、上記の「lightbox.js」の代わりに、jQuery が不要な「lightbox-plus-jquery.min.js」（lightbox2-master/dist/js/　内に有り）を使用する」んだそうで、さらに「head 内に jQuery を読み込まない場合は、上記の「lightbox.js」の代わりに、jQuery が不要な「lightbox-plus-jquery.min.js」を設置する」など、いろいろなバリエーションがあるようです。

僕は自前サーバなのでjQueryを別途用意し配置するので、余計なものが入っていない、[src]以下の[css][images][js]を利用しました。いろいろなものが入っていると、何が原因で上手くいかないのか、切り分けが大変になっちゃいますもんね。

次に、使用するフォルダにjQueryを配置します。先ほどのダウンロード先をクリックすると、jQueryのjsファイルが直接ダウンロードできるので（jquery-2.2.3.min.js）、これをlightboxで使用する[js]フォルダにコピーします。
配置はこれで完了。
これら一連のフォルダを、原則は「lightboxを利用したいサイトのトップ」に放り込みます（それ以外の場所に放り込む場合は、必要に応じてパスを書き換えなければなりません）。

そうしたら後はHTMLファイルに必要な記述を行うだけです。

<html><head>

<link rel=”stylesheet” type=”text/css” href=”./css/lightbox.css” /><script type=”text/javascript” src=”https:./js/jquery-2.2.3.min.js”></script>  

  <title>test</title>

</head><body>

<a href=”images/a.jpg” data-lightbox=“test”>>画像1</a>
<a href=”images/b.png” data-lightbox=“test”>>画像2</a>
<br>

<script type=”text/javascript” src=”./js/lightbox.js”></script>

</body></html>

こんな感じでHTMLを記述します。
赤の強調にしたところがlightboxに関係する記述です。
まず<head> </head>の中にlightbox.cssスタイルシートの読み込みとjquery-2.2.3.min.jsスクリプトの読み込みを宣言します。

この時、同じスクリプトの読み込み宣言でもlightbox.jsの読み込みをここで宣言してはいけません。ここでlightbox.jsを読み込ませてしまうと、lightboxmが機能しないのです。
その理由はわかりませんが、これらのリンク先（人柱？）の情報によれば、lightbox.jsの読み込みは、必ず</body>の直前に行わなければいけないようです。
実際試してみたところ、本当にその通りでした（笑）

後は普通に<a>タグで画像を指定するのですが、その際にdata-lightbox=” “という属性を付けてあげることで、そのリンク先の画像を「ホワッと浮き出る」ように表示することができるようになります。
なお、この時につける属性名を同じにするとグループ化することができ、グループ化すると「ホワッと浮き出た」写真画面で、次の写真を表示させたり前の写真に戻ったりすることができるようになります。

いつまで置いておくかわかりませんが、僕のサイトのサンプルです（上記HTMLが記述されたもの）。

これでBLOGだけでなく、WEBページも見栄え良く表示することができるようになりました。
こちらの方も、少しずつコンテンツを整理してアップしていくことにしましょう！

boota

いろんなモノに、いろんな意味で、ヲタ。なのかも？

「Lightbox設置してみた！」への2件のフィードバック

    1. narugaro　様
      わざわざご連絡をいただき、大変恐縮です。

      おかげさまをもちまして、（まだコンテンツをアップロードできていませんが）写真がホワッと浮き出る仕組みをWEBページで利用することができるようになりました。

      リンク先URLですが、先ほどお教えいただきましたドメインに変更しておきましたので、どうぞご安心くださいませ(^ ^)

      ありがとうございました。

      返信

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。（スパム対策）