CQ DE JF3PLF

Activities of JF3PLF / K7IL

VK9 Webに画像を追加  - Lightbox 覚え書き -

VK9 DX-vacationのWeb Siteに画像をアップロードしてみることにします。以前のV6 DX-peditionのページの時は、ただポップアップで大きな画像が開くだけでしたが、今回はちょっとお洒落にしてみたい。最近どこのサイトでも見るデザインです。Lightboxというツールを使うと実現できそうです。

Lite1

1. Lightbox Plusのダウンロードサイトから、ファイルをダウンロードしてきます。

2. 不要なファイルは削除。resourceフォルダの中に入っているファイルのうち、反転させた3つのファイルは必要ありません。

Lite2

3. 「lightbox_plus.js」ファイル内部の記述を、少し修正します。デフォルトのままでは、相対パスで書かれているので、サイト内どこからでもLightboxを使うことができないらしいので、絶対パスに書き換えます。

4. FFFTPで、必要なファイルをFTPサーバにアップロードします。

ココまで来たら、あとは必要なHTML(画像のサムネイル表示を配置したような)内の記述をいじるだけでOKでしょう。

5. HTTPのheadに、lightbox.css及びLightbox本体のJAVAスクリプトを読み込ませるための記述を追加します。

6. 画像へのリンクにrel="lightbox"という記述を追加します。同じグループの画像を連続して拡大表示するオプションを使いたければ、"lightbox[photo]のように、[ ]でくくられた任意の文字列を入れておきます。

おしまい。やったぁ~。変更を加えたファイルをWebサーバーにアップロードしてできあがり。うまく表示されました。 http://vk9.nobody.jp/photos.htm

Lite3