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-script使用窗口onload函数中显示父元素的第一个子元素（这将是图像的容器） 。希望它确实有道理。

Answer 2

至少我发现一个很好的解决方案，使Fancybox检测数组，并且 - 顺便说一句 - 它完全是HTML5有效！这里是新脚本（portfolio.php和footer.php）：

$page .= '<div id="portfoliopage">'; 
// Génération de la galerie 
$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 
    // Création des liens de la galerie 
    $page .= '<h3>'.$gallerylink.'</h3><br /><br />'; 
    $page .= '<div id="gallerycontent">'; 
    $page .= '<a class="img_gallery" href="'.$thumb.'" data-fancybox-group="group"><img src="'.$thumb.'" height="342" width="512" alt="Open Gallery" /></a></div> '; 
    foreach($image_files as $index=>$file) { 
     $index++; 
     // $file.'<br />'; 
     //Création des liens image pour javascript 
     $link = $images_dir.'/'.$file; 
     $page .= '<a class="img_gallery" href="'.$link.'" data-fancybox-group="group" title="'.$altname.'"></a>'; 
    } 
} 
else { 
    $page .= '<p>'.$errorgallery.'</p>'; 
} 
$page .= '</div>'; 

<script type="text/javascript"> 
$(document).ready(function() { 
    /*$("a[rel='gallery']").fancybox();*/ 
    $(".img_gallery").fancybox({ 
     openEffect : 'elastic', 
     closeEffect : 'elastic', 
     prevEffect : 'none', 
     nextEffect : 'none', 
     helpers : { 
      title : { 
       type: 'outside' 
      }, 
      overlay : { 
       opacity : 0.8, 
       css : { 
        'background-color' : '#000' 
       } 
      }, 
      thumbs : { 
       width : 50, 
       height : 50 
      } 
     } 
    }); 
}); 
</script> 

虽然还有两个问题。 首先，“关闭”按钮没有完全显示。它在中间被切断。这里有一个屏幕：http://img690.imageshack.us/img690/478/screenjkf.png 其次，每个画廊的第一个图像出现两次...

对于第二个问题，我明白发生了什么，但我真的不知道如何纠正它。任何帮助将不胜感激..