jQueryを使用したlightbox系プラグインCeeBox

lightbox系で弱いのが、swfobjectを使っていなかったり、FLASHそのものの表示ができなかったり・・・

必要条件は、2つ。

  • jQueryを使っている
  • swfobjecを使っている

世界は広いから、絶対、すでに作っている人がいるはずで、それに乗っかろうと思って、いろいろ悩んでいたら、CeeBoxというのがあるよと、教えてもらった。(ありがと~)

よく見たら ThickboxとVideoboxのMashUpと書いてある。(今気づいたw)

欲しい機能が全部入ってる!
ということで、組み込んでみた。画像は、CeeBoxを使ったものを確認したけど、まだ、FlashとかYOUTUBEとか未確認のまま。

とりあえず、使い方をメモ

  • まず、次のように、htmlの<head>内に組み込みます。

<!-- jQueryライブラリ -->
<script type="text/javascript" src="http://www.3oclock.com/hello-world/js/user_jquery.js"></script>
<!-- CeeBoxスタイルシート -->
<link rel="stylesheet" href="/js/catcubed-CeeBox-25cd33e/css/ceebox.css" type="text/css" media="screen">
<!-- Flash用SWFObject -->
<script type="text/javascript" src="/js/catcubed-CeeBox-25cd33e/js/jquery.swfobject.js"></script>
<!--  CeeBox本体 -->
<script type="text/javascript" src="/js/catcubed-CeeBox-25cd33e/js/jquery.ceebox.js"></script>
<!-- CeeBoxで画像を拡大する条件を書いたJSファイル -->
<script src="/js/ceebox/global.js" type="text/javascript" charset="utf-8"></script>

  • また、最後のglobal.jsの内容は、次の通り。
    私の場合は、前のlightBox系プラグインがrel="lightbox"だったので、こうしました。
    この該当セレクタのバリエーションは、セレクタの記述方法(a[rel='lightbox'] という部分)を変更すること。
    参考:セレクタ - CSS2リファレンス

jQuery(document).ready(
 function(){
 // a タグでrel='lightbox'とあるもの
 $("a[rel='lightbox']").ceebox();
 }
);
 

あとは、次のような記述でOKです。

<a href="http://catcubed.com/2008/12/23/ceebox-a-thickboxvideobox-mashup/" rel="href"><img src="~"></a>

とりあえず、まだ、画像だけしかできていないので、ここまで。

そのうちSWFObjectを使用したFlash表示に対応させますね。

Index of all entries

Feeds
About

supported by TOGORU

Return to page top