Question

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

首先，我为大多数人认为是一个非常简单的问题而道歉。但这是我的第一次尝试，所以请耐心等待。

我正在使用下面的脚本创建一个带有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-thumb").fancybox({

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

我可以查看图片，但我似乎无法让图库功能正常工作。我一直在研究'fancyBox'和'fancyApps'websites上的例子，但很明显我误解了一些东西。

我觉得，一旦我开始，我可以根据需要对页面进行格式化，我将完成教程。但我只是想知道是否有人可以告诉我在创建初始画廊时出错的地方。

非常感谢和问候

Answer 1

我将你的fancybox附加到一个名为“.fancybox-thumb”的类，但页面上没有这样的类。相反，您的链接带有名为“.images”的类

因此，请尝试替换此行

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

带

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

我没有测试过您的代码，但这是我到目前为止发现的一个明显错误。

Answer 2

在@kernelpanic提出的初始问题之后，@ryan和@Mr_DeLeTeD得到纠正，通过进一步测试并查看了文档，“灰色垂直条纹”是不透明度设置，而不是错误。

fancyBox画廊

2 个答案: