Fancybox：导航按钮未显示，PHP 数组中的内容

Question

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

这是我的脚本。

函数get_files：

// 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_files = get_files($images_dir);
    if(count($image_files)) {
        $index = 0;
        $firstimage = $image_files[0];
        $thumb = $images_dir.'/'.$firstimage; //Lien: files/photos/$images_dir/premièreimage.JPG
        $page .= '<script type="text/javascript">';
        $page .= '$(".img_gallery").click(function() {';
        $page .= '$.fancybox.open([';
        foreach($image_files as $index=>$file) {
            $index++;
            // echo $file.'<br />';
            //Création des liens image pour javascript
            $link = $images_dir.'/'.$file;
            $page .= "{ href : '".$link."', title : '".$altname."' } ],";
        }
        // Création des liens de la galerie et fermeture du dossier
        $page .= '});</script>';
        $page .= '<h3>Open Gallery</h3><br /><br />';
        $page .= '<a class="img_gallery" href="'.$thumb.'" rel="gallery"><img src="'.$thumb.'" height="342" width="512" alt="Open Gallery" title="Open Gallery"/></a> ';
    }
    else {
      $page .= '<p>There are no images in this gallery.</p>';
    }

这是我添加插件的行：

<!-- 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>

谁能解释我出了什么问题以及如何纠正这个问题？我在 PHP 方面有很好的技能，但我对 Javascript 还是很陌生。 更多细节：我无法为每张图片创建每个链接，我有很多画廊（由 $_GET 值设置），有些包含数百张图片。最后，我希望每个画廊的第一张图片在页面上显示为画廊链接（手动调用）。

提前非常感谢！

Answer 1

对于每个图像的导航按钮和链接： 您需要在图像元素上设置 id，以便 fancybox 自动检测图像数组，然后从第一张图像开始，最终将向您显示两侧的导航按钮。

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