notizbloc / kentymmt

前回はCookie機能&アニメーション&スクロール追随付きアコーディオンメニューについて書きましたが、jQuery.jsはprototype.jsと共存出来ない事が判明。lightboxも使っていたので動かなくなってしまいました。が、調べてみるとjQuery.jsでlightboxが使えるプラグインがあったので紹介します。

1. ダウンロード

http://leandrovieira.com/projects/jquery/lightbox/

からzipをダウンロードします。（2008/03 最新バージョン 0.4） js, css, images内のファイルを適当な所に置きましょう。画像へのリンクはjquery.lightbox-0.4.jsの27行目あたりからの

// Configuration related to images
imageLoading: ‘images/lightbox/lightbox-ico-loading.gif’, // (string) Path and the name of the loading icon
imageBtnPrev: ‘images/lightbox/lightbox-btn-prev.gif’, // (string) Path and the name of the prev button image
imageBtnNext: ‘images/lightbox/lightbox-btn-next.gif’, // (string) Path and the name of the next button image
imageBtnClose: ‘images/lightbox/lightbox-btn-close.gif’, // (string) Path and the name of the close btn
imageBlank: ‘images/lightbox/lightbox-blank.gif’,

を書き換えればok です。

2. head内に記述

<script type=”text/javascript” src=”http://hoge/jquery.js“></script>
<script type=”text/javascript” src=”http://hoge/jquery.lightbox-0.4.js“></script>
<link rel=”stylesheet” type=”text/css” href=”http://hoge/jquery.lightbox-0.4.css” media=”screen”>
<script type=”text/javascript”>
$(function() {
$(‘#id名 a’).lightBox(); //(‘ ‘)内を変更することができます e.g.) a[@rel*=lightbox]、a.lightboxなど
});
</script>

と書きます。

<script type=”text/javascript”>
$(function() {
$(‘#id名 a’).lightBox(); //(‘ ‘)内を変更することができます e.g.) a[@rel*=lightbox]、a.lightboxなど
});
</script>

の部分は例えばsettings.jsとか作って外部化しても大丈夫です（短いけど）

3. HTMLを記述

<div id=”id名”>
<a href=”大きい画像” title=”hoge”>
<img src=”サムネイル画像” alt=”hoge”>
</a>
</div>

みたいに書きます。id名をlightboxとかにしておけば分かり易いですね。 prototype.jsは削除して大丈夫です。

Tags: Ajax, CSS, Design, Javascript, jQuery, lightBox