Fancybox缩略图不起作用

Question

Im有一些fancybox缩略图问题。我正在做的是用fancybox iframe调用缩略图助手的fancybox图库。我不知道这是否是问题，但我似乎不能让缩略图显示。他们确实展示在我拥有的媒体画廊中。但不在正常的画廊。我使用一个PHP循环来放置每个图像。这是代码。 这是我对每一个I帧（。各种）画廊（的fancybox拇指），并用拇指佣工（的fancybox媒体）

$(document).ready(function() { 

    $(".various").fancybox({ 
     maxWidth : 800, 
     maxHeight : 400, 
     fitToView : false, 
     width  : '70%', 
     height  : '70%', 
     autoSize : false, 
     closeClick : false, 
     openEffect : 'none', 
     closeEffect : 'none', 
     afterClose : function() { 
      var name = sessionStorage.getItem("name"); 
      if (name == 'folder 1') { 
       $('.fancybox-thumb').fancybox().trigger('click'); 
      } 
      if (name == 'folder 2') { 
       $('.fancybox-thumb2').fancybox().trigger('click'); 
      } 
      if (name == 'folder 3') { 
       $('.fancybox-thumb3').fancybox().trigger('click'); 
      } 

     } 
    }); 

    $(".fancybox-thumb").fancybox({ 
     type: 'image', 
     autoScale: true, 
     prevEffect : 'none', 
     nextEffect : 'none', 
     helpers : { 
      title : { 
       type: 'outside' 
      }, 
      thumbs: { 
       width: 50, 
       height: 50 
      }   
     } 
    }); 

    $(".fancybox-thumb2").fancybox({ 
     prevEffect : 'none', 
     nextEffect : 'none', 
     helpers : { 
      title : { 
       type: 'outside' 
      }, 
      thumbs : { 
       width : 50, 
       height : 50 
      } 
     } 
    }); 

    $(".fancybox-thumb3").fancybox({ 
     prevEffect : 'none', 
     nextEffect : 'none', 
     helpers : { 
      title : { 
       type: 'outside' 
      }, 
      thumbs : { 
       width : 50, 
       height : 50 
      } 
     } 
    }); 

    $(".fancybox-media").fancybox({ 
     prevEffect : 'none', 
     nextEffect : 'none', 
     maxWidth : 800, 
     maxHeight : 600, 
     fitToView : false, 
     width  : '70%', 
     height  : '70%', 
     autoSize : false, 
     closeClick : false, 
     openEffect : 'none', 
     closeEffect : 'none', 
     helpers : { 
      title : { 
       type: 'outside' 
      }, 
      thumbs : { 
       width : 50, 
       height : 50 
      }, 
     }, 
     media : { 

     } 
    }); 
}); 

作为对于画廊beeing代码媒体播放器制造是下一个。

<div> 
    <?php 
    $dirImg = 'img/Galeria/folder 1'; 
    $fileImg = scandir($dirImg); 
    ?> 

    <?php foreach($fileImg as $image): ?> 

     <a class="fancybox-thumb" rel="fancybox-thumb" href="img/Galeria/folder 1/<?php echo $image; ?>" title=""> 
     <img style="display: none;" src="img/Galeria/folder 1/<?php echo $image; ?>" alt=""></a> 

    <?php endforeach ?> 
</div> 
<div> 
    <?php 
    $dirImg = 'img/Galeria/folder 2'; 
    $fileImg = scandir($dirImg); 
    ?> 

    <?php foreach($fileImg as $image): ?> 

     <a class="fancybox-thumb2" rel="fancybox-thumb2" href="img/Galeria/folder 2/<?php echo $image; ?>"> 
     <img style="display: none;" src="img/Galeria/folder 2/<?php echo $image; ?>"></a> 

    <?php endforeach ?> 
</div> 
<div> 
    <?php 
    $dirImg = 'img/Galeria/folder 3'; 
    $fileImg = scandir($dirImg); 
    ?> 

    <?php foreach($fileImg as $image): ?> 

     <a class="fancybox-thumb3" rel="fancybox-thumb3" href="img/Galeria/folder 3/<?php echo $image; ?>"> 
     <img style="display: none;" src="img/Galeria/folder 3/<?php echo $image; ?>"></a> 

    <?php endforeach ?> 
