Lightbox Plus を使ってみる

戻る	本ページの最終更新日時：	2007/04/02 07:50am JST
サムネイル画像の重要性と作成方法について
ちょっと試しに Lightbox を利用してみるか
Lightbox Plus を色々なFREEブログで使ってみる
Lightbox JS v2.0を使ってみる

　トップページで紹介中の有名FREEブログについて、全てのサムネイル画像をクリックした際に、Lightbox Plusを使ってみる。その調整方法を試行してみる。　 2007/02/16 実験的に作成した別Livedoor Wikiでは、１ファイルのJavaScriptファイルを読み込むだけで、Lightbox Plus の実装に成功しました。欄外の添付ファイルも Lightbox Plus で閲覧します。これなら自由にデザイン・テンプレートを変更できます。詳しくは、「ちょっと試しに Lightbox を利用してみるか」をご覧下さい。

※ 本ページは、Lightbox JS v2.0を実装しています。Lightbox Plusではありません。誤解がありませんようにお願い致します。本ページの最終行にあるサムネイル画像はLightbox Plus開発者さんのHPのサンプル素材です。ここでクリックすると、Lightbox JS v2.0の雰囲気がつかめるでしょう。ここ筆者(Ujiki.oO)のHPでのLightbox JS v2.0とLightbox Plusとを比べてみてはいかがですか。最下段にあります。決して、どちらが良いとは言いません。あくまでも主観の相違ですね。

警　告　と　免　責

　このページでブログに対する実装手順を解説していますが、あなたが実施される場合には十分なスキルがあることを期待します。スキルの無い方がブログ内のJavaScriptを編集し、あらゆるトラブルを招いても、筆者は責任を負いません。本点を理解できない方は、本ページを読み進まないように願います。

※ 編集画面を別のブラウザー(ウィンドー)で表示させ、いつでも復旧できるよう願います！

≪目次≫

実装のメリット
実装を実現した有名FREEブログ達
基本コンセプト
- なぜLightbox Plusの「 lightbox_plus.js 」を改竄するのでしょう。
- ※ 重要なことは、手作業で実現させないことです！
  - 決して、決して、画像貼り付けの為の「Ａ」タグなり、「ＩＭＧ」タグを手作業で変更してはいけません！
「 Lightbox Plus 」の操作方法
ダウンロード
- GIFファイルとPNGファイルが含まれています。公開できる場所にアップロードしましょう。
それでは、Seesaaブログと FC2ブログと Livedoorブログに実装してみますか。
- まずは、オリジナル画像をそれぞれのブログにアップロードしてみますか。
- 共通のファイルを公開できる場所にアップロードしましょう。
prototype.js を実装しましょう。
CSSを各ブログに追加登録しましょう。　lightbox.css
各ブログ専用の lightbox_plus.js を作成する。
各JavaScript呼び出し命令を各ブログに埋め込みましょう。
以下が実装の結果です。如何でしょうか？
ブラウザー毎の達成度：　2007/01/17 現在
裏技
- 小さな画像の拡大だって出来ちゃいます。
- 「ｉｍｇ」タグの「ａｌｔ」エレメントって重要な情報だよね。
【反省】
関連リンク
- ブランドって何だぁ？
本Wikiサイトが目指していること

実装のメリット

　みなさんは、きっと「デジタルカメラ」をお持ちでしょうか。どんどん進化し、もっと高性能なデジカメを欲しいとは思いませんか。せっかくの高性能なデジカメを持っているのに、ホームページには縮小した荒い画像ファイルしかアップロードしないとしたら・・・悲しくないですか？　かといって、大容量の画像ファイルを貼り付けるのは、いけませんね。　では、どうしますか？　解は、軽快なサムネイル画像を貼り付けて、本ページで紹介している「 Lightbox 」を利用して、オリジナルサイズの画像を配信しましょう。

■ 画像クリックアレルギー症候群: 訪問者は、あなたのサイトの画像は２度とクリックされない状況に、どんどん進むかも知れない。あなたのサイトの画像をクリックしても、大きなサイズの綺麗なオリジナル画像を表示しないばかりか、何と、画像だけを表示してしまって「戻る」ボタンを押さないといけなくなる。こんなホームページだと、再訪問しても２度と画像をクリックしない。本実装によって、訪問者は画像のクリックが楽しくなる。かも知れない。

■ サムネイル画像の運用でストレスを与えない: ホームページには軽いサイズ、低い容量のサムネイル画像を配置する。そうすれば閲覧者に対してストレスを与え難い方向と言えます。サムネイルの話題

