-1

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

这是问题所在：

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

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

它有效，但仅显示 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')
    }
    });
}

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

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

编辑2：

Fancybox 有效，但仅显示 1 张图片：/

编辑3：

依然没有 ：/

编辑4：

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

4

2 回答 2

1

这个问题不是很清楚，但我猜你正在尝试显示一张图片，点击后会打开一个fancybox图片库。

像这样：

工作示例

<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 脚本，它就可以工作了，请参见下面的工作示例。

工作示例

 $("#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'
      });
  });
于 2013-06-16T15:56:14.673 回答
0

尝试：

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

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

于 2017-03-01T06:29:29.813 回答