2012-04-27 11 views
0

私は誰かが助けてくれるかどうか疑問に思います。fancyBoxボタンヘルパー

以下のスクリプトを使用して、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/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"> 

      $('.fancybox').fancybox({ 
       openEffect : 'elastic', 
       closeEffect : 'elastic', 

       prevEffect : 'none', 
       nextEffect : 'none', 

       closeBtn : false, 

       helpers : { 
        title : { 
         type : 'inside' 
        }, 
        buttons : {} 
       }, 

       afterLoad : function() { 
        this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : ''); 
       } 
      }); 



</script> 
    <style type="text/css"> 
<!-- 
.style1 { 
    font-size: 14px; 
    margin-top: 5px; 
    margin-right: 110px; 
} 
--> 
    </style> 
</head> 
<body style="font-family: Calibri; color: #505050; margin-left: 240px;"> 
<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" style="margin-left: -120px; margin-right: 50px;"> 

    <p> 
     <?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" title="<?php echo $name; ?>" href="<?php echo $source; ?>"><img src="<?php echo $thumbnail; ?>" /></a> 
     <?php endfor; ?> 
    </p> 
</form> 
</body> 
</html> 

問題は、私のfancyBox Javascriptの中から機能を作成できないということです。 'ボタンヘルパー'機能と画像フォーマット内のタイトル。

私は 'fancyapps'ページhereからコードを取得したので、どこが間違っているのかよく分かりません。私はfancyBoxには比較的新しいので、おそらく初心者のエラーです。

私はちょうど誰かがこれを見て、私がどこに間違っているのかを教えてくれるかどうか疑問に思いました。

答えて

2

まず

多くのおかげに関しては、あなたはfancyBox 1.3.4を使用しているが、あなたはこれらのヘルパーを使用するfancyBox2を使用する必要があります。

第二に、あなたのパスが正しいかどうかを確認、多分あなたは、

..href="/fancybox/source/.. 
+0

こんにちは@Janisに

..href="fancybox/source/.. 

からあなたの助けに感謝しますので、多くを変更する必要があります。あなたが提案したように私はv2にアップグレードしました。敬具 – IRHM