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+.
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.
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.
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
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>