Fancybox is not triggering correctly the gallery f

Question

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

Here's the problem:

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.

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 :/-

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

My 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>

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

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

Edit: 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 works but it doesnt show the gallery only 1 image :/

Edit3:

Still nothing :/

Edit4:

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

Answer 1

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.

Like so:

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>

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

Update:

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

Answer 2

Try:

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

After making div visible and binding .fancybox().