Question

我想知道是否有人可以帮助我。

我已经整理了一个创建this图片库页面的脚本。我正在使用'fancyBox'创建幻灯片和一个jquery demo来源here，我已经调整了它以提供删除功能。

我遇到的问题在于我的代码行：

<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

也许您需要在<?php endfor; ?>之前放置</li>。

显示您如何编写Fancybox初始化脚本

Answer 2

您的删除工具使用此功能

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

Answer 3

仅适用于将来遇到此问题的任何人：

gallery从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">

fancyBox和jQuery删除工具冲突

3 个答案: