SexyLightBox v2.3.4(JQueryバージョン)の使い方。

LightBoxがSexyになったようです。
デモページ
mootoolsバージョンはコチラ⇒
動画・画像・テキストが自由に表示できるAjax Sexy LightBox 2.3を導入してみた (mootools バージョン)


「幼児用キャラクター下着(通称:かぼちゃパンツ)等の商品ページで使うのに、HTMLタグにSexyって入れると実装者がロリコンペドかと思われかねない!」
という被害予定妄想に基づきタグの要素に使う文字列を sexylightbox から slbにした。



必要なモノ
・SexyLightBox(ダウンロード
jQuery 1.3.2(ダウンロード
jQuery Easing (ダウンロード)(*jQuery UI 1.7.2のEffects Coreに入ってる)


・HTMLヘッダ

<!-- jQuery -->
<script type="text/javascript" src="/test/js/jquery.min.js"></script>
<!-- jQuery Easingを含むEffectsのCore -->
<script type="text/javascript" src="/test/js/jquery-ui.effects.core.min.js"></script>
<!-- jQuery用SexyLightBox -->
<script type="text/javascript" src="/test/js/jquery.sexylightbox.js"></script>
<!-- SexyLightBoxのCSS -->
<link rel="stylesheet" href="/test/css/jquery.sexylightbox.css" type="text/css" media="all" /> 


<!-- 初期化オプション
  find:      デフォルトはsexylightbox。
             該当<a/>タグのrelアトリビュートにココで設定した値を使用するとSexyLightBoxになる。
  color:     デフォルトはblack。
             blackかwhite、または自分で作ったデザイン。
             スペイン語で使用したい方はblanco(白)かnegro(黒)
  imagesdir: デフォルト無し。
             SexyLightBoxで使うボタン画像ファイル等の場所。
             {imagesdir}/{color}/画像.gif といったように読みます。
             *dirオプションを使ったサンプルを見ましたが、
               dirだけ設定するとloading画像・404画像が読めないので注意。
  *その他オプションのデフォルトはSexyLightBoxのJSの頭を読んでください
-->
<script type="text/javascript"> 
  $(document).ready(function(){
    SexyLightbox.initialize({find:'slb', color:'white', imagesdir: '/test/images/sexyimages'});
  });
</script> 


・HTMLボディ部

<a rel="slb[gallery]" href="/test/images/320x240.jpg" title="TITLE&nbsp;&yen;5,000&lt;br/&gt;SPEC">
  <img src="/test/images/70x52.jpg" alt="" />
</a>
<!--
  <a/>: 実画像
    rel:   findオプションで定義した値。グループ化(Nextボタンを使う場合)する場合は配列にする。
    href:  LightBoxで表示する画像。
    title: LightBoxで表示する説明文。
  <img/>: サムネイル画像
-->
</a>

*注意
実画像が同一のものをグルーピングすると、同一画像内の一つしかナビゲーションでは表示されない。
気に喰わなければsexylightbox.jsの545行あたりを変更