ブログFC2ブログ
日本で一番使われているFC2ブログで あなたもブログをはじめよう!
FC2動画 FC2動画
自分で撮った動画を公開!共有!携帯でも利用できる!!
FC2プロフFC2プロフ
自己紹介ページをすぐに公開できるサービス。 今すぐプロフを作ってみんなに見てもらおう!
FC2アフィリエイト
FC2ブログを紹介してお金がもらえる
FC2アフィリエイトに登録しよう!

TOP > 大きな疑問コーナー > title - Lightbox JS v2.0

Lightbox JS v2.0

Lightbox JS v2.0はサムネイル画像をかっこよく表示させることができます。
画像をクリックすると背景が暗くなって、まず画像の形が決まって画像が表示されるようになっています。画像を閉じるには右下の×をクリックすると閉じることができます。

言葉だけではわかりにくいので見本を作りました。  testLightbox JS v2.0見本20061018041830.gif

Lightbox JS v2.0見本にある画像をクリックしてみて下さい。また複数の画像を連続して表示させることもできます。画像の右側にマウスを持っていくと[next]の文字ができるのでクリックすると次の画像に変わります。戻りたい時は画像の左側にマウスを持っていくと[prev]がでるのでクリックすると戻ります。  

つくり方

1.リンク先の真ん中ぐらいにあるDownload:からLightbox JS v2.0をダウンロードします。

2.ダウンロードすると3つのフォルダ(css・images・js)とindex.htmlが入っています。

