Fancybox无法从隐藏的div正确触发画廊 [英] Fancybox is not triggering correctly the gallery from a hidden div

问题描述

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

I'm developing a site and I want to add some new features. I'm using Fancybox and it works great!

问题出在这里

当您单击POI时，其中一些具有不止1张照片，因此，通过下面的代码，您可以看到它正确触发了fancybox，但仅显示1张照片，而不显示整个画廊.

When you click on a POI some of them have more than 1 photo , so with the following code as you can see it triggers correctly the fancybox but it only shows 1 photo and not the entire gallery.

我在做什么，就是我只将html复制到隐藏的div内，然后附加到另一个div上，这样我就可以正确触发它，也许我自己太复杂了:/-

What im doing is that i just copy that html inside of the hidden div and append it to another so i can trigger it correctly , maybe im complicated myself way too much :/-

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

It works but it only shows only 1 photo and it doesnt show the other 2 or more photos.

我的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.

As you can see this is my html from my fancybox.

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都被隐藏了.

Any ideas? What is going on? and by the way both of parents divs are hidden.

因此，它现在可以正常工作的问题是当它具有2张或更多张图像时，它们只显示两个图像，而不显示画廊.

So its working now the problem was when it had 2 or more images it just show em both instead of doing the gallery.

Edit2:

Fancybox可以工作，但它只显示1张图片:/

Fancybox works but it doesnt show the gallery only 1 image :/

Edit3:

什么都没有:/

Edit4:

在这里jsfiddle http://jsfiddle.net/yZ7N5/

Heres the jsfiddle http://jsfiddle.net/yZ7N5/

推荐答案

问题不是很清楚，但是我猜您正在尝试显示一个图像，当单击该图像时，它将打开一个fancybox图像库.

The question isn't very clear, but I'm guessing you're trying to show one image that, when clicked, will open a fancybox image gallery.

像这样:

工作示例

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画廊一样，您只需保留链接并忽略要隐藏的图像的图像即可.

It works just like a regular fancybox gallery you just keep the links and omit the images for the images you want hidden.

更新:

我刚刚添加了常用的fancybox脚本，它可以正常工作，请参见下面的工作示例.

I just added the usual fancybox script and it worked, see working example below.

工作示例

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

这篇关于Fancybox无法从隐藏的div正确触发画廊的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！