■ オリジナル大容量画像での対応こそインターネットっぽい: 閲覧者がクリックした場合に、はじめてオリジナル画像のダウンロードが始まる。

■ オリジナル画像の保全: ホームページを印刷したり、保存してもサムネイル画像だけが印刷されたり保存される。サムネイル画像をクリックしてオリジナル画像を表示しても、オリジナル画像の保存は素人には簡単には作業できない。著作権利侵害の防止のアプローチには貢献する。かも。(微笑)

実装を実現した有名FREEブログ達

ここでは、Seesaa、FC2、Livedoor各FREEブログ以外のブログへの実装結果です。

ブログサイト(ABC順)	埋め込み完了日時
Ninja(忍者)	2007/02/02
ウェブリブログ(Biglobe)	2007/02/04

基本コンセプト

　オリジナル画像ファイルアップロードする際に、サムネイル画像を自動的に作成し、サムネイル画像を表示して、オリジナル画像へリンクするHTMLスクリプトを、ブログに埋め込むことが出来る「フリーブログ」を重視し、埋め込まれたHTML書式を書き直すことなく、そのままの投稿内容で「 Lightbox Plus 」を利用できるように考える。

なぜLightbox Plusの「 lightbox_plus.js 」を改竄するのでしょう。

　　target="_blank"

は、残すべきです。何らかの理由で、Lightbox Plusをアンインストールしたい場合、元の動作を保証するべきです。また、インターネット通信上の問題か、閲覧者の都合で、処理前に画像をクリックされた場合にも必要です。

　　rel="lightbox"

を、あなたは手動でいちいち登録するのですか？　お疲れ様です。こんな決まりきったことはコンピューターに処理させましょうよ。

　　class="effectable"

2007/01/17現在、筆者のJavaScriptで、Firefoxにおいては実装を終えております。「 IMG 」タグの「 ALT 」属性の１文字目が「半角スペース」の場合は、自動的にclass宣言が挿入されています。MSIEでの実装が可能になりましたら、本ページで公開する予定です。
　以上の処理を、今般のJavaScriptで実現させています。ここで試行するのは、送られてきた情報を「あなたのブラウザー側で変換」して、今般は「 Lightbox Plus 」で決められている書式に変換してしまおうと言う試みです。つまり、各ブログサイト側にとっては、何もしていない。実行するのは、あくまでも「あなたのブラウザー」が変換するということです。　必ず「 Lightbox Plus 」に訪問して、あなたのブラウザーが機能することを確認してみてください。　開発元のHPで機能しないブラウザーですと・・・・それは無理です。(^^);

　さて、「あなたのブラウザー」側で変換させる結果とは、「ａ」タグに「ｒｅｌ」を、そして「ｉｍｇ」タグに「 title 」エレメントを追加しているのです。

つまり

<a href="オリジナル画像のURL" target="_blank"><img src="サムネイル画像のURL" alt="コメント" 他属性・・・></a>

と言う構文を、あなたのブラウザーで受け取ったら、あなたのブラウザー側で

<a href="オリジナル画像のURL" rel="lightbox"><img src="サムネイル画像のURL" alt="コメント" title="キャプション" 他属性・・・></a>

と言う内容に変換します。

　変換させるタイミングは、HPの情報を全て「あなたのブラウザー」が読み切ったとされる直後に働きます。よって、インターネット通信上の問題か、または「イラチなあなた」の問題で、処理のタイミングの以前に画像をクリックしますと、「あなたのブラウザー」が変換処理を行っていないわけですから、機能不全を起こします。決して、各ブログの問題ではありえませんので、各ブログ提供企業へ苦情、質問はされないようにお願い申し上げます！

　また、全てのブログは左右のサイドメニューは無視されます。対象となるのは中央本文内の画像だけです。

※ 重要なことは、手作業で実現させないことです！

決して、決して、画像貼り付けの為の「Ａ」タグなり、「ＩＭＧ」タグを手作業で変更してはいけません！

　近い将来、もっと素晴らしい「次世代Ｌｉｇｈｔｂｏｘ」なるものが登場しますよ。あなたはきっと思うでしょう。
「わっ！あの Lightbox を採用したのは早計だった！乗り換えたいけど、過去の全ての投稿記事をどうしよう・・・・う～む」
決して、手作業で画像埋め込みを行ってはいけません！！

「 Lightbox Plus 」の操作方法

