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 ¥5,000<br/>SPEC"> <img src="/test/images/70x52.jpg" alt="" /> </a> <!-- <a/>: 実画像 rel: findオプションで定義した値。グループ化(Nextボタンを使う場合)する場合は配列にする。 href: LightBoxで表示する画像。 title: LightBoxで表示する説明文。 <img/>: サムネイル画像 --> </a>
*注意
実画像が同一のものをグルーピングすると、同一画像内の一つしかナビゲーションでは表示されない。
気に喰わなければsexylightbox.jsの545行あたりを変更