</div> 

感谢您的帮助：d

Answer 1

优化我与你在diferent画廊想要的任何文件夹和图像使用的答案。当你关闭画廊时，你需要再次打开文件夹iframe。我正在研究如何在关闭图库时打开文件夹iframe。无论如何，这里是我使用的代码。正如你所看到的，我返回了文件夹名称并修剪它，以便我可以将它用于fancybox的一个类。希望这样做更好：D让我留下脚本和用于制作画廊的HTML。

<script type="text/javascript"> 
$(function() { 
    var austDay = new Date(); 
    austDay = new Date(austDay.getFullYear() + 1, 1 - 1, 26); 
    $("#defaultCountdown").countdown({until: new Date(2014, 3-1, 15)}); 
    $('#year').text(austDay.getFullYear()); 
}); 

$(document).ready(function() { 

    $(".various").fancybox({ 
     maxWidth : 800, 
     maxHeight : 400, 
     fitToView : false, 
     width  : '70%', 
     height  : '70%', 
     autoSize : false, 
     closeClick : false, 
     openEffect : 'none', 
     closeEffect : 'none', 
     afterClose : function() { 
      var name = sessionStorage.getItem("name"); 

       $('.'+name.replace(/ /g,'')).fancybox({ 
        prevEffect : 'none', 
        nextEffect : ' none', 

        closeBtn : true, 
        arrows : true, 
        nextClick : true, 

        helpers : { 
         thumbs : { 
          width : 50, 
          height : 50 
         } 
        } 
       }).eq(0).trigger('click'); 

     } 
    }); 

    $(".fancybox-media").fancybox({ 
     prevEffect : 'none', 
     nextEffect : 'none', 
     maxWidth : 800, 
     maxHeight : 600, 
     fitToView : false, 
     width  : '70%', 
     height  : '70%', 
     autoSize : false, 
     closeClick : false, 
     openEffect : 'none', 
     closeEffect : 'none', 
     helpers : { 
      title : { 
       type: 'outside' 
      }, 
      thumbs : { 
       width : 50, 
       height : 50 
      }, 
     }, 
     media : { 

     } 
    }); 
}); 

下面是使画廊的代码。

<?php 
$cont = 0; 
$dir = 'img/Galeria'; 
$files1 = scandir($dir); 
?> 

<?php foreach($files1 as $file): ?> 
    <?php if ($cont>1) { ?> 

     <?php 
     $dirImg = 'img/Galeria/'.$file; 
     $fileImg = scandir($dirImg); 
     $cont = 0; 
     ?> 
     <div> 
      <?php foreach($fileImg as $image): 
      if ($cont>2){?> 

       <a class="<?php echo preg_replace('/\s+/', '', $file);?>" data-fancybox-group="<?php echo preg_replace('/\s+/', '', $file);?>" 
        href="img/Galeria/<?php echo $file;?>/<?php echo $image; ?>" title=""></a> 

      <?php } $cont++; endforeach ?> 
     </div> 

    <?php } ?> 
<?php $cont++; endforeach ?> 

这里是我用于查看文件夹的iframe。

<?php 
    $cont = 0; 
    $dir = 'img/Galeria'; 
    $files1 = scandir($dir); 

    ?> 

    <div class="title"><h1>Folder de Imagenes</h1></div> 
    <div class="folders"> 
     <ul class="gallery"> 

       <?php foreach($files1 as $file): ?> 
       <?php if ($cont>1) { ?> 
        <li> 

         <a onclick="OnClickButton ('<?php echo $file;?>');" href="img/Galeria/<?php echo $file;?>"> 
         <div class="folderImg"><img style="width: 100px;" src="img/folderImg.png"></div> 
         <div class="textFile"><h3><?php echo $file;?></h3></div> 
         </a> 

        </li> 
       <?php } ?> 
       <?php $cont++; endforeach ?> 

     </ul> 
    </div> 

希望这有助于：d