「ブログ画像のポップアップ表示」と聞けば、「ああ～あの JavaScript のやつね」と思い浮かべるのではないだろうか。
そうなんです、その JavaScript のやつなのです！。
ポップアップ表示の JavaScript ライブラリとしては、代表的なものに lightBox があります。そのほかにも数十ものライブラリーが公開されており、どれを使ってよいのかさえ、わからない状態です。そんな魑魅魍魎とした世界を探索し、最後には勝利を収めた勇者・・・失礼・・・「一般人」の記録が今回の記事です。
当ブログでの画像の取扱い方法について
画像の取扱いについての当ブログの環境を、記事をわかりやすくするため最初に説明する。
当ブログは、Google Blogger のサービスを利用している。画像に関しては、Google Picasaウェブアルバムにアップロードした画像の url を記事中に挿入して使用している。
| Picasaでのウェブアルバム同期 | Bloggerからのアップロード |
|
|
|
a タグ href のドメイン
picasaweb.google.com
img タグ src のドメイン
lh3.googleusercontent.com
|
a タグ href のドメイン
1.bp.blogspot.com
img タグ src のドメイン
1.bp.blogspot.com
|
|
|
Picasaウェブアルバムにアップロードするには、２種類の方法がある。
左フロー図では Picasaクライアントソフトを使用している。画像をフォルダに保存すると Picasa がファイル更新を自動検出し、Picasa アルバムを更新する。さらに、ウェブアルバムとも同期を取る。
記事で使用する画像リンクは、ウェブアルバムの画像横にあるリンクをコピーして記事に貼り付ける。
ウェブアルバムに画像を登録する方法はもう一つある。それが右フロー図だ。Bloggerの投稿画面の「画像を挿入」ボタンを使用する。
画像を選択してアップロードを完了すると、画像のリンクが投稿画面に貼り付けられる。
どちらの方法を使っても同じことができるのだが、動作が微妙に違うことがある。
それがアンカータグの href 属性と img タグの src 属性で使用される画像リンクのドメインである。このドメインはユーザ毎にも違うことがあるが、画像リンクの貼り付け方法でも違っている。
また拡大表示などのために、アンカーリンクをクリックして表示した遷移先の画面デザインも違っている。ウェブアルバムのリンクをコピーした方は、ウェブアルバムのデザインで表示される（左画面イメージ）。Blogger でアップロードした場合に貼り付けられるリンクの遷移先は背景が空白になっている（右画面イメージ）。
上記の説明と画像ポップアップ表示に、何の関係があるのかと不思議に思うかもしれない。ポップアップ用ライブラリの設定過程で、この関係性がわかってくる。
ちなみに私が利用しているのは、左側の Picasaクライアントソフトを利用する方法である。
画像のポップアップ・ライブラリに求める要件
さっそく、ポップアップ・ライブラリを導入しましょう・・・、というわけにはいかない。このライブラリの導入には躊躇した点があるので、それを挙げてみる。
- 導入に手間がかからないか？
- lightBox の場合、アンカータグ内に次の属性を追加する必要がある。
rel="lightbox"
過去記事の画像リンクを変更するのは面倒なので避けたい。だけど設定するなら過去記事にも反映させたい。
- JavaScript がコンフリクト（競合）しないか？
- ブログ上ではたくさんの JavaScript コードが動いている。このため、導入したらちゃんと動くのか？、他のライブラリに影響を及ぼさないか？、などを見極める必要がある。
- JQuery ベースのライブラリを導入したい
- これは大して意味はない。なるべく、自分の経験の範囲内で導入したいためだ。調べてみたところ、JQuery ベースについては多くのライブラリがあるようだ。
ポップアップ・ライブラリ導入のきっかけと導入
３年前の古い記事（参考： GIGAZINE - スムーズに画像を拡大するかなり導入が簡単なJavaScript「FancyZoom」） をたまたま目にしたことが、導入のきっかけになった。記事を読んで「えっ！、こんなに簡単に導入できるの？」と思ったのだ。しかし設定をしていくうちに、この世界は意外と奥深いことがわかってきた。
ああだこうだと設定を進めていくと、いつの間にか設定するライブラリも変わっていった（右図）。
同様のライブラリは数十も存在し、メジャーなライブラリでさえ全部試したわけではない。しかし最終的には、当初の目標を達成できた。
ちょっと中途半端ですが、次回に記事 が続きます。