0

I am trying to open a fancy box and everything is in place except with an issue that fancy box is not opening second time.

for first time it is getting opened perfectly fine, moment i try to open it second time it does not open it, here is the code i have

jQuery(document).ready(function() {

jQuery("#destination_Weather").fancybox({
    'titlePosition'     : 'inside',
    'autoScale'          :true,
    'autoDimensions'    : true,  
    'width'             : 600,
    'height'            : 'auto',
    'transitionIn'      : 'none',
    'transitionOut'     : 'none'
   });
});
<div style="display: none">
    <div id="destinationWeather">
        <?php  if(!empty($lat_long_cordinates))  {
             echo displayDestinationWeather('',$lat_long_cordinates);
          } ?>
     </div>
   // one more div used for another fancybox content
</div>

<a href="#destinationWeather" id="destination_Weather">link </a>

I am not sure why this is happening, but when i click link second time, it is reloading whole page from fresh. Not sure of this is an issue with fancy-box implementation or some wrong implementation with PHP.

There is one more thing i noticed, when i close pop up for first time,destinationWeather div loosing all its data and i can see only this information there

<div class="fancybox-inline-tmp" style="display: none;"></div>

Not sure why this is happening?

IMPORTANT : Please note that fancybox v1.3.4 doesn't work with jQuery v1.9+.

Umesh Awasthi
  • 23,407
  • 37
  • 132
  • 204

4 Answers4

4

Since you are using fancybox v1.3.4, you have to do this

1). your target inline div should be wrapped in an extra div like :

<div style="display: none">
    <div id="destinationWeather">
        <?php  if(!empty($lat_long_cordinates))  {
            echo displayDestinationWeather('',$lat_long_cordinates);
        } ?>
    </div>
</div>

Notice that the target div ( #destinationWeather ) shouldn't have any display:none property but the parent wrapper div ( added in the code above )

2). There is a known bug in v1.3.4 regarding inline content (documented here) so you have to apply the workaround in your code :

jQuery(document).ready(function () {
    jQuery("#destination_Weather").fancybox({
        'titlePosition': 'inside',
        'autoScale': true,
        'autoDimensions': true,
        'width': 600,
        'height': 'auto',
        'transitionIn': 'none',
        'transitionOut': 'none',
        // fix inline bug
        'onCleanup': function () {
            var myContent = this.href;
            $(myContent).unwrap();
        }
    });
});

See JSFIDDLE

IMPORTANT : Also beware that fancybox v1.3.4 doesn't work with jQuery v1.9+. See this post for further reference and workaround.

Community
  • 1
  • 1
JFK
  • 40,963
  • 31
  • 133
  • 306
  • Thanks for the inputs, i already have `
    ` wrapped around my content div, i used your code,but still its not working.Also what i noticed that moment i click on the `link`, its removing the `destinationWeather` div and replacing with ``, so i guess `onCleanup` is too late
     – Umesh Awasthi Sep 07 '13 at 09:23
  • `replacing with ` is the expected behavior since the content is **moved** from its position in the document flow to fancybox and returned where the temp placeholder was set ... unless the bug. – JFK Sep 07 '13 at 09:29
  • Aha, thanks for input, but still problem is there and on clicking second time whole page is reloading . – Umesh Awasthi Sep 07 '13 at 09:30
  • maybe because php is cached so I wonder how this `if(!empty($lat_long_cordinates))` condition is validated when moved to fancybox – JFK Sep 07 '13 at 09:48
  • I am not sure if php can be issue here, since php function is getting called on page load and function is sending back data before fancy-box came in action, anyhow that seems to be a valid pointer and i can look in to this. – Umesh Awasthi Sep 07 '13 at 09:51
  • I checked, PHP is not the reason , i replaced php code with `
    hello hello hello hello
    `, for first time it loaded properly, but on second time it show loading box and again same result     – Umesh Awasthi Sep 07 '13 at 09:54
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/36975/discussion-between-jfk-and-umesh-awasthi) – JFK Sep 07 '13 at 10:09
  • 4
    I used this solution but replacing `$(myContent).unwrap();` with `if (myContent.charAt(0)=="#") $(".fancybox-inline-tmp").replaceWith($(myContent)[0].outerHTML)`. This code manually replaces fancybox tmp placeholder with original content (that was moved to fancybox container) – alex Sep 11 '14 at 17:41
0

If this is of any use to future views of this question, I just spent ages trying to get this to work in Wordpress where a plugin was loading v1.3.4 Fancybox.

After not getting much luck with the workarounds (not in the sense that still gave me working config of the plugin at least), I found that v1.3.6 Fancybox doesn't contain the bug described above and was the quickest and most convenient solution for me.

zigojacko
  • 1,983
  • 9
  • 45
  • 77
  • For the record, there is not fancybox **v1.3.6**. It is most likely the version of the WordPress plugin, which I bet still uses the original fancybox v1.3.4 (unless you can prove me wrong) – JFK Sep 11 '14 at 19:03
  • Oh shoot, I don't know which website I was referring to any more to check what was 1.3.6. I can see Fancybox doesn't have that version on their website though. Unfortunately not able to clarify what the actual Fancybox versions was in my case now. – zigojacko Sep 12 '14 at 08:45
0

There is one way to fix this issue related to fancybox-1.3.4. using the fancybox 'onClosed' event, reassign the original div content HTML back to the same fancybox div element. So that when the fancybox is closed we will reassign the original content of the div (html) to itself.

$(document).ready(function () {

        fancyMain = $("#fancyMain").html(); //here fancyMain is the div element which is set with display:none

        $("#fancyLinkId").fancybox({
            'hideOnContentClick': false,
            'autoScale': false,
            'autoSize': true,

            'onClosed': function () {
                $('#fancyMain').html(fancyMain);

        }
});

FancyMain is the main div with the style as display:none This is the innder div where the actual fancy box content goes with id fancydata //content in the fancy box goes here //end inner div //end maindiv

//then the anchor link is associate to inner div a fancyLinkId href #fancydata

This works

Tiny
  • 27,221
  • 105
  • 339
  • 599
Jay
  • 1
  • 1
0

Dynamic Inline Content Loading

      function loadAnswer(id) 
        {     
                jQuery.fancybox({       
                 'content' : jQuery("#outerFAQ"+id).html(),         
                  /*For Auto height and width*/
                 'onComplete' : function(){
                  jQuery('#fancybox-wrap').css({height:'auto',width:'auto'});
                        /*jQuery('.fancybox-wrap').css('left','50%');*/
                          jQuery.fancybox.resize();
                         jQuery.fancybox.center();  
                                }
            }); 
        }

    /*Dynamically Set the id and passing it to function*/  
     <a class="fancybox"  href="#" onClick="loadAnswer(<?php echo $data->getId()/*Dynamic id*/ ?>);"> Demo </a>

        <div id="outerFAQ<?php echo $data->getId(); ?>"  style="display:none;"> 
        <div id="ans<?php echo $data->getId();?>">
                   demo        
             </div>
 <div>

Single inline content loading

   jQuery( "#demo" ).click(function() {
      jQuery.fancybox({
                'content' : jQuery("#demoContent").html(),
                 onComplete: function () {

                                /*Static height width*/  
                               jQuery("#fancybox-content").css({
                                        height:'500px',
                                        overflow:'scroll',
                                    });
                                    jQuery("#fancybox-wrap").css("top","10");
                                    jQuery(".fancybox-wrap").css("position", "absolute");
                                }
        });

    <a  id="demo"  href="#">Click me</a>

    <div style="display: none">
                <div id="demoContent">
                    demo
                </div>
    </div>