jquery - jqueryツールは問題/競合をオーバーレイします

Question

jQuery Toolsオーバーレイをいくつかの単純なコードと組み合わせようとしていますが、オーバーレイは機能しません。

以下のように、いくつかのdivコンテナがあります。各関数を実行し、「right-margin：0」を追加し、3つおきの項目にブレークをクリアします。

<div class="essay-thumb">
 <a href="link.html"><img src="src.jpg" alt="Alt text" width="210" height="140" /></a>
 <h5>Header Text h5</h5>
</div>
<div class="essay-thumb">
 <a href="link2.html"><img src="src2.jpg" alt="Alt text 2" width="210" height="140" /></a>
 <h5>Header Text h5 2</h5>
</div>
...

$('.essay-thumb').each(function(i){
 if ( ((i+1)%3) == 0 ) {
  $(this).css('margin-right', 0).after('<br class="clear" />');
 }
})

ここでは、rel属性を追加し、imgのalt属性のコンテンツを取得して、<span class = "tooltip"> <p> ... </ p> </ span>タグの関連するdivコンテナーに追加し、不透明度を設定します。 css経由で0に。

$('#content .essay-thumb').each(function(i){
 $(this).find('a').attr('rel', '#modal'+(i+1) );
 var title = $(this).find('img').attr('alt');
 var link = $(this).find('a').attr('href');
 $('<span class="tooltip"><\/span>').appendTo($(this))
 $('<p><\/p>').text(title).appendTo($(this).find('.tooltip'));
})

次に、ホバー時に不透明度を0.8にアニメートし、0に戻します。

$('#content .essay-thumb').hover(function(e) {
  $(this).find('.tooltip').stop().animate({opacity: .8}, 500);
 }, function () { 
  $(this).find('.tooltip').stop().animate({opacity: 0}, 200);
 })

最後に、クリック時にオーバーレイをトリガーする行があります。しかし、これは機能しません、なぜだろうか？私が見る限り、オーバーレイイベントは関連するタグに添付されていません。どんな助けでも大歓迎です。

$("#content .essay-thumb a[rel]").overlay({ expose: '#000', effect: 'apple' });