01-1	実装済みの画像をクリックすると、ページにシャドーマスクが施され、中央に目的の画像を表示します。画像を閲覧するのに、新しいウィンドーを開いたり、画像だけを表示してしまって、元に戻すのに時間がかかるといった煩雑さがなくなります。
02-1		複数の画像がある場合は、画像の右に表示される画像をクリックすると次の画像を表示します。
03-1		同じく、画像の左に表示される画像をクリックすると元の画像を表示します。
04-1		右上の「 × 」をクリックすれば、閉じることができます。シャドーマスク領域をクリックしても閉じる場合があります。画像をクリックしても閉じれますが、後述する拡大モード時と縮小モード時では操作が異なります。
ここからが、 Lightbox JS v2.0には無い高機能ですね。
05-1		仮に表示する画像がブラウザーの内側の領域を越える場合に、左上の拡大ボタンをクリックします。１倍スケールで表示されます。この表示モードを「拡大モード」と表現しますか。 ※ 拡大モード中なら画像を２回クリックすると閉じることが出来ます。
05-2		「拡大モード」を終了するには、左上の縮小ボタンをクリックします。この表示モードを「縮小モード」と表現しますか。 ※ つまり、大きなサイズの画像は自動的に縮小表示してくれるわけです。 ※ また「縮小モード」中はブラウザーを縦横スクロールしても画像はずれずに追従します。 ※ 「縮小モード」中は画像を１回クリックすると閉じることが出来ます。
06-1		「拡大モード」表示中は右下に「表示領域」を表示しています。どの位置の拡大かをビジュアル的に理解できるでしょう。
07-1	「拡大モード」中は、画像の平行移動が可能です。画像をクリックしたままで移動させてください。
08-1	「拡大モード」中は、表示倍率の変更が可能です。マウスのホイールで縮小・拡大可能です。
09-1	特定の画像をオーバーラップ表示させることが可能です。

ダウンロード

　ダウンロードは、Lightbox Plusから１ファイルづつ行います。

GIFファイルとPNGファイルが含まれています。公開できる場所にアップロードしましょう。

　GIFファイルもPNGファイルもURLを組み入れる必要があります。メモしておきましょう。

それでは、Seesaaブログと FC2ブログと Livedoorブログに実装してみますか。

まずは、オリジナル画像をそれぞれのブログにアップロードしてみますか。

サンプル画像を用意しました。ttp://img02.pics.livedoor.com/002/5/e/5e66c7d187bac38c4324-L.jpg

Seesaaの場合：

01-1		記事投稿画面で、左のアイコンをクリックすれば、内容の textarea 領域の直下に、ファイルマネージャーが表示されます。
02-1		この例では、「 Sample.jpg 」を登録しています。そのまま、追加ボタンを押しましょう。
03-1		アップロードが終了しますと、リフレッシュされます。ファイルマネージャーの最上段に、今、アップロードしたファイルが現れます。　ここでは、「サムネイル」ボタンをクリックします。　そうしますと、投稿内容のエリアにHTML文章が埋め込まれます。

<a href="http://designcheck.up.seesaa.net/image/Sample.jpg"
 target="_blank"><img
 src="http://designcheck.up.seesaa.net/image/Sample-thumbnail2.jpg"
 alt="Sample.jpg" width="150" height="112" border="0" /></a>

　このように埋め込まれたはずです。 altの情報が面白くないですね。まあ、ここでは無視しますか。

　さて、このまま投稿しましょうか。投稿したブログです。

FC2の場合：

01-1		ツールのファイルアップロードを選択します。
02-1		この例では、「 Sample.jpg 」を登録しています。　今度は、遊びで、ファイルのタイトルを登録してみましょう。そして、アップロードボタンを押しましょう。
03-1		アップロードが終了しますと、リフレッシュされます。　最上段に、今、アップロードしたファイルが現れます。　ここでは、「記事を書く(サムネイルを使用) 」をクリックします。　そうしますと、投稿内容のエリアにHTML文章が埋め込まれます。
04-1		「新しく記事を書く」の画面でも、記事入力中に画像などのアップロードは可能ですね。

<a href="http://blog53.fc2.com/u/ujiki/file/Sample.jpg"
 target="_blank"><img
 src="http://blog53.fc2.com/u/ujiki/file/Samples.jpg"
 alt="あららあ～富士山です～ね" border="0"></a><br clear="all">

　このように埋め込まれたはずです。 altに情報が入りました。覚えておいてください。

　さて、このまま投稿しましょうか。投稿したブログです。

Livedoorの場合：

