LightBoxのJQuery版 jQuery lightBox plugin

jQuery lightBox plugin

jQuery lightBox pluginは、LightBox 2のjQuery版です。

LightBox 2はPrototypeで動いているのですが、それをjQueryで動かせちゃうですよ。
自分はほとんどjQueryしか使わないので、LightBoxを使う時はこの方法で使用しています。

…ここからが続き

jQuery lightBox pluginの使い方

  1. jQuery lightBox pluginダウンロード
  2. 解凍したファイルにある「js」「css」「images」フォルダをアプロード。
  3. headタグ内に下記ソースを記述
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<script type="text/javascript">
$(function() {
  $('#gallery a').lightBox();
});
</script>

HTMLソース例

<div id="gallery">
<ul>
<li><a href="photos/image1.jpg" title="画像1のタイトルが入ります。"><img src="photos/thumb_image1.jpg" width="72" alt="" /></a></li>
<li><a href="photos/image2.jpg" title="画像2のタイトルが入ります。"><img src="photos/thumb_image2.jpg" width="72" alt="" /></a></li>
<li><a href="photos/image3.jpg" title="画像3のタイトルが入ります。"><img src="photos/thumb_image3.jpg" width="72" alt="" /></a></li>
<li><a href="photos/image4.jpg" title="画像4のタイトルが入ります。"><img src="photos/thumb_image4.jpg" width="72" alt="" /></a></li>
<li><a href="photos/image5.jpg" title="画像5のタイトルが入ります。"><img src="photos/thumb_image5.jpg" width="72" alt="" /></a></li>
</ul>
</div>

「id="gallery"」となっている部分と「('#gallery a').lightBox();」を同じ名前にすれば、どんな名前にしても大丈夫です。

demo page

追記:6/20 画像単体で呼び出し

$(function() {
  $('.gallery1 a').lightBox();
});
$(function() {
  $('.gallery2 a').lightBox();
});
$(function() {
  $('.gallery3 a').lightBox();
});
$(function() {
  $('.gallery4 a').lightBox();
});
$(function() {
  $('.gallery5 a').lightBox();
});

XHTHML

呼び出したい画像を個別に class="gallery1" class="gallery2" ... とつけていくしかないと思います。

demo page

Comments

maniwac

maniwac

はじめまして。

lightbox 2.0を設置してみたのですが、HP上ではポップアップも無く、全く動作しません。ローカルでのテストでは動作するのですが・・・。
この場合はどのような可能性が考えられますでしょうか?
お手数をおかけいたしますが、ご教示ください。

2011年06月21日 15:18

oti

oti

MIYAさん

ご回答ありがとうございます。

教えていただきましたように再度画像のパスを確認させて
いただきました。画像のファイルネームの拡張子が
小文字だったためこちらを修正したところ、きちんと
動作しました。

すごく基本的なことでありながらご丁寧に教えていただき
本当にありがとうございました。

2011年04月08日 11:54

MIYA

MIYA

oti さん

ローカル上で動き、HP上で上手くいかな事から恐らく画像へのパスの記載にミスがあるのではないでしょうか?

loadingのマークが出る事から lightBox は動作していると思うのですがどうでしょうか?

恐らく html の a タグ内のクリック後の画像へのパスが間違っているだけな気がしますが、一度試してみて下さい。

2011年04月07日 17:56

oti

oti

はじめまして。HP作成の初心者です。
こちらのサイトを拝見して、jQuery lightBox pluginを設置させていただくことが出来ました。ありがとうございます。
ところがローカル上では動作が出来ているのですが、HP上にアップして実行すると動作しません。(画像が表示されず、loadingのマークが出たままになってしまいます。)

htmlに問題があるのか、cssまたはjsに問題があるのかがわからず手詰まりの状態です。

どのようにすればよいかお教えいただけませんでしょうか?

すごく基本的なことで申し訳ございません。

2011年04月07日 17:14

occ

occ

MIYAさん。
お返事ありがとうございます。

色変更できました!!
CSSとは気づきませんでした(^^;)

ありがとうございます

2010年11月26日 18:50

MIYA

MIYA

occさん。はじめまして。

jquery.lightbox.css の34行目、75行目

background-color: #fff; を任意の色に変更。

また、ダウンロード後 images フォルダに入っている画像も変更させた色で、作り直す必要があります。

2010年11月26日 10:30

occ

occ

はじめまして。
jqueryのlightboxとても便利です。

質問なのですが、lightboxのcontainerの部分?(白地の所)の
色はどのように変えるのでしょうか?

2010年11月25日 18:49

okome

okome

MIYAさん
思い通りにできました。
うれしいです。本当にどうもありがとうございます!

2010年10月05日 11:39

MIYA

MIYA

okome さんはじめまして!

デモページで言う「jquery.lightbox-0.5.js」内

25行目
overlayBgColor: '#000',
こちらの記述してある色を変更する事で背景色を変えれます。

26行目
overlayOpacity: 0.8,
こちらは背景の透過する為の透明度にありますので、透明度を変えたい際はこちらも変更して下さい。
0.1~1.0 など変更する事が可能です。

