Fancybox:Nav按钮未显示，PHP数组中的内容

我对Fancybox 2.0.6上的图像库有点问题。 我没有显示导航按钮，只有关闭按钮。所以，我想我犯了一个错误，当我在我的图库脚本中添加插件时，它只能找到一张图片。问题不在于所使用的浏览器，我在IE、Firefox、Safari、Chrome和Opera上都能找到。 我的图库脚本是用PHP编写的，就像我网站的其他部分一样。我的图像存储在一个数组中，由一个读取文件夹内容的函数创建

这是我的脚本

函数获取文件：

// Fonction de lecture du dossier et publication dans un tableau
function get_files($images_dir,$exts = array('jpg')) {
  $files = array();
  if($handle = opendir($images_dir)) {
    while(false !== ($file = readdir($handle))) {
      $extension = strtolower(get_file_extension($file));
      if($extension && in_array($extension,$exts)) {
        $files[] = $file;
      }
    }
    closedir($handle);
  }
  return $files;
}

portfolio.php（图库部分）

$image\u files=get\u files（$images\u dir）；
如果（计数（$image_文件））{
$index=0；
$firstimage=$image_文件[0]；
$thumb=$images_dir.'/'.$firstimage；//Lien:files/photos/$images_dir/premièreimage.JPG
$page.=''；
$page.='$（“.img_gallery”）。单击（函数（）{'；
$page.='$.fancybox.open（['；
foreach（$index=>$file形式的图像文件）{
$index++；
//回显$file.“
”；
//对留置权的审查
$link=$images_dir.'/'.$file；
$page.=“{href:'”$link.”，标题：“$altname.”，”；
}
//对档案的权利和义务的审查
$page.='}）；'；
$page.='Open Gallery

；
$page.=''；
}
否则{
$page.='此图库中没有图像。
'；
}

下面是我添加插件的几行代码：

<!-- Add jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<!-- Add fancyBox -->
<script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js"></script>
<!-- Add Button helper (this is optional) -->
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js"></script>
<!-- Add Thumbnail helper (this is optional) -->
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-thumbs.js"></script>
<!-- Add Media helper (this is optional) -->
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-media.js"></script>
<!-- Gallery Initiators -->
<script type="text/javascript">
    $(document).ready(function() {
        /*$("a[rel='gallery']").fancybox();*/
        $("a[rel='gallery']").fancybox(portfolio,{
            openEffect  : 'elastic',
            closeEffect : 'elastic',
            nextEffet: 'fade',
            prevEffect: 'fade'
        });
    });
</script>

$（文档）.ready（函数（）{
/*$（[rel='gallery']）*/
$（[rel='gallery']）{
openEffect:'弹性'，
闭合效应：“弹性”，
下一步：“褪色”，
效果：“褪色”
});
});

有谁能解释一下哪里出了问题以及如何纠正这个问题吗？我在PHP方面有很好的技能，但我对Javascript非常陌生。 更多详细信息：我无法为每个图像创建每个链接，我有许多图库（由$\u GET值设置），有些图库包含数百个以上的图像。最后，我希望页面上只显示每个图库的第一个图像作为图库链接（手动调用）

---

非常感谢！

导航按钮和每张图像的链接： 您需要在图像元素上具有id，以便fancybox自动检测一组图像，然后从第一张图像开始，最终显示两侧的导航按钮

---

要仅显示每个库的第一个图像，请使用css隐藏整个容器，并在java脚本中使用window onload函数仅显示父元素的第一个子元素（这将是图像的容器）。希望它有意义。

第二部分没问题，但我对第一部分有一些理解上的问题。按照上面的脚本，我必须在图像元素上设置一个id，对吗？$page.=“{href:''.$link''，title:'.$altname.'}]，”；很抱歉，我花了很长时间才再次回复。是的，id应该在图像元素上，为所有图像添加相同的id，应该可以正常工作。我再次为延迟感到抱歉。我还有另一个问题。为了获得有效的HTML代码（用于W3验证程序），我想使用data fancybox gallery。据我所知，它允许删除“rel”属性。对吗？如果是，如何在我的脚本上实现它？

<!-- Add jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<!-- Add fancyBox -->
<script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js"></script>
<!-- Add Button helper (this is optional) -->
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js"></script>
<!-- Add Thumbnail helper (this is optional) -->
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-thumbs.js"></script>
<!-- Add Media helper (this is optional) -->
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-media.js"></script>
<!-- Gallery Initiators -->
<script type="text/javascript">
    $(document).ready(function() {
        /*$("a[rel='gallery']").fancybox();*/
        $("a[rel='gallery']").fancybox(portfolio,{
            openEffect  : 'elastic',
            closeEffect : 'elastic',
            nextEffet: 'fade',
            prevEffect: 'fade'
        });
    });
</script>