BloggerにLightbox風エフェクトを導入して幸せになる・徹底解説編

2011年06月24日金曜日 10:06

slimbox2 for Bloggerの解説

あなたのBloggerに、スクリプトを導入するだけで全ての記事の画像にポップアップ効果を導入してくれるslimbox2 for Blogger。

この記事ではどんなルールでポップアップ機能をhtml要素に追加しているのか？Blogger向けの設定部分を解説します。

併せて私が遭遇したBlogger（+picasa）固有の注意点も紹介します。

もし、簡単導入編で動作しなかった方は、ご自身のブログのテンプレートをこの記事を参考に確認してみてください。

また、他のLightBox系ライブラリを使う、という方にも有益な情報があると思います。

この記事は以下の記事の続きとなっています。

今回紹介した、Blogger用の設定部分について解説します。

ご覧の通りjQueryのセレクタを使って、ポップアップ機能を付与する要素をピックアップしています。

$("#Blog1 .post-body a[href*='.bp.blogspot.com/'] img:first-child[src]").parent().slimbox({}, (略～

Bloggerのhtml構造では、記事の写真のある要素は、#Blog1 .post-bodyの下になります。この内、#Blog1は記事を表示する記事ウィジェットのIDです。

続く.post-bodyの下に記事の本文は入ります。.post-bodyはページタイプによっては（indexやアーカイブページなど）複数存在します。

もしslinbox2 for bloggerが動かない場合、この部分の名前が違っているのかもしれません。ご利用のBloggerのテンプレートをご確認ください。

続いてimgタグを配下にもち、picasaへのリンクを持つ<a>タグ（ただしドメインはblogspotになっています）を見つけます。ご存知のように、Bloggerの投稿エディタから記事に埋めたpicasaの画像はこんなhtml構造になりますね。

ということで、Flickerなどの他の写真サービスを利用している場合は動作しません。この場合は適宜セレクタを書き換えてください (^-^;;

また#Blog1はなくても動作しますが、この指定を入れることで探索の対象を全html要素から#Blog1以下に限定しています。こうしてブラウザへの負荷を（若干）減らしています。

少し以前（一年程度昔？）に投稿した記事のpicasaの画像はslimbox2でうまく表示できませんでした。最近のものでは全く問題ありません。

該当の部分をよく見てみると、picasaのurlに入っていた-hが原因でした。ご紹介したコードでは対策してあって自動で-hを外すようになっています。


var REG_PICASA_FIX = /(\/s\d*)-h/
~~
el.href.replace( REG_PICASA_FIX, '$1')

例えば、この画像の場合です。大きな画像もそのまま表示してしまうのでかっこ悪くなるし、closeなどのナビゲーションも隠れてしまってよろしくありません。

（クリックして確認してみてください、cを押してポップアップを閉じます）

そもそも動的に書き出しているポップアップなレイヤーのhtmlを、拙作Pure CSS Popupのようにしておけば適宜にスクロールバーがでてきて対処できるんですけど。

また、巨大な画像ではなくても、PCやブラウザの画面サイズが小さいこともあるわけで、画面にあわせてフィット表示させる機能はマストな気がするのですが。。。

クロスドメインな画像のサイズは取れないとか、そんな制約でもあるのでしょうか？

2019年12月18日水曜日 11:51, 編集