2010年10月04日 14:55

okome

okome

はじめまして。
丁寧でわかりやすくて
参考にさせていただいております。
jQuery LightBoxもすんなりできました。
どうもありがとうございます!

1点質問ですが、LightBox背景の色を黒から別の色に変更したいのですが、どこを変更すればいいでしょうか。。

jquery.lightbox-0.5.cssで探してみたのですが、
わかりませんでした。。
初歩的な質問ですみませんが、
教えていただけると助かります。
どうぞよろしくお願いします。

2010年10月03日 14:48

yauko

yauko

MIYAさん

ご返答ありがとうございます。
そうなのですね・・・PCの問題では無いのですね。

表示がおかしいPCが2台あるのですが、いずれもインターネットエクスプローラーを使用しており、
バージョンは「7」でした。

他のソフトとの兼ね合いで、バージョンが上げられられないのですが、JQueryは「8」から対応なのでしょうか?
それともタグがどこか間違ってるのでしょうか?

恐れ入りますが助言お願いします。

2010年09月21日 19:59

MIYA

MIYA

yaukoさん。

PCによって表示が違うとの事ですが、PCによって見るブラウザやそのブラウザのバージョンはどうでしょうか?

少なくともPC側の問題とは考えにくいと思います。

2010年09月17日 18:04

yauko

yauko

はじめまして。HPサイトを作成中の初心者です。
質問があり、書き込みさせて頂きます。

設置は出来たのですが、PCによって写真が開いたときの背景が、エラーになる場合があります。
画面の約上半分のみ背景が黒くなります。それ以下は元の画面が表示されています。

これは、PC側の問題なのでしょうか?
助言よろしくお願いします。

2010年09月14日 11:21

gentle_ak

gentle_ak

いつも勉強させて頂いてます。
初歩的な質問ですが、このプラグインのライセンスはどのようになっているのでしょうか?
creative commons を見る限りではライセンスを表記しなければならないように見られます。
サイトに実装しようと思っていますが、そのあたりわかれば助かります。

2010年07月02日 02:09

mizuno

mizuno

MIYAさん!たびたびすいません!
直りました!!
自分の記述にミスがありました。
本当にいろいろありがとうございました。

2009年10月23日 16:37

MIYA

MIYA

mizunoさん返事が遅くなり申し訳ございませんでした。

表示前の事だとmizunoさんが記述しているCSSの要素が影響しておりますのでソースを見てみないと具体的に分からないのですが、lightbox を表示させようとしている部分のimg かpかli要素にpadding-bottom、margin-bottomに指定があるせいだと思われます。

2009年10月23日 12:41

mizuno

mizuno

MIYAさん、ご返事ありがとうございます。
メールアドレス記入に漏れがありましたので、再投稿致します。お手数をお掛けして申し訳ありません。


lightbox表示前です。

2009年10月20日 13:15

MIYA

MIYA

mizunoさんはじめまして^^

>各サムネイルの下に空白…
とありますが、こちらは LightBox 表示前、表示後どちらの事を示しているんでしょうか?

2009年10月18日 16:37

mizuno

mizuno

はじめまして。非常に参考になりました。しかしどうしても一点わからないことがあります。どうしても各サムネイルの下に空白ができてしまうのですが、これをなくす方法はありますか?

2009年10月18日 04:28

MIYA

MIYA

kacoさん、現(09年9月1日)ダウンロードした状態ですと、jsフォルダに入っている
jquery.lightbox-0.5.js の30行~34行目の事です。

2009年09月01日 20:52

kaco

kaco

anarcさんと同じ、問題なのですが、30行〜34行目を探しても、そういったパスは見当たらないのですが・・・どこですか?

2009年09月01日 19:54

anarc

anarc

すみません。
そこだろうと何回も見直していたのに。。
超初歩的な間違いで、フォルダ名間違えてました。。
ありがとうございました。
今後ともタメになる情報を発信してください。

2009年06月26日 17:04

MIYA

MIYA

anarcさん

画像が表示されないのはlightbox.js
30行~34行目に記載されている画像へのパスが違うからだと思います。
lightbox.js から CLOSE などの画像へのパスを見直してみて下さい。

2009年06月26日 15:37

anarc

anarc

分かりやすい説明感謝します。
おかげさまで難なく設置できました!

しかし、1つだけうまくいきません。

拡大されるまでの時間表記の丸や、
「×CLOSE」や「NEXT」が表示されません。

どうしたら良いか、出来ればご教授いただけませんか?

2009年06月26日 12:16

kkm

kkm

解決致しました。ありがとうございました。

2009年06月20日 23:58

MIYA

MIYA

少し手間だとは思いますが、個別で読み込む以外方法はないような気がします…

詳しくは追記しておきましたのでご覧下さい。

2009年06月20日 08:57

kkm

kkm

数個のサムネイルを同一ページに配置し、それぞれをクリックすると、数枚の画像がNext・Previewで表示されますが、各サムネイル毎に、複数の違う画像を表示させるには、どの様にカスタマイズするのでしょうか?

2009年06月19日 15:11

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article