Fancybox : PHP 배열의 탐색 버튼이 표시되지 않습니다.

Question

Fancybox 2.0.6의 이미지 갤러리에 약간의 문제가 있습니다. 내비게이션 버튼이 없으며 가까운 버튼 만 표시됩니다. 그래서, 갤러리 스크립트에 플러그인을 추가 할 때 실수로 한 이미지 만 찾게되었습니다. 문제는 사용 된 브라우저에 의존하지 않고 IE, Firefox, Safari, Chrome 및 Opera에서 가져옵니다. 내 갤러리 스크립트는 PHP로되어 있습니다. 다른 모든 사이트와 같습니다. 내 이미지는 폴더 내용을 읽는 함수로 만든 배열에 저장됩니다.

내 스크립트는 다음과 같습니다.

기능 get_files :

이

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

사람이 나를 설명 할 수 없습니다 : 여기

// 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>'; 
    } 

그리고 내가 플러그인을 추가 한 라인이다 무엇이 잘못되었으며이를 수정하는 방법은 무엇입니까? 나는 PHP에서 좋은 기술을 가지고 있지만 Javascript에서는 상당히 초보자입니다. 자세한 내용은 다음과 같습니다. 각 이미지마다 각 링크를 만들 수 없으며 많은 갤러리 ($ _GET 값으로 설정)가 있고 일부 이미지는 100 개 이상 포함되어 있습니다. 마지막으로 각 갤러리의 첫 번째 이미지 만 갤러리 링크 (수동 호출)로 페이지에 표시하고 싶습니다.

미리 감사드립니다.

Answer 1

네비게이션 버튼 및 각 이미지 링크 : fancybox의 이미지 요소에 id가 있어야 자동으로 이미지 배열을 감지 한 다음 첫 번째 이미지에서 진행되어 결국 양쪽에 탐색 버튼이 표시됩니다.

모든 갤러리의 첫 번째 이미지를 표시하려면 css를 사용하여 전체 컨테이너를 숨기고 자바 스크립트에서 window 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 둘째, 각 갤러리의 첫 번째 이미지가 두 번 나타납니다.

두 번째 문제에 대해서는 어떤 일이 벌어지고 있는지 알지만 실제로 해결 방법은 없습니다. 어떤 도움을 많이 부탁드립니다.