3.まずcssのフォルダのなかにあるlightbox.cssを開きます。そして真ん中ぐらいにある
prevLink, #nextLink{
width: 49%;
height: 100%;
background: transparent url(file/images/blank.gif) no-repeat; /* Trick IE into showing hover */
display: block;
}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(file/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(file/images/nextlabel.gif) right 15% no-repeat; }
を探してurl(../images/の..の部分をfileに3箇所とも書き換えます。

4.次にjsのフォルダのなかにあるlightbox.jsを開きます。(先にメモ帳を開いておいて、その中にマウスでlightbox.jsを移動させれば開くと思います。)そして上の方にある
//
// Configuration
//
var fileLoadingImage = "file/loading.gif";
var fileBottomNavCloseImage = "file/closelabel.gif";
を探してimagesfileに2箇所とも書き換えます。

5.書き換えができたら3つのフォルダ(css・images・js)に入っているファイルを全部、ブログのファイルアップロードを使ってアップします。

6.アップしたら、管理画面のテンプレートの設定→編集→HTMLの編集を開いて上の方にある</head>というタグを探します。Ctrl+Fをおして検索窓を使って探すと見つけやすいです。
見つかったらそのタグのすぐ上に、
<script type="text/javascript" src="file/prototype.js"></script>
<script type="text/javascript" src="file/scriptaculous.js?
load=effects"></script>
<script type="text/javascript" src="file/lightbox.js"></script>
<link rel="stylesheet" href="file/lightbox.css" type="text/css" media="screen" />
を記入します。できたら更新を押して保存して下さい。
これで完成です。

7.実際に画像を使いたい時は、
<a href="http://blog数字.fc2.com/○/○○○/file/.jpg" target="_blank"><img src="http://blog数字.fc2.com/○/○○○/file/.jpg" alt=".jpg" border="0">
と記入しますがtarget="_blank"の部分をrel="lightbox" title="ここに書いた文字が左下に表示される"に書き換えるとLightbox JS v2.0を使って画像を見せる事ができます。

8.複数の画像を連続して表示する方法は、まず画像をブログにアップロードする時に連続させたい画像の名前を統一してその後ろに数字を1から順番に入れます。

見本の犬の画像の名前はwan-1・wan-2・wan-3という様に半角英数字を使った名前-数字にしてアップロードします。

そして連続して表示させたい画像全てのtarget="_blank"の部分をrel="lightbox[半角英数字を使った名前]" title="ここに書いた文字が左下に表示される"と書き換えます。[半角英数字を使った名前]の部分は連続させるすべての画像で同じ名前を入れてください。画像別にバラバラにすると連続表示できません。
つまり3枚の画像を連続して表示させるには、
<a href="~file/○○○-1.jpg" rel="lightbox[半角英数字を使った名前]">1枚目の画像</a>
<a href="~file/○○○-2.jpg" rel="lightbox[半角英数字を使った名前]">2枚目の画像</a>
<a href="~file/○○○-3.jpg" rel="lightbox[半角英数字を使った名前]">3枚目の画像</a>
と記入します。

※Lightbox JS v2.0よりちょっとシンプルなLightbox JSもあります。ただしこちらは連続表示ができません。
Lightbox JSの方を使いたい人は小粋空間さんのLightbox JS で画像を表示するでやさしく説明されているのでそちらを見てください。



◆FC2ブログの事でどうしても疑問が解決しない人はFC2ブログ ユーザーフォーラムへ。
★アフィリエイト人気ランキング★  [アフィリエイトとは?]
リンクシェア
の詳細はこちら
エーハチネット
の詳細はこちら
バリューコマース
の詳細はこちら
アフィリエイト リンクシェア ブログ 携帯対応 成果報酬 広告 テンプレート ブログパーツ
コメント
Lightbox広がる予感
仕事でLightboxをクライアントに勧めてます。
おもにPOPUP代用ですが、検索してたらたどり着きました。
勉強になりました。
dame3212さんへ
LightboxはPOPUPされるのがスタイリッシュでいいですよね!!
このサイトにたどりついてくれてありがとうございました!お仕事頑張って下さい!!
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
鍵コメさんへ
記事で取り上げていただいてありがとうございました!
はじめましてっ
いい画像表示方法ないのかとFC2ではあきらめかけていたところでした。
参考にさせていただいて、がんばって導入しますっ
みうみうさんへ
Lightboxはかっこいいので是非頑張ってみて下さい!!
はじめまして
いつも大変参考にさせていただいてます。
カスタマイズ初心者でも、簡単に出来ちゃうほどの手取り足取りのやさしい記事に、本当に感謝です。
今回も、素敵な画像表示が出来て、本当にうれしいです。

。。。Lightbox連続表示出来たのは良いですが、PREVや>や<やNEXTが表示されてくれません。。。なんでだろう。。。?変なとこまで、弄くったんでしょうかねぇ(汗)

これからも、どうぞよろしくお願いいたします。楽しみにしております♪
mさんへ
参考にしていただいている様でありがとうございます。
Lightboxは本当に素敵な画像の表示方法ですよね!

PREVや>や<やNEXTが出ないのはcssかjsの該当部分を間違えて触ってしまったのか、他にもjavascriptを使っていて干渉してしまっているのかだと思います。

こちらこそよろしくお願い致します!
ヒントありがとうございます!
お返事ありがとうございます!
すべてのファイルを、やり直しました。
新たに、ファイル類もアップしなおしました。
パスも絶対パスに、直して見ました。

プラグインが何か影響してるのかな?と思いまして、すべて取り払いました。
。。。なのに相変わらずなんです。。。
ううう、はやくここクリアして、ブログ大改装したいのに~

もう 一回粘ってみます!!
くじけそうな時、また よろしくお願い致します。有難う御座いました~
mさんへ
ウーン、なんでなんでしょうね??テンプレートとの相性が悪いのかも知れませんね。
カスタマイズしていなくても最初からテンプレートにスクリプトが使ってあるものもありますからね。他のテンプレではすんなりできたらテンプレが原因かも知れませんね。
でも意外とゴールは近いかも知れないので、もうちょっと頑張ってみて下さい!
有難う御座います
るんばば様 出来ました!
↑あれから、テンプレートにスクリプトが組み込まれてなさそうなモノに変え、
また一からやり直して、目を皿のようにして、にらめっこしていたらCSSファイルの方に、失敗を発見しました。
(2度目のファイルアップ時の失敗箇所なので、1度目がなぜスムーズに出来なかったのか、未だ謎なのですが(汗))

るんばば様の「意外とゴールは近い」と言う御言葉に本当に励まされました!
有難う御座いました。これで大改装に入れます!
これからも、どうぞよろしくお願い致しますっっ
本当に、本当に有難う御座いました~m(_ _)m

mさんへ
いやぁ~良かったですネ!!おめでとうございます。
諦めなくてホントに良かったですね!!確かに、きっちりやってたはずなのになぜダメだったの??ということは結構自分もありますね。たぶん、上手くできなくてあせったり動揺したりしているから自分では小さなミズに気づいていないだけだと思うことにしています。
粘り強く根気よくやれば意外にできるものなんですよね。こちらこそよろしjくお願いします!!
うぅ・・・。
http://blog.fc2.com/forum/viewtopic.php?p=77119#77119
FC2ブログ ユーザーフォーラムに質問したんですがこちらに質問せよ!
って感じで言われちゃったんで質問します。

Lightbox JS v2.0の最新版を導入したのですが、
画像を拡大するまではできるのですが、
戻ったとたんページの一番上に戻ってしまいます。

なぜでしょうか?
この記事のトラックバックURL

http://rgrg.blog61.fc2.com/tb.php/396-a751de1a   

FC2BlogでLightbox2
Lightbox2使用-----色々やってみたんですが、どうもjsをうまく読んでいないみたいです。ローカルのapache上では簡単に動くのにねぇ・・・。ということで、また日を改めて色々調べていこうと思います。出
仕事で作った使えるWebの技サンプルを、ブログに入れてみました。
ThickBox 3とは、(以下「マイコミジャーナル」さんの記事から引用)Ajax(非同期通信処理)を利用して画像を表示するライブラリです。ThickBox 3はAjax(非同期通信処理)を利用して画像を表示す...
Lightbox2
maharada.netを見てからやりたくて仕方なかった、画像拡大Javascript。 クリックすると、画面遷移しないで画像が大きくなる機能。 クリックしてみて...

Template Designed by DW99