0

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

我已经编写了一个脚本来创建这个图片库页面。我正在使用“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>

非常感谢和亲切的问候

4

3 回答 3

0

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

画廊有一display:none组来自 Jquery-UI 示例。

只需修复此行：

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


 <ul id="gallery" class="ui-helper-reset ui-helper-clearfix">
于 2013-01-23T19:20:39.890 回答
0

也许你需要放在<?php endfor; ?> 之后</li>而不是之前。

展示你是如何编写 Fancybox 初始化脚本的

于 2012-04-30T10:35:12.487 回答
0

您的删除工具使用此功能

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

所以这阻止了对<a class="fancybox">绑定到 fancybox 的子元素的任何操作。

也许您可以添加另一个条件来绕过return falseif，$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;
 }
});
于 2012-04-30T19:04:33.370 回答