アファメーションで独立・起業・夢実現。「いきなり！社長宣言！！」-“夢は口に出すことで実現する！”というアファメーション：ライブラリー
2010年3月28日
最新版のjQueryとThickboxの組み合わせでrel属性のグルーピングができないエラーと回避方法。
夢実現のアファメーションを実践する起業家にもっとも読まれているブログは？
jQueryとThickbox。
普段から何かと便利なAjaxライブラリのjQuery。
プラグインも豊富で、サイトにちょこっと何か一味加えたり、便利な機能を追加したりする場合に重宝しています。
んで、古くからある有名なプラグインのひとつに「Thickbox」があります。
使い方は簡単！でも...
画像や外部のHTMLをページ遷移することなく表示させるギャラリー系のプラグインで、軽快な動きと簡単な設置方法のおかげで多くのサイトで利用されています。
基本的に画像ギャラリーであれば、コードを読み込んで、
<link rel="stylesheet" href="thickbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="thickbox.js"></script>
画像に直リンクをして、そのaタグに「class="thickbox"」を記述するだけ。キャプションを付けたい場合はタイトル属性を記述。
<a href="hoge.jpg" class="thickbox" title="ほげ">ほげの画像</a>
もし、複数の画像を表示する場合、rel属性でグルーピングすると、prev,nextが表示されて、画像を切り替えることができるという機能もあります。
rel属性でグルーピングができない！
んが！
実はThickboxの開発はずいぶん前に終了（？）していてver.3.1でストップしています。
それに対して、大元のライブラリ「jQuery」はどんどん進化していて、現状の最新ver.は1.4.2です。（10/03/26現在）
で、ここで注意。
実は、ThickboxとjQueryのバージョンの組み合わせによっては、このrel属性によるグルーピングができない（エラー）という現象が起こってしまうのです。
※relをつけずに画像単体であれば問題なし。
いろんなサイトで利用しているThickboxだけに、そりゃ困る！という人も多いのでは？
（僕は困りました。ｗ）
ということで、ググッと探してみると、こちらのサイトでThickboxの修正方法がありました。
修正方法は簡単。「thickbox.js」の79行目付近、
TB_TempArray = $("a[@rel="+imageGroup+"]").get();
を
TB_TempArray = $("a[rel="+imageGroup+"]").get();
と書き換えるだけ。（※ようは@を削除するだけ。）
上記修正を加えたthickbox.jsと最新版のjQuery（ver.1.4.2）との組み合わせで動かしてみたところ、ちゃんとrel属性でグルーピングすることができました！パチパチ！！
この記事に関連する（かもしれない）書籍
投稿者 kuro : 2010年3月28日 16:42 | ID:821
