Question

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

问题在于：

当您点击某个POI时，其中一些照片有一张以上，所以使用以下代码可以看到它正确触发了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>

正如你所看到的，这是我的fancybox中的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')
    }
    });
}

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

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

EDIT2：

Fancybox可以使用，但它不会仅向图库显示1张图片：/

Edit3：

仍然没有：/

Edit4：

继承人的jsfiddle http://jsfiddle.net/yZ7N5/

Answer 1

问题不是很明确，但我猜你正试图展示一张图片，点击后会打开一个fancybox图片库。

像这样：

<强> 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图库一样，您只需保留链接并省略要隐藏的图像的图像。

<强>更新

我刚刚添加了通常的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()。

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

2 个答案: