新方式の画像ポップアップ

新方式の画像ポップアップ方法をようやく取り入れる準備ができた。これまでのポップアップ画像はサムネイル画像をクリックすると新しいウインドウ若しくはタブが立ち上がる形式でした。だが、今度の方法は新しいウインドウが立ち上がる事なく画像がポップアップする。しかもポップアップした画像をドラッグする事により、8方向にグリグリ移動させる事ができる。画像をクリックする事でポップアップした画像を閉じる事ができる。

ただそれだけではない。ポップアップする時と閉じる時は、画像がアニメーションするかの様な動きをするのである。それでいながら何とCSSと外部JavaScriptで構成できる。そのため、ウェブコーディングにおいても問題ない。それも今回採用に踏み切った大きな理由でもある。

ブログでないホームページはもちろんの事、MT(Movable Type)においてもコンテンツ(記事)テンプレートで専用CSSを指定し、専用CSSとJavaScriptファイルをアップロードすれば個別ページで呼び出すだけである。JavaScriptが使えてサーバーに必要なファイルをアップロードできれば実装できる。ただ、無料ブログサービスですと使えない所が多いでしょう。

更にポップアップした画像の下に見出しを付ける事ができるため、従来登山サイトでは「アルバム」という別ページで説明していたのをポップアップ画像で説明する事ができる。そのため、別にアルバムページを作成する事なく本文ページにアルバム機能を実装できる。。従って別ページのアルバムを廃止していく方向である。

近々登山サイトに土曜日に登った山(八剣山)の記録をアップする事になるが、そこで新方式の画像ポップアップが初披露である。従来ポップアップする写真は360×240pxだったが、サーバー容量の拡大により720×480pxに拡大していく。既にアップしている山行・縦走記録にも順次適応していく。更には登山サイトのみならず、「ポトリス博物館」など他の運営サイトにも適応していく。

尚、今回の画像ポップアップシステムは以下のサイトで登録し、ダウンロード・インストールを行った。個人的な利用なら無料だが、商用ですと有料となるので注意したい。

「Highslide JS(英語)」