fancyBoxとjQuery削除ツールの競合

Question

誰かが私を助けてくれるかどうかは疑問です。

thisイメージギャラリーページを作成するスクリプトをまとめました。私はスライドショーを作成するために 'fancyBox'を使い、削除機能を提供するために適応した​​を元にしたjqueryデモを使用しています。

私は自分のコードのこれらの行の周りに嘘を持っている問題：

<ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix"> 

     <?php for ($i = 0; $i < $descriptions->documentElement->childNodes->length; $i++) : 
          $xmlFile = $descriptions->documentElement->childNodes->item($i); 
          $name = htmlentities($xmlFile->getAttribute('originalname'), ENT_COMPAT, 'UTF-8'); 
          $description = htmlentities($xmlFile->getAttribute('description'), ENT_COMPAT, 'UTF-8'); 
          $source = $galleryPath . rawurlencode($xmlFile->getAttribute('source')); 
          $thumbnail = $thumbnailsPath . rawurlencode($xmlFile->getAttribute('thumbnail')); 
        ?> 

        <li class="ui-widget-content ui-corner-tr"> 
     <a class="fancybox" rel="allimages" title="<?php echo $name; ?>" href="<?php echo $source; ?>"><img src="<?php echo $thumbnail; ?>"alt="<?php echo $description; ?>" width="96" height="72"/> </a><a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a> 
     <?php endfor; ?> 
     </li> 
     </ul> 

これらの線:<ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix">と<li class="ui-widget-content ui-corner-tr">とそれぞれの終了タグを含めて、「fancyBox」機能は動作しません。それらがなければ、それはうまく動作します。

私は比較的jQueryを使い慣れています。私は数日間この作業を続けてきましたが、解決策を見つけることができません。

私はちょうど誰かがこれを見て、私が間違っている場所を教えてもらえるかどうか疑問に思いました。

追加情報については、下記の 'fancyBox'スクリプトを追加しました。

<script type="text/javascript"> 

      $('.fancybox').fancybox({ 
       openEffect : 'elastic', 
       closeEffect : 'elastic', 

       padding : 20, 
       fitToView : true, 

       prevEffect : 'none', 
       nextEffect : 'none', 

       closeBtn : false, 
       arrows : false, 

       helpers : { 
        title : { 
         type : 'inside' 
        }, 
        buttons : {} 
       }, 

       afterLoad : function() { 
        this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : ''); 
       } 
      }); 


</script> 

多くの感謝と種類について

Answer 1

：

ギャラリーはjqueryの-UIからdisplay:noneセットを持っています例。

<ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix"> 


<ul id="gallery" class="ui-helper-reset ui-helper-clearfix"> 

Answer 2

たぶん、あなたは前に</li>ない後​​を配置する必要があります。

あなたはFancyboxがあなたの削除ツールは

// resolve the icons behavior with event delegation 
$("ul.gallery > li").click(function(event) { 
var $item = $(this), 
$target = $(event.target); 
if ($target.is("a.ui-icon-trash")) { 
    deleteImage($item); 
} else if ($target.is("a.ui-icon-zoomin")) { 
    viewLargerImage($target); 
} else if ($target.is("a.ui-icon-refresh")) { 
    recycleImage($item); 
} 
return false; 
}); 

この機能を使用するスクリプト

Answer 3

はので、これはfancyboxにバインドされた子要素<a class="fancybox">上の任意のアクションを妨げている初期化に書いた方法を表示します。

たぶん、あなたは次のように$taget.is("a.fancybox")場合return falseを迂回する別の条件を追加することができます。ただ、将来的にこの問題を持っている人のため

// resolve the icons behavior with event delegation 
$("ul.gallery > li").click(function(event) { 
var $item = $(this), 
$target = $(event.target); 
if ($target.is("a.ui-icon-trash")) { 
    deleteImage($item); 
} else if ($target.is("a.ui-icon-zoomin")) { 
    viewLargerImage($target); 
} else if ($target.is("a.ui-icon-refresh")) { 
    recycleImage($item); 
} else if ($target.is("a.fancybox")) { 
    // do nothing and let fancybox to play 
} else { 
    return false; 
} 
});