Fancybox 未从隐藏的 div 正确触发图库

Question

我正在开发a site，我想添加一些新功能。我正在使用 Fancybox，效果很好！

问题来了：

当您单击 POI 时，其中一些 POI 有超过 1 张照片，因此使用以下代码，您可以看到它正确触发了 fancybox，但它只显示 1 张照片而不是整个画廊。

我所做的是我只是在隐藏的 div 中复制该 html 并将其附加到另一个，以便我可以正确触发它，也许我自己太复杂了：/-

它可以工作，但它只显示 1 张照片，而不显示其他 2 张或更多照片。

我的html

   <div id="pois">  
    <div id="torrebenefebvlc" class="pointer hoversin" alt="2" style="margin-top: 295px; margin-left: 305px; position: absolute;">
<img src="http://www.vistadesarrollos.com/avancedeobra2/images/POI-90.png">
<div style="display:none">
<div id="slideimg" style="">
<a class="fancybox" href="http://www.vistadesarrollos.com/avancedeobra2/images/avance/torrebenefeb2013vlc.jpg" data-fancybox-group="gallery2" rel="gallery2">
<img style="" src="http://www.vistadesarrollos.com/avancedeobra2/images/avance/torrebenefeb2013vlc.jpg"></a>
<a class="fancybox" href="http://www.vistadesarrollos.com/avancedeobra2/images/avance/torrebenefeb2013vlc2.jpg" data-fancybox-group="gallery2" rel="gallery2">
<img style="" src="http://www.vistadesarrollos.com/avancedeobra2/images/avance/torrebenefeb2013vlc2.jpg"></a>
</div>
</div>
</div>
</div>

如您所见，这是我的幻想箱中的 html。

JQUERY:



     function clickfotovid(){
    $("#pois div").click(function() {
        eldiv = $(this).find('div').find('div').html()
        //eltamano = eldiv.length;
        //alert(eldiv)
        /*if(eltamano > 97){

            slidershow(1,eldiv)
        }
        else{
            slidershow(0,eldiv)
        }*/
        fancyboxftw(eldiv)
    });


}

function fancyboxftw(html){

    $("#cargastuff").html("");
    $("#cargastuff").wrapInner("<div id='sliderimg'></div>")
    $("#sliderimg").html(html)
    $("#sliderimg a").each(function () {
    if ($(this).has('img').length) {
        $(this).fancybox();
        $("#sliderimg a:first").trigger('click')
    }
    });
}

有什么想法吗？到底是怎么回事？顺便说一下，父母的 div 都是隐藏的。

编辑： 所以它现在工作的问题是当它有 2 个或更多图像时，它只是显示它们而不是做画廊。

编辑2：

Fancybox 工作，但它不显示画廊只有 1 图像：/

编辑3：

还是什么都没有：/

编辑4：

这是 jsfiddle http://jsfiddle.net/yZ7N5/

Answer 1

这个问题不是很清楚，但我猜你是想展示一张图片，点击后会打开一个精美的图片库。

像这样：

Working Example

<a rel="Cabins" href="http://s3.amazonaws.com/dfc_attachments/images/3215261/Cabin_4_bikes.jpg" class="fancybox">   
    <img width="400" height="266" alt="Cabin 4" src="http://s3.amazonaws.com/dfc_attachments/images/3215261/Cabin_4_bikes_web.jpg" title="Cabin 4"/>
</a> 

<a rel="Cabins" href="http://s3.amazonaws.com/dfc_attachments/images/3215273/Cabin_Common_Area_1.jpg" class="fancybox"></a> 

<a rel="Cabins" href="http://s3.amazonaws.com/dfc_attachments/images/3215269/Cabin_Beds.jpg" class="fancybox"></a>

它就像一个普通的花式画廊一样工作，您只需保留链接并省略您想要隐藏的图像的图像。

更新：

我刚刚添加了常用的 fancybox 脚本，它工作正常，请参阅下面的工作示例。

Working Example

 $("#pois div").click(function() {
        eldiv = $(this).find('div').find('div').html();
        fancyboxftw(eldiv);
    });

function fancyboxftw(html){

    $("#cargastuff").html("");
    $("#cargastuff").wrapInner("<div id='sliderimg'></div>");
    $("#sliderimg").html(html);
    $("#sliderimg a").each(function () {
    if ($(this).has('img').length) {
        $(this).fancybox();
        $("#sliderimg a:first").trigger('click');
    }
    });
}

  $(document).ready(function () {
      $(".fancybox").fancybox({
          maxWidth: 800,
          maxHeight: 600,
          fitToView: false,
          autoResize: true,
          closeClick: false,
          openEffect: 'elastic',
          closeEffect: 'elastic'
      });
  });

Answer 2

试试：

$(window).trigger( "resize" );

在使 div 可见并绑定 .fancybox() 之后。