0

誰かが助けてくれるのではないかと思います。

私はこれに少し慣れていないので、これは基本的な質問になると確信していますが、ご容赦ください。

以下のスクリプトを使用して、fancyBox で画像ギャラリーを作成しています。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
  <title>Gallery</title>  
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>   
  <script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script> 
  <script type="text/javascript" src="fancybox/jquery.easing-1.4.pack.js"></script> 
  <script type="text/javascript" src="fancybox/jquery.easing-1.4.pack.js"></script>  
  <script type="text/javascript" src="fancybox/jquery.mousewheel-3.0.4.pack.js"></script>  
  <script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.2"></script>  
  <script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.0"></script>  
  <script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=2.0.6"></script>  
  <link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.2" type="text/css" media="screen" />  
  <link rel="stylesheet" href="fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />  
  <link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-thumbs.css?v=2.0.6" type="text/css" media="screen" />  

  <script type="text/javascript">  

$(document).ready(function() { 
    $("a.fancybox").fancybox({

        'centerOnScroll':'true',
        helpers : {
        title : {
            type : 'inside'
        }
    },


        'transitionIn':'elastic',
        'transitionOut':'elastic',
        'speedIn':600, 
        'speedOut': 200,
        'overlayShow':false
    });

});


</script>  

</head> 
<body style="font-family: Calibri; color:  #505050; font-size: 9px; border-bottom-width: thin; margin-top: 5px; margin-left: 100px; margin-right: 100px; margin-bottom: -10px; float: left; position: absolute;"> 
<div align="right" class="style1"> <a href = "javascript:document.gallery.submit()"/> Add Images <a/> &larr; View Uploaded Images </div> 
  <form id="gallery" name="gallery" class="page" action="index.php" method="post">   

                  <?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'));  
                  ?> 
        <a class="fancybox" rel="allimages" href="<?php echo $source; ?>"><img src="<?php echo $thumbnail; ?>" alt="<?php echo $name; ?>"/></a><?php endfor; ?> 
  </form>  
</body>  
</html>

私が抱えている問題は、画像内、または実際にはデフォルト設定のように見える「ホバーオーバー」以外の場所にタイトルを作成できないことです。これを機能させるために、さまざまな方法を試してみました。

すなわち

$(document).ready(function() { 
    $("a.fancybox").fancybox({

        'centerOnScroll':'true',
        'titleShow':'true',
        'titlePosition':'inside',
        'transitionIn':'elastic',
        'transitionOut':'elastic',
        'speedIn':600, 
        'speedOut': 200,
        'overlayShow':false
    });

});

と 

 $(document).ready(function() { 
        $("fancybox").fancybox({

            'centerOnScroll':'true',
            'titleShow':'true',
            'titlePosition':'inside',
            'transitionIn':'elastic',
            'transitionOut':'elastic',
            'speedIn':600, 
            'speedOut': 200,
            'overlayShow':false
        });

    });

の追加と削除'、スペースの削除を試みましたが、すべて成功しませんでした。誰かがこれを見て、どこが間違っているのか教えてくれるのではないかと思いました。

多くの感謝と敬意

4

2 に答える 2

3

この行で：

<a class="fancybox" rel="allimages" href="<?php echo $source; ?>"><img src="<?php echo $thumbnail; ?>" alt="<?php echo $name; ?>"/></a><?php endfor; ?>

内のタグではなく、title内に属性を設定してみてください。したがって、次のようになります。aaltimg

<a class="fancybox" rel="allimages" title="<?php echo $name; ?>" href="<?php echo $source; ?>"><img src="<?php echo $thumbnail; ?>" /></a><?php endfor; ?>
于 2012-04-26T17:21:20.737 に答える
0

アンカー タグにタイトル要素を追加しても機能しない場合は、fancybox 設定でタイトルを強制できます。

$(document).ready(function() { 
  $("fancybox").fancybox({
    'title'          : 'yourtitle'
    'centerOnScroll' : 'true',
    'titleShow'      : 'true',
    'titlePosition'  : 'inside',
    'transitionIn'   : 'elastic',
    'transitionOut'  : 'elastic',
    'speedIn'        : 600, 
    'speedOut'       : 200,
    'overlayShow'    : false
  });
});
于 2013-06-27T09:31:27.977 に答える