Lightbox JS v2.0を使ってみる
| ※ 緊急ニュース ※ 2007/12/11 | |||
| あなたが Livedoorブログか FC2ユーザーなら！ | 老若男女、誰でも、超簡単Lightboxプラグインを無料で利用できます。 それも訪問者がLightboxのタイプをメニューから選択可能！ これで過去の全ての画像の投稿が全自動でLightbox表示できます！ またCSSスタイルシートに依存しませんから、 自由に好きな時にデザインテーマを変更可能！！ | ||
| ⇒ デモと解説のブログ | |||
| ⇒ FC2版デモと解説のブログ | |||
| 戻る | 本ページの最終更新日時： | 2007/04/19 00:30am JST | |
| Lightbox Plus を使ってみる | |||
| ちょっと試しに Lightbox を利用してみるか | |||
| サムネイル画像の重要性と作成方法について | |||
トップページで紹介中の有名FREEブログについて、全てのサムネイル画像をクリックした際に、Lightbox JS v2.0を使ってみる。
| 警 告 と 免 責 |
| このページでLivedoor Wikiに対する実装手順を解説していますが、あなたが実施される場合には十分なスキルがあることを期待します。スキルの無い方がWikiのフリーエリア内のJavaScriptを編集し、あらゆるトラブルを招いても、筆者は責任を負いません。本点を理解できない方は、本ページを読み進まないように願います。 ※ 筆者の例では「より便利な改良のつもり」がとんでもないフリーエリア内JavaScriptの定義をしてしまって、Wiki全般が表示しないようなトラブルを起こしました。(笑) そんな時でも、フリーエリア編集画面を別のブラウザー(ウィンドー)で表示させていますので、元に戻して事なきをえております！ もしも自力で復旧できなければ、Livedoor側に依頼することになりますが、これって個人を特定する事務手続きなりと・・・何日後の復旧となるやら。大変な事態ですね ^^; |
≪目次≫
- 実装のメリット
- Ｏｐｅｒａの問題
- Lightbox JS v2.0の操作方法
- ダウンロードは、Lightbox JS v2.0の、Downloadから行います。
- まずは、ここLivedoor Wikiに実装してみますか。
- 関連リンク
- 本Wikiサイトが目指していること
実装のメリット
みなさんは、きっと「デジタルカメラ」をお持ちでしょうか。どんどん進化し、もっと高性能なデジカメを欲しいとは思いませんか。せっかくの高性能なデジカメを持っているのに、ホームページには縮小した荒い画像ファイルしかアップロードしないとしたら・・・悲しくないですか？ かといって、大容量の画像ファイルを貼り付けるのは、いけませんね。 では、どうしますか？ 解は、軽快なサムネイル画像を貼り付けて、本ページで紹介している「 Lightbox 」を利用して、オリジナルサイズの画像を配信しましょう。
- ■ 画像クリックアレルギー症候群
- 訪問者は、あなたのサイトの画像は２度とクリックされない状況に、どんどん進むかも知れない。あなたのサイトの画像をクリックしても、大きなサイズの綺麗なオリジナル画像を表示しないばかりか、何と、画像だけを表示してしまって「戻る」ボタンを押さないといけなくなる。こんなホームページだと、再訪問しても２度と画像をクリックしない。本実装によって、訪問者は画像のクリックが楽しくなる。かも知れない。
- ■ サムネイル画像の運用でストレスを与えない
- ホームページには軽いサイズ、低い容量のサムネイル画像を配置する。そうすれば閲覧者に対してストレスを与え難い方向と言えます。サムネイルの話題
- ■ オリジナル大容量画像での対応こそインターネットっぽい
- 閲覧者がクリックした場合に、はじめてオリジナル画像のダウンロードが始まる。
- ■ オリジナル画像の保全
- ホームページを印刷したり、保存してもサムネイル画像だけが印刷されたり保存される。サムネイル画像をクリックしてオリジナル画像を表示しても、オリジナル画像の保存は素人には簡単には作業できない。著作権利侵害の防止のアプローチには貢献する。かも。(微笑)
Ｏｐｅｒａの問題
Opera利用者なら、まずはLightbox JS v2.0に訪問して欲しい。筆者のOpera9.10だと、訪問直後は画像が表示されるが、何回か繰り返すと暴走する。 よって、非常に残念であるけれども、ブラウザー「 Opera 」である場合は、変換しないようにします。みなさんの環境での「 Ｏｐｅｒａ 」は、どうでしょうか？ 「Lightbox JS v2.0を修正して改善したよ」などがありましたら幸いです。 「問題無くLightbox JS v2.0を利用できているよ」の場合、是非、お知らせ願います。その際には、ブラウザー情報をお知らせ願います。コメントかトラックバックで、お知らせ願います。
Lightbox JS v2.0の操作方法
- 実装済みの画像をクリックすると、ページにシャドーマスクが施され、中央に目的の画像を表示します。画像を閲覧するのに、新しいウィンドーを開いたり、画像だけを表示してしまって、元に戻すのに時間がかかるといった煩雑さがなくなります。
- 複数の画像がある場合は、画像の右半分をクリックすると次の画像を表示します。Gecko系であれば、キーボードの「 Ｎ 」を押しても同じです。
- 同じく、画像の左半分をクリックすると前の画像を表示します。Gecko系であれば、キーボードの「 Ｐ 」を押しても同じです。
- 右下の「 × 」をクリックすれば、元に戻れます。シャドーマスク領域をクリックしても戻れます。Gecko系であれば、キーボードの「 Ｃ 」を押しても同じです。
ダウンロードは、Lightbox JS v2.0の、Downloadから行います。
GIFファイルが含まれています。公開できる場所にアップロードしましょう。
GIFファイルのURLを組み入れる必要があります。メモしておきましょう。
まずは、ここLivedoor Wikiに実装してみますか。
まずは、Wiki文法で普通に登録してみるわけです。
一例： [[&ref(サムネイル画像URL)>参照用画像URL]]これをWikiシステムが翻訳し、あなたのブラウザーには
<a href="参照用画像URL"><img src="サムネイル画像URL"></a>と自動変換して送られてきます。ここで試行するのは、送られてきた情報を「あなたのブラウザー側で変換」して、今般は「 Lightbox JS v2.0 」で決められている書式に変換してしまおうと言う試みです。つまり、Livedoor Wiki側にとっては、何もしていない。実行するのは、あくまでも「あなたのブラウザー」が変換するということです。 必ず「 Lightbox JS v2.0 」に訪問して、あなたのブラウザーが機能することを確認してみてください。 開発元のHPで機能しないブラウザーですと・・・・それは無理です。(^^);
さて、「あなたのブラウザー」側で変換させる結果とは、「 ａ 」タグに「 ｒｅｌ 」と「 title 」エレメントを追加し、
<a href="参照用画像URL" rel="lightbox[roadtrip]" title="タイトル"><img src="サムネイル画像URL"></a>と変化してくれることを目標としています。
変換させるタイミングは、HPの情報を全て「あなたのブラウザー」が読み切ったとされる直後に働きます。よって、インターネット通信上の問題か、または「イラチなあなた」の問題で、処理のタイミングの以前に画像をクリックしますと、「あなたのブラウザー」が変換処理を行っていないわけですから、機能不全を起こします。決して、LivedoorのWikiの問題ではありえませんので、Livedoorなり、Wikiへ苦情、質問はされないようにお願い申し上げます！
また、本Wikiは３列ですが、左右のサイドメニューは無視されます。対象となるのは中央本文内の画像だけです。
以下が実装の結果です。如何でしょうか？
もちろん残念ながらブラウザーによっては効果が無い場合が現時点ではあります。
画像の数が比較的に多いページ「IXY300デジタルカメラの動画をFLASHアルバムで発信」で試してみてください。
ブラウザー毎の達成度： 2007/01/09 現在
| 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) | ○ 良 好 |
みなさまのブラウザーでは如何でしょうか？ コメントかトラックバック下されば、助かります。
ご支援いただいた情報提供者 感謝致します！
| ご提供者さま | ご提供場所 |
| ★オニキス☆さま | livedoor ナレッジ Lightbox JS v2.0をWikiに実装したのですが、 |
誤りを訂正致します
2007/01/28 外部JavaScript呼び出しとして、prototype.js が、さも必要な記述がありましたが、Livedoor Wikiは標準仕様として prototype_1_5.js を<head></head>内で読み込んでいます。 prototype.js の多重読み込みは無用ですので、記事内全て訂正しました。
Livedoor Wikiへの実装手順
| 01-1 |  | まずは Livedoor Wiki の、CSSを編集します。 |
| 01-2 |  | CSSを追加しましょうか。追加する前に、GIFファイルのURLを必ず変更します！ 変更するべきGIFファイルのURLは、配布ファイルである「 lightbox.css 」の、４８行目、５３行目と５４行目です。間違わないようにURLを指定しましょう。GIFのURLに間違いなければ、WikiのCSSに追加しましょうか。 |
| 02-1 | JavaScriptの改竄１ | 配布物の４つのJavaScriptファイルの１つを自分用に改訂します。 オリジナルのファイル名は「 lightbox.js 」です。 同じように、６２行目、６３行目のGIFファイルに対するURLを正しく訂正しましょう。 （１９９行目と２１２行目はコメント行ですが、ここも正しく編集しておきますか） |
| 02-2 | JavaScriptの改竄２ | 同じくファイル「 lightbox.js 」の最終行を改訂します。「 Event.observe(window, 'load', initLightbox, false); 」行を消すか、コメントアウトしてください。 これを怠ると、MSIE系でしか動作しません！ |
| 02-3 | 全てのJavaScriptファイルを公開できるサイトにアップロードします。 | |
| 03-1 |  | 次にプラグインの追加ですね。 |
| 03-2 |  | フリーエリアを追加します。 |
| 03-3 |  | ２行の外部JavaScriptファイルの呼び出しと、１つのLivedoor Wiki専用のJavaScriptを定義しましょう。 開発者のHPでは、prototype.js を呼び出すようにスクリプトが紹介されていますが、Livedoor Wikiでは、標準仕様として prototype.js を採用、読み込まれていますので無用です！ |
| 以上をフリーエリアに定義します。 | ||
※ ２つの外部JavaScriptファイルの呼び出し ※ (prototype.jsは無用です！)
<script type="text/javascript" src="http://あなたのサイト/scriptaculous.js?load=effects"> </script> <script type="text/javascript" src="http://あなたのサイト/lightbox.js"></script>
※ １つのLivedoor Wiki専用のJavaScript ※
<script type="text/javascript"><!--
Event.observe(window, "load", replaceTags, false);
function replaceTags(){
if(navigator.appName=="Opera") return false; // Operaはバイバイ^^;
var wiki =
document.getElementsByClassName("main",$("wikibody"))[0];
if(document.all){
var aTags = wiki.getElementsByTagName("a");
var judgeOfImage = '';
for(i=0;i<aTags.length;i++){
judgeOfImage =
aTags[i].href.substring(aTags[i].href.length - 3).toUpperCase();
if(judgeOfImage=='JPG'
||judgeOfImage=='PNG'
||judgeOfImage=='GIF'){
aTags[i].rel='lightbox[roadtrip]';
aTags[i].title=document.title;
}
}
} else {
//if (document.layers||document.getElementById){
with(wiki)innerHTML=innerHTML.replace(/\<a /ig,"\n<a "); // この行を追加！ 2007/04/19 00:30am JST
with(wiki)innerHTML=
innerHTML.replace(
/(\<a href=\".*\.[jgp][pin][gf]\")(\>)/ig,
"$1 rel='lightbox[roadtrip]' title='"+document.title+"'$2"
);
}
initLightbox() ; // この行を追加！ 2006/12/22 12:20
return true;
}
// -->
</script>
裏技
どうしても画像を貼り付けたいが、Lightbox で参照させたくないし、かといって、単独で表示させたくも無い場合なら、[[表示させたい画像のＵＲＬ>#存在しないアンカー名]]と、言うふうに、リンク先を存在しないアンカー名にしましょうか。
- 例：
[[&ref(https://image01.seesaawiki.jp/m/s/mmj_aos/ddaca7700e908661.GIF)>#xxxx]]
【 改 訂 内 容 】
| 2006/12/23 00:10am | JPG/GIF/PNG と、拡張子が大文字の場合は対象から外すようにしました。つまり、jpg/gif/png だけが、Lightbox JS v2.0対象としました。 装飾デザイン用の画像って使いますよね。それを対象外にしたいわけです。 どこを改訂すれば良いかといえば、innerHTML.replace の正規表現の「 i 」を外します。「 toUpperCase 」も外します。 例えば、トップページを例にしますと、複数の画像が在るにも関わらず、１枚の画像しか表示されません。(^^);/~ |
| 2006/12/23 10:10am | ブラウザー「 Opera 」では暴走しますので、プラグイン埋め込みJavaScriptを改訂しました。 |
| 2006/12/28 09:00am | ＰＤＦファイルについては、拡張子の大文字小文字に関係無く新しいウィンドーで表示させるように改訂した。 |
| 2006/12/29 10:00am | Livedoor Wiki文法で「改行しない」文字書きを行った場合に、div箱に収めました。type1:「１行モード」と、type2:「複数行モード」に分けてます。 |
| | |
| 2007/01/15 04:00am | ＰＤＦファイルについて、いつのまにか置換処理が異常になってしまっていました。急きょ暫定的に変更しました。変更箇所は以下の一行です。 |
with(wiki)innerHTML=innerHTML.replace(/\<a href=(\"[^\"]*\.pdf\")\>/g,"<a href='#' onClick='javascript:make_win2($1,\"PDF\")'>");
| 2007/04/19 00:30am | HTML文の一行に複数のリンク画像が在ると、うまく置換できない模様です。replaceスクリプトを１行追加しました。 |
with(wiki)innerHTML=innerHTML.replace(/\<a /ig,"\n<a ");
関連リンク
Lightbox Plus
自動リサイズって便利かも知れないですね。Operaも問題無く扱えるようなら、乗り換えも「あり」でしょうね。
ブランドって何だぁ？
色んな Lightbox についての投稿ですね。当方のWikiをリンクして戴いております。ありがとう。(^^)/
本Wikiサイトが目指していること
JavaScriptだけで、大量のオリジナル画像をスムースに扱えること
 | 左サイドの上部に白黒写真があります。浮遊する中規模カラー画像を経由して、別ウィンドーでオリジナル画像を表示します。 本サイトの出発点は、この３段階でオリジナル画像を表示させるJavaScriptの公開を目的として作成されました。 Wikiのプラグインとして実装しています。 本Wikiのトップページより、順路の通り解説しています。 |
パラメトリックFLASHアルバムを利用すること
 | 本Wikiでも筆者が作成し、無料配布している「パラメトリックFLASHアルバム」を実装しています。他、様々なブログなどでも実装しています。 本Wiki「パラメトリックFLASHアルバムを無料で配布致します。」などで解説しています。 |
Lightboxを利用してWikiやブログの機能を向上させること
本ページで解説した通りです。| 筆者が望むこととは、ブログも、Wikiも、通信ストレス無く、オリジナルサイズの美しい(?)画像を、みんなが配信することができることです。 みんなが大型画像を自力で配信することに喜びを感じて欲しいと思います。 |
| 戻る | Lightbox Plus を使ってみる | ちょっと試しに Lightbox を利用してみるか | サムネイル画像の重要性と作成方法について |
コメント(2) ｜
2007年12月11日(火) 16:21:58 Modified by mmj_aos
添付ファイル一覧(全16件)
845acaca2502a4ac.png (2.14KB)
Uploaded by mmj_aos 2007年01月06日(土) 10:15:52
Uploaded by mmj_aos 2007年01月06日(土) 10:15:52
4a3a76cce607e3c0.png (2.22KB)
Uploaded by mmj_aos 2007年01月06日(土) 10:10:27
Uploaded by mmj_aos 2007年01月06日(土) 10:10:27
dbc2e39ce4e36e49.pdf (14.59KB)
Uploaded by mmj_aos 2006年12月29日(金) 11:11:45
Uploaded by mmj_aos 2006年12月29日(金) 11:11:45
4b185a0b22c56567.pdf (16.63KB)
Uploaded by mmj_aos 2006年12月28日(木) 12:39:34
Uploaded by mmj_aos 2006年12月28日(木) 12:39:34
4373d2fe89634d09.pdf (11.13KB)
Uploaded by mmj_aos 2006年12月26日(火) 10:55:37
Uploaded by mmj_aos 2006年12月26日(火) 10:55:37
1b3b274f8c3a4207.PNG (7.57KB)
Uploaded by mmj_aos 2006年12月23日(土) 10:45:35
Uploaded by mmj_aos 2006年12月23日(土) 10:45:35
1a7f529b06f4fb03.jpg (2.81KB)
Uploaded by mmj_aos 2006年12月21日(木) 15:29:38
Uploaded by mmj_aos 2006年12月21日(木) 15:29:38
3d49263b0fcfdac1.jpg (36.71KB)
Uploaded by mmj_aos 2006年12月21日(木) 15:29:38
Uploaded by mmj_aos 2006年12月21日(木) 15:29:38
b393b10fb4a18eab.gif (371B)
Uploaded by mmj_aos 2006年12月21日(木) 14:58:12
Uploaded by mmj_aos 2006年12月21日(木) 14:58:12
961122a233992c16.gif (307B)
Uploaded by mmj_aos 2006年12月21日(木) 14:58:12
Uploaded by mmj_aos 2006年12月21日(木) 14:58:12
114727cc1d5a6573.gif (354B)
Uploaded by mmj_aos 2006年12月21日(木) 14:58:12
Uploaded by mmj_aos 2006年12月21日(木) 14:58:12
8dda62255d9c60ed.gif (305B)
Uploaded by mmj_aos 2006年12月21日(木) 14:57:26
Uploaded by mmj_aos 2006年12月21日(木) 14:57:26
b177045f8be1dda5.gif (2.70KB)
Uploaded by mmj_aos 2006年12月21日(木) 14:57:25
Uploaded by mmj_aos 2006年12月21日(木) 14:57:25
3ac73a9cc21a78e3.gif (979B)
Uploaded by mmj_aos 2006年12月21日(木) 14:57:25
Uploaded by mmj_aos 2006年12月21日(木) 14:57:25
60e4f3ba3823beb5.gif (222B)
Uploaded by mmj_aos 2006年12月21日(木) 14:57:25
Uploaded by mmj_aos 2006年12月21日(木) 14:57:25
90b2c8283d102ad9.gif (43B)
Uploaded by mmj_aos 2006年12月21日(木) 14:57:25
Uploaded by mmj_aos 2006年12月21日(木) 14:57:25