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

たぶんあなたは前ではなく<?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 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;
 }
});
于 2012-04-30T19:04:33.370 に答える
0

将来この問題を抱えている人のためだけに：

galleryには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 に答える