jQueryでLightBoxを実現するjavascript「jQuery lightBox plugin」

2007

11/27

Web2.0を個人レベルで実感させてくれたのが「LightBox」だと思います。
今では画像を表示する多くのブログで使用されています。
今回はこれをjQueryで実現したjQuery lightBox pluginを紹介します。
jLightBox

使用方法
jQuery lightBox pluginからファイル群をアップロードします。
<script type="text/javascript" src="http://yourdomain/jquery.js"></script>
<script type="text/javascript" src="http://yourdomain/jquery.lightbox-0.3.1.js"></script>
<link rel="stylesheet" type="text/css" href="http://yourdomain/jquery.lightbox-0.3.css" media="screen">
<script type="text/javascript">
$(function() {
$('#id名 a').lightBox(); //(' ')内を変更することができます e.g.) a[@rel*=lightbox]、a.lightboxなど
});
</script>

上記を記述したら、あとは指定したid内で、サムネイル画像に大きく表示させたい画像をリンクさせれば完成です。
<div id="id名">
<a href="大きい画像" title="キャプション">
<img src="サムネイル画像" width="" height="">
</a>
</div>

また既存のLightBoxにはなかった機能として以下のようなものがあります。
 ・オーバーレイの色変更:overlayBgColor: '#FFF'
 ・オーバーレイの透明度:overlayOpacity: 0.6
 ・文字1:txtImage: '画像'
 ・文字2:txtOf: 'の'
$(function() {
$('#gallery a').lightBox({
overlayBgColor: '#FFF',
overlayOpacity: 0.7,
txtImage: '画像',
txtOf: 'の'
}
);
});

jQueryでLightBoxを実現するjavascript「jQuery lightBox plugin」サンプル

このエントリーを含むはてなブックマーク はてなブックマークを見るこの記事をクリップ! コメントを見るYahoo!ブックマークに登録 このエントリーをdel.icio.usに追加するこのページを行き先登録 このページをniftyクリップに登録このページをBuzzurlに登録

前の記事:検索で使用したキーワードをハイライト表示するjavascript「searchhi.js」
次の記事:フォームで複数ファイルを送信するjavascript「Multiple file upload」


コメント投稿












jQueryでLightBoxを実現するjavascript「jQuery lightBox plugin」に関するコメントはまだありません。
ご遠慮なくコメントしてください。

この記事へのトラックバック:

トラックバック一覧

» 訪問者が好きなLightbox選択できるってほんとか?!:送信元 [ja]マイブログ[/ja][en]my weblog[/en]

メニューから好きなLightboxを訪問者が自由に選択できる試みです。それも埋め込みは超簡単です!!
詳細は訪問者が好きなLightbox選択できるってほんとか?!


Random Entry Images

[jQuery]FastFind Menu
カレンダー表示&日付選択させるjavascript「Fancy MooTools Date Picker」
jQueryベースの角丸javascript「JQuery Curvy Corners」
Live Thumbnail

Powered by Movable Type 4.1
RSSリーダーで購読

Copyright © skuare.net All rights reserved.