01-1		ブログの投稿メニューの「ファイルのアップロード」をクリックして、「ファイルをアップロードする」をクリックしますか。
02-1		この例では、「 Sample.jpg 」を登録しています。　Livedoorの場合はタイトルを入力しないとエラーとなります。登録してみましょう。「選択したファイルをアップロードする」ボタンを押しましょう。
03-1		アップロードが終了しますと、リフレッシュされます。　もう一度、ファイルのアップロードをクリックします。　最上段に、今、アップロードしたファイルが現れます。　ここでは、「投稿する」ボタンをクリックします。　そうしますと、投稿内容のエリアにHTML文章が埋め込まれます。
04-1		「ブログを投稿する」の画面でも、記事入力中に画像などのアップロードは可能ですね。

<a href="http://image.blog.livedoor.jp/mmj_aos/imgs/3/6/36c8a2a7.jpg"
 target="_blank"><img
 src="http://image.blog.livedoor.jp/mmj_aos/imgs/3/6/36c8a2a7-s.jpg"
 width="160" height="120" border="0"
 alt="サンプル画像をあっぷするのだ" hspace="5" class="pict"
 align="left" /></a><br />

　このように埋め込まれたはずです。 altに情報が入りました。覚えておいてください。

　さて、このまま投稿しましょうか。投稿したブログです。

共通のファイルを公開できる場所にアップロードしましょう。

01-1		ダウンロードしたファイル群です。８個のGIFファイル１個のPNGファイルそして２つのJavaScriptファイルですね。
02-1		Seesaaのファイルマネージャーです。
02-2		FC2は残念ながら他のサイトから利用できません。
02-3		ライブドアーはユニークなファイル名に自動変換されることに気をつけましょう。

blank.gif close.gif expand.gif loading.gif next.gif overlay.png
prev.gif shrink.gif zzoop.gif

は、そのままアップロードすれば良いでしょう。

spica.js

はJavaScriptファイルですが、これもこのままアップロードしますか。

prototype.js を実装しましょう。

　http://prototype.conio.net/ に、JavaScriptファイルがあります。今回は、これを利用します。

Download the latest version (1.4.0) をダウンロードし、あなたのサイトにアップロードしましょう。以下の「 prototype.js 」です。

prototype-1.4.0
　　　　　└dist
　　　　　　　└prototype.js

CSSを各ブログに追加登録しましょう。　lightbox.css

　CSSの実装の方法はお任せするが、筆者の場合はブログが呼び出しているCSSデーターの後半に追加している。　こうすれば、全体を見渡し易くなる。かも。

８行目の「 overlay.png 」を http://～から始まるURLに変更する。
２２行目も同じ手順で変更する。
２７行目の「 blank.gif 」を http://～から始まるURLに変更する。

以上の修正を施してから、内容を丸々各ブログのCSS領域の後半に追加する。

ヒント：

キーボードを利用してコピーするには？

　「Ctrl＋Ａ」で全体を反転する（もしくは、マウスで任意の個所を反転し）、Ctrl＋Ｃでコピーする。　貼り付けたい場所で、Ctrl＋Ｖとするだけ。

SeesaaのCSSデーターを変更する

01-1

　ブログHPからなら、「デザイン＞スタイルシート」で「適用」中のスタイルシートのタイトルをクリックすると、左の画面となる。ページ分類は「トップ」「記事」「過去ログ」「カテゴリ」とあるが、筆者が選択したテンプレートは、どれも共通でした。　CSSデーターの後半に変更後のデーターを追加し、「スタイルシートを変更する」ボタンを押す。
※ 必ず「CSS(スタイルシート)」の再構築を実行すること。

FC2のCSSデーターを変更する

01-2

　「環境設定＞テンプレートの設定」で「現在設定されているスタイル」の「編集」をクリックすると左の画像となる。　CSSデーターの後半に変更後のデーターを追加し、「更新」ボタンを押す。更新ボタンは複数あるので間違わないこと！

LivedoorのCSSデーターを変更する

01-3

　「カスタマイズ/管理＞デザインの設定」で「カスタマイズ」を選択すると左の画像となる。　CSSデーターの後半に変更後のデーターを追加し、「この内容で保存する」ボタンを押す。
※ 必ず「デザイン（CSS）」の再構築を実行すること。

各ブログ専用の lightbox_plus.js を作成する。

ここでは、後々の混乱を避けるために、ファイル名をリネームしましょう。

