馬耳湯風(ばじとうふう)

アクセスカウンタ

zoom RSS Webryblog(ウェブリブログ)に「Lightbox Plus」をインストール

<<   作成日時 : 2009/05/11 11:30   >>

トラックバック 0 / コメント 0

このBIGLOBEのウェブリブログに画像を貼り付けると写真や画像が
別ウィンドウで表示されます。

この別ウィンドウの写真をいちいち×で閉じていくのが面倒ではと
思うようになりました。

そこでLightbox Plusをこのブログにインストールすることに・・・

1.Lightbox Plus ダウンロードサイト
http://serennz.sakura.ne.jp/toybox/lightbox/?ja

lightbox_sample.zipをダウンロード

2.Lightbox Plusの導入と解説記事

別窓を開かずにその場で拡大画像を表示!(AllAbout)
http://allabout.co.jp/internet/hpcreate/closeup/CU20081002A/index2.htm

上記サイトにダウンロードした「lightbox_sample.zip」を改編してアップロード
する方法が書いてあるので参照。
ブログでのポイントは「lightbox_plus.js」に「http://」からのURLを記述する
絶対パスを記述するということ。(外部サイトにファイルを保存したため)

3.Lightbox Plusをブログに導入した際の参考記事

Lightbox実装実験ページ
http://ujiki.at.webry.info/200701/article_1.html

Lightbox Plus で画像を同一画面にオーバーレイして表示
http://www.drk7.jp/MT/archives/001029.html

次は上記「Lightbox Plus で・・・」に書いてあるアンカータグの変更。

画像(jpegやpng)がアンカータグ(a href=)で記述の場合LightboxPlus
が自動的に機能するように変更。

(変更前)
if (!anchor.getAttribute("href") || !rel.match('lightbox')) continue;

(変更後)
if (!anchor.getAttribute("href")) continue;
if (!anchor.getAttribute("href").match(/.+(jpg|gif|png)$/i)) continue;


変更した「lightbox_plus.js」をresourceフォルダごと他のファイルと一緒に
外部サイトのhttp://www.○○○にアップロード。
※使わないファイルもありますがまとめてアップロード。

3.実際にこのブログにインストールした方法

(1)表示項目設定→フリースペース[編修する]に下記の記述を追加して[設定]

<link rel="stylesheet" type="text/css" href="http://www.○○○/resource/lightbox.css" media="screen,tv">
<script type="text/javascript" src="http://www.○○○/resource/spica.js"><script>
<script type="text/javascript" src="http://www.○○○/resource/lightbox_plus.js"></script>



(2)オプション→CSS編集[設定画面へ]に下記の記述を追加して[設定]

#lightbox {
background-color: #eee;
padding: 10px;
border-bottom: 1px solid #666;
border-right: 1px solid #666;
}
#overlay {
background-image: url(http://www.○○○/resource/overlay.png);
}
#lightboxCaption {
color: #333;
background-color: #eee;
font-size: 90%;
text-align: center;
border-bottom: 1px solid #666;
border-right: 1px solid #666;
}
#lightboxIndicator {
border: 1px solid #fff;
}
#lightboxOverallView {
background-image: url(http://www.○○○/resource/overlay.png);
}
* html #lightboxOverallView,
* html #overlay {
background-color: #000;
background-image: url(http://www.○○○/resource/blank.gif);
filter: Alpha(opacity=50);



たいした記事や写真ではないのでブログに掲載するからには少しでも
体裁を整えてカッコ良く(笑)、そして閲覧しやすくという点を考えるとこの
「Lightbox Plus」は適しているかも知れません。

ブログ記事内に写真をたくさん貼り付ける場合なども元画像を小さくして
並べてクリックしてもページはそのままですから利用価値は高いですね。

また、ご参考になればと思いウェブリブログにインストールするまでの
参考にしたサイトと私の実例を掲載しました。

メモ帳でソースを手直しする手間とサイトにアップロードするという手間
を惜しまない方は簡単にできると思います。

ただ、それ以前にデジカメ画像をそのままブログに貼り付けてサイズが
3MBぐらいになっているブログは勘弁してほしいですね。
せめて画像サイズぐらいは表示していただければクリックしないのに(笑)

外部サイトのURLを公開してフリースペースとCSSの編集に組み込むと
ウェブリブログユーザーならできてしまうのかなあ・・・(笑)
それとBIGLOBEのサーバーにアップロードするともう少し動作が軽くなる
かも知れないとか・・・いろいろ試行錯誤中です。

尚、ブログの編修・改編は自己責任でお願いします。

普通にこのブログに画像貼り付けてもクリックするとページ内に拡大画像
が表示されます。↓(右上×印をクリックかもう一度クリックで閉じます)
画像





テーマ

関連テーマ 一覧


月別リンク

トラックバック(0件)

タイトル (本文) ブログ名/日時

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(0件)

内 容 ニックネーム/日時

コメントする help

ニックネーム
URL(任意)
本 文
Webryblog(ウェブリブログ)に「Lightbox Plus」をインストール 馬耳湯風(ばじとうふう)/BIGLOBEウェブリブログ
文字サイズ:       閉じる