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腳本

Answer 3

你刪除工具使用此功能

// 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; 
}); 

所以這是防止必然的fancybox子元素<a class="fancybox">任何行動。

也許你可以添加另一個條件繞過return false如果$taget.is("a.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); 
} else if ($target.is("a.fancybox")) { 
    // do nothing and let fancybox to play 
} else { 
    return false; 
} 
});