jQueryでLightBoxを実現するjavascript「jQuery Lightbox Plugin (balupton edition)」
｜
｜
｜
｜
｜
｜
LightBoxをjQueryで実現するJavaScriptは以前jQueryでLightBoxを実現するjavascript「jQuery lightBox plugin」で紹介しましたが、今回紹介する方が高機能で柔軟性があるかもしれません。
jQuery Lightbox Plugin (balupton edition)です。
使用方法
jQuery Lightbox Plugin (balupton edition)からjquery.lightbox.jsとjquery.lightbox.packed.cssを、jQueryからjquery.jsをダウンロードします。
次にhead内に以下を加えます。
<script type="text/javascript" src="http://yourdomain/jquery.js"></script>
<script type="text/javascript" src="http://yourdomain/jquery.lightbox.js"></script>
<link type="text/css" rel="stylesheet" href="http://yourdomain/jquery.lightbox.packed.css">
あとは画像をいつものLightBoxのように記述します。
<a href="画像パス" title="タイトル" rel="lightbox[]">
<img src="画像サムネイル">
</a>
その他、js内で調整可能です。
※jquery.lightbox.jsの460行目あたり。
jQueryでLightBoxを実現するjavascript「jQuery Lightbox Plugin (balupton edition)」サンプル
(追記：2008/9/8)
コメントいただきましたように、jsファイルを無駄に書き換えなくてもいけるようです。
<script type="text/javascript">
$(function(){
$.Lightbox.construct({
show_linkback: false,
text: { image: 'Photo' }
});
});</script>
記事作成：2008年08月26日
前の記事：ビジュアル面で最高のタイムピッカーJavaScript「nogray_time_picker」
次の記事：スクロールしてもついてくる！のJavaScript「jQuery Scroll Follow」
関連記事
人気記事
最新記事RSS
- でっかいメニューをJavaScriptで作る「Cut & Paste jQuery Mega Menu」
- mootoolsで3Dメニュー「JavaScript 3D Cube Menu」
- これはすごい！テキストに影を付け印象的にする「CSS text-shadow Fun」
- MVPenでアナログの良さを考え直す。
- 第3回「マネタイズHACKS」に参加してみた。
- div要素の幅を伸縮自由にするJavaScript「Ingeny Splitter」
- jQueryでメニューをわかりやすくする「Side Navigation Tooltip / Popup Bubble」
- 入力を促す文字をフォームに表示するJavaScript「JQUERY.FIELDTAG.JS」
- iPhoneライクにスクロールさせるJavaScript「OverScroll」
- twitterタイムラインをJavaScriptで表示「jQuery jqtwitter」