0

我对 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;
}

投资组合.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 值设置),有些包含数百张图片。最后,我希望只在页面上显示每个画廊的第一张图片作为画廊链接(手动调用)。

提前谢谢了 !

4

1 回答 1

0

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

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

于 2012-05-29T07:15:46.820 回答