Seesaa専用 lightbox_plus.js を: lightbox_plus_Seesaa.js としましょう。
FC2専用 lightbox_plus.js を: lightbox_plus_FC2.js としましょう。
Livedoor専用 lightbox_plus.js を: lightbox_plus_Livedoor.js としましょう。

それでは、それぞれのJavaScriptを変更します。

【共通変更作業内容】: 画像のURLを変更します。
７３４行目付近からのGIFファイルのURLを変更しましょう。

	loadingimg:'http://あなたのサイト名/～/loading.gif',
	expandimg:'http://あなたのサイト名/～/expand.gif',
	shrinkimg:'http://あなたのサイト名/～/shrink.gif',
	previmg:'http://あなたのサイト名/～/prev.gif',
	nextimg:'http://あなたのサイト名/～/next.gif',
	effectimg:'http://あなたのサイト名/～/zzoop.gif',
	effectpos:{x:-40,y:-20},
	effectclass:'http://あなたのサイト名/～/effectable',
	closeimg:'http://あなたのサイト名/～/close.gif',

: GIFファイルのURLを決め打ちしましょう。間違ってピリオドを消さないように。シングルクオテーション文字も消さない。

【各ブログ専用の変更作業】: ７３２行目付近の

Event.register(window,"load",function() {

: の直後に、各ブログ毎のスクリプトを追加します。

Seesaa専用JavaScript追加スクリプト「 lightbox_plus_Seesaa.js 」用

	var blog2007 = document.getElementsByClassName("blog",$("content"));
	if(document.all && navigator.appName!="Opera"){
		var judgeOfImage = '';
		for(j=0;j<blog2007.length;j++){
			with(blog2007[j])innerHTML=innerHTML.replace(
			/(\<a href=\"[^\"]*\.[jpg][pni][gf]\")([^\>]*)(\><img src=\"[^\"]*\") alt=\" ([^\"]*)\"([^\>]*)\>/ig,
			"$1 $2 rel='lightbox1' class='effectable'$3 alt='$4' $5>");
			var aTags = blog2007[j].getElementsByTagName("a");
			for(i=0;i<aTags.length;i++){
				judgeOfImage = aTags[i].href.substring(aTags[i].href.length - 3).toLowerCase();
				if(judgeOfImage=='jpg'||judgeOfImage=='png'||judgeOfImage=='gif'){
					aTags[i].target='';
					aTags[i].rel='lightbox1';
				}
			}
			var imgTags = blog2007[j].getElementsByTagName("img");
			for(i=0;i<imgTags.length;i++){
				imgTags[i].title=imgTags[i].alt+' <nobr>（'+document.title+'）</nobr>' ;
			}
		}
	} else {
		for(j=0;j<blog2007.length;j++){
			with(blog2007[j])innerHTML=innerHTML.replace(/(\<a href=\"[^\"]*\.[jpg][pni][gf]\") target=\"\>/ig,"$1>").replace(/(\<a href=\"[^\"]*\.[jpg][pni][gf]\")([^\>]*)(\><img src=\"[^\"]*\") alt=\"([^\"]*)\" ([^\>]*)\>/ig,"$1 $2 rel='lightbox1'$3 alt='$4' title='$4 <nobr>（"+document.title+"）</nobr>' $5>");
		}
	}

となります。Seesaaブログにアップロードしましょう。URLをメモしましょう。

FC2専用JavaScript追加スクリプト「 lightbox_plus_FC2.js 」用

	var blog2007 = document.getElementsByClassName("section");
	if(document.all && navigator.appName!="Opera"){
		var judgeOfImage = '';
		for(j=0;j<blog2007.length;j++){
			var aTags = blog2007[j].getElementsByTagName("a");
			for(i=0;i<aTags.length;i++){
				judgeOfImage = aTags[i].href.substring(aTags[i].href.length - 3).toLowerCase();
				if(judgeOfImage=='jpg'||judgeOfImage=='png'||judgeOfImage=='gif'){
					aTags[i].target='';
					aTags[i].rel='lightbox1';
				}
			}
			var imgTags = blog2007[j].getElementsByTagName("img");
			for(i=0;i<imgTags.length;i++){
				imgTags[i].title=imgTags[i].alt+' <nobr>（'+document.title+'）</nobr>' ;
			}
		}
	} else {
		for(j=0;j<blog2007.length;j++){
				with(blog2007[j])innerHTML=innerHTML.replace(/(\<a href=\"[^\"]*\.[jpg][pni][gf]\") target=\"\>/ig,"$1>").replace(/(\<a href=\"[^\"]*\.[jpg][pni][gf]\")([^\>]*)(\><img src=\"[^\"]*\") alt=\"([^\"]*)\" ([^\>]*)\>/ig,"$1 $2 rel='lightbox1'$3 alt='$4' title='$4 <nobr>（"+document.title+"）</nobr>' $5>");
		}
	}

となります。FC2ブログにアップロードしましょう。URLをメモしましょう。

Livedoor専用JavaScript追加スクリプト「 lightbox_plus_Livedoor.js 」用

	var blog2007 = document.getElementsByClassName("main");
	if(document.all && navigator.appName!="Opera"){
		var judgeOfImage = '';
		for(j=0;j<blog2007.length;j++){
			var aTags = blog2007[j].getElementsByTagName("a");
			for(i=0;i<aTags.length;i++){
				judgeOfImage = aTags[i].href.substring(aTags[i].href.length - 3).toLowerCase();
				if(judgeOfImage=='jpg'||judgeOfImage=='png'||judgeOfImage=='gif'){
					aTags[i].target='';
					aTags[i].rel='lightbox1';
				}
			}
			var imgTags = blog2007[j].getElementsByTagName("img");
			for(i=0;i<imgTags.length;i++){
				imgTags[i].title=imgTags[i].alt+' <nobr>（'+document.title+'）</nobr>' ;
			}
		}
	} else {
		for(j=0;j<blog2007.length;j++){
			with(blog2007[j])innerHTML=innerHTML.replace(/(\<a href=\"[^\"]*\.[jpg][pni][gf]\") target=\"\>/ig,"$1>").replace(/(\<a href=\"[^\"]*\.[jpg][pni][gf]\")([^\>]*)(\><img src=\"[^\"]*\") alt=\"([^\"]*)\" ([^\>]*)\>/ig,"$1 $2 rel='lightbox1'$3 alt='$4' title='$4 <nobr>（"+document.title+"）</nobr>' $5>");
		}
	}

となります。Livedoorブログには拡張子「ｊｓ」をアップロードできません。Livedoor系Webホスティングは「 AAA cafe 」でしょうか。今は会員を募集していないですね。適当な公開できて通信スピードが遅くないサイトにアップロード願います。（筆者はAAAを利用しています）

異なるのは「 getElementsByClassName 」の変数だけと言う事です。

各JavaScript呼び出し命令を各ブログに埋め込みましょう。

Seesaaの場合

02-1

　Seesaaブログからなら、「デザイン＞ＨＴＭＬ」を選択し、適用されているHTML名をクリックします。すると左の画像の画面となります。
※ ３つのJavaScriptを呼び出します。URLは読み替えてください。
※ 最後のMETAタグは推奨します。
※ 以下の構文を「＜／ｈｅａｄ＞」(半角)の直前に入れますか。
※ HTMLを変更したわけですから、必ず「すべて」の再構築を行わないと過去の記事が変わりません！
URLアドレスは皆様専用に読み替えてください。

<script type="text/javascript"
 src="http://xxxxx.up.seesaa.net/(フォルダー任意)/prototype.js">
</script>
<script type="text/javascript"
 src="http://xxxxx.up.seesaa.net/(フォルダー任意)/spica.js">
</script>
<script type="text/javascript"
 src="http://xxxxx.up.seesaa.net/(フォルダー任意)/lightbox_plus_Seesaa.js">
</script>
<meta http-equiv="imagetoolbar" content="no">

FC2の場合

02-2

　ＦＣ２前段のＣＳＳ編集と同じ画面です。下がＣＳＳデーター、上が左の画像のＨＴＭＬデーターの編集ですね。
※ ３つのJavaScriptを呼び出します。URLは読み替えてください。
※ 最後のMETAタグは推奨します。
※ 以下の構文を「＜／ｈｅａｄ＞」(半角)の直前に入れますか。
URLアドレスは皆様専用に読み替えてください。

<script type="text/javascript"
 src="http://blogxx.fc2.com/x/xxxxx/file/prototype.js">
</script>
<script type="text/javascript"
 src="http://blogxx.fc2.com/x/xxxxx/file/spica.js">
</script>
<script type="text/javascript"
 src="http://blogxx.fc2.com/x/xxxxx/file/lightbox_plus_FC2.js">
</script>
<meta http-equiv="imagetoolbar" content="no">

Livedoorの場合「プラグインに登録しました」

　ＣＳＳ変更と同じようにＨＴＭＬに埋め込んでも良いでしょう。今回はプラグインに登録しました。こうすれば自由にテンプレートを変更しても良いと言うメリットはありますね。

02-3		「カスタマイズ/管理＞プラグインの新規追加」をクリックすると左の画像です。「上級者向けプラグイン」をクリックします。
03-1		Javascriptボタンでちまちま登録するのも良いのですが、METAタグもありますし、３つのJavaScriptファイルを呼び出しますので、ここは「フリーエリア」を選択しますか。
04-1		左の画像のフリーエリアプラグインのＨＴＭＬデーターの編集ですね。 ※ ３つのJavaScriptを呼び出します。URLは読み替えてください。 ※ 最後のMETAタグは推奨します。 URLアドレスは皆様専用に読み替えてください。

<script type="text/javascript"
 src="http://xxx.aaa.livedoor.jp/~xxxxx/LightboxPlus/prototype.js">
</script>
<script type="text/javascript"
 src="http://xxx.aaa.livedoor.jp/~xxxxx/LightboxPlus/spica.js">
</script>
<script type="text/javascript"
 src="http://xxx.aaa.livedoor.jp/~xxxxx/LightboxPlus/lightbox_plus_Livedoor.js">
</script>
<meta http-equiv="imagetoolbar" content="no">

04-2

　もう一度、「プラグインの設定」をクリックして、プラグインのタイトルと、順序の番号を設定して、「順序/タイトルを変更する」ボタンを押しましょう。
※ プラグインを変更したわけですから、必ず「サイドバー（プラグイン）」の再構築を行います！

以下が実装の結果です。如何でしょうか？

　どのブログも通信が終了するまで画像のクリックをお待ちくださいませ m(__)m　

Seesaaへの実装の結果

http://designcheck.seesaa.net/article/31511222.htm...
http://ujiki.seesaa.net/ は重いですので、通信が全て終了するまでお待ちください。

FC2への実装の結果

http://ujiki.blog53.fc2.com/

Livedoorへの実装の結果

http://blog.livedoor.jp/mmj_aos/

ブラウザー毎の達成度：　2007/01/17 現在

OS	(ABC順)	navigator.userAgent	結果
Linux 2.6.17 knoppix 5.0.1	Firefox 1.5.0.3	Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.0.3) Gecko/20060326 Firefox/1.5.0.3 (Debian-1.5.dfsg+1.5.0.3-2)	○ 良　好
Win2k Pro	Firefox 1.5.0.9	Mozilla/5.0 (Windows; U; Windows NT 5.0; ja; rv:1.8.0.9) Gecko/20061206 Firefox/1.5.0.9 Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0)	○ 良　好
Win98 SE	IE 6	Mozilla/4.0 (compatible; MSIE 6.0; Windows 98)	○ 良　好
Win2k Pro	IE 6	Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0)	○ 良　好
Win2k Pro	Lunascape 4.0.6	Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0) Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.8b) Gecko/20050423	○ 良　好
Win98 SE	Netscape 7.1	Mozilla/5.0 (Windows; U; Win98; ja-JP; rv:1.4) Gecko/20030624 Netscape/7.1 (ax)	○ 良　好
Win2k Pro	Opera 9.10	Opera/9.10 (Windows NT 5.0; U; ja)	○ 良　好
Win2k Pro	Sleipnir 2.49	Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0)	○ 良　好

　みなさまのブラウザーでは如何でしょうか？　コメントかトラックバック下されば、助かります。

裏技

小さな画像の拡大だって出来ちゃいます。

画像の左上の拡大アイコンをクリックして、マウスのホイールで拡大します。(*^^*)/~

「ｉｍｇ」タグの「ａｌｔ」エレメントって重要な情報だよね。

以下が、今回のサンプル画像の登録の結果だ。思い出して欲しい。ここを見てね。「 img 」タグの「 alt 」のデーターを変えることによって、画像の下段のキャプションが変わるね。手動で変えても良い。でもね、元の画像ファイルのデーターを変えてみたら？

Seesaa		Ｓａｍｐｌｅ．ｊｐｇと表示されています。これは画像のアップロード時に書き込まなかったのですね。
FC2		「あららあ～富士山です～ね」と表示されています。これは画像のアップロード時に書き込みましたね。

※ ＡＬＴに転送される情報は、いつでも変更できますよ。　もちろん、投稿時にも変えれますが・・・ (^^);

【反省】

Livedoorブログへの実装手法として「プラグイン」領域への登録を行いましたが、挙動一部不審ですね。時間ができれば、プラグインを廃止して、ちゃんとHTMLに登録して検証ですね。

本Wikiサイトが目指していること

JavaScriptだけで、大量のオリジナル画像をスムースに扱えること

　左サイドの上部に白黒写真があります。浮遊する中規模カラー画像を経由して、別ウィンドーでオリジナル画像を表示します。本サイトの出発点は、この３段階でオリジナル画像を表示させるJavaScriptの公開を目的として作成されました。　Wikiのプラグインとして実装しています。　本Wikiのトップページより、順路の通り解説しています。

パラメトリックFLASHアルバムを利用すること

　本Wikiでも筆者が作成し、無料配布している「パラメトリックFLASHアルバム」を実装しています。他、様々なブログなどでも実装しています。　本Wiki「パラメトリックFLASHアルバムを無料で配布致します。」などで解説しています。

Lightboxを利用してWikiやブログの機能を向上させること

　本ページで解説した通りです。

　筆者が望むこととは、ブログも、Wikiも、通信ストレス無く、オリジナルサイズの美しい(?)画像を、みんなが配信することができることです。　みんなが大型画像を自力で配信することに喜びを感じて欲しいと思います。　

警告：縦サイズ大きいです。

警告：横サイズ大きいです。

本ページのトップに戻る

コメント(1) ｜

カテゴリ：インターネット > Lightbox

タグ：lightbox , plus , javascript , seesaa , fc2 , livedoor

「Lightbox Plus を使ってみる」をウェブ検索する

2007年04月02日(月) 08:07:01 Modified by mmj_aos

添付ファイル一覧(全2件)

bf2847d3c5075c37.PNG (8.73KB)
Uploaded by mmj_aos 2007年01月16日(火) 17:24:50

068d4d276a2eaaca.PNG (10.95KB)
Uploaded by mmj_aos 2007年01月16日(火) 17:17:25

Using only Java Script for ALBUM

筆者 Ujiki.oO のプロフィール

Lightbox Plus を使ってみる

実装のメリット

実装を実現した有名FREEブログ達

基本コンセプト

なぜLightbox Plusの「 lightbox_plus.js 」を改竄するのでしょう。

※ 重要なことは、手作業で実現させないことです！

決して、決して、画像貼り付けの為の「Ａ」タグなり、「ＩＭＧ」タグを手作業で変更してはいけません！

「 Lightbox Plus 」の操作方法

ダウンロード

GIFファイルとPNGファイルが含まれています。公開できる場所にアップロードしましょう。

それでは、Seesaaブログ と FC2ブログ と Livedoorブログ に実装してみますか。

まずは、オリジナル画像をそれぞれのブログにアップロードしてみますか。

Seesaaの場合：

FC2の場合：

Livedoorの場合：

共通のファイルを公開できる場所にアップロードしましょう。

prototype.js を実装しましょう。

CSSを各ブログに追加登録しましょう。 lightbox.css

SeesaaのCSSデーターを変更する

FC2のCSSデーターを変更する

LivedoorのCSSデーターを変更する

各ブログ専用の lightbox_plus.js を作成する。

Seesaa専用JavaScript追加スクリプト「 lightbox_plus_Seesaa.js 」用

FC2専用JavaScript追加スクリプト「 lightbox_plus_FC2.js 」用

Livedoor専用JavaScript追加スクリプト「 lightbox_plus_Livedoor.js 」用

異なるのは「 getElementsByClassName 」の変数だけと言う事です。

各JavaScript呼び出し命令を各ブログに埋め込みましょう。

Seesaaの場合

FC2の場合

Livedoorの場合「プラグインに登録しました」

以下が実装の結果です。如何でしょうか？

Seesaaへの実装の結果

FC2への実装の結果

Livedoorへの実装の結果

ブラウザー毎の達成度： 2007/01/17 現在

裏技

小さな画像の拡大だって出来ちゃいます。

「 ｉｍｇ 」タグの「 ａｌｔ 」エレメントって重要な情報だよね。

【反省】

関連リンク

ブランドって何だぁ？

本Wikiサイトが目指していること

JavaScriptだけで、大量のオリジナル画像をスムースに扱えること

パラメトリックFLASHアルバムを利用すること

Lightboxを利用してWikiやブログの機能を向上させること

それでは、Seesaaブログと FC2ブログと Livedoorブログに実装してみますか。

CSSを各ブログに追加登録しましょう。　lightbox.css

ブラウザー毎の達成度：　2007/01/17 現在

「ｉｍｇ」タグの「ａｌｔ」エレメントって重要な情報だよね。