I am using fancybox 2 and am appending html content to the modal. I turned of scrolling, and now the content that overflows the modal is hidden. Is this a problem with the max-height of the modal? How do I fix this?
My Code:
$('.fancybox-open').fancybox({
openEffect : 'none',
closeEffect : 'none',
'scrolling' : 'no',
'closeBtn' : true,
afterLoad : function() {
this.content.html();
}
});
You have multiple possible reasons this is breaking.
We need more info for a definitive answer, but here are some likely/possible reasons.
Try a few of these parameters:
$('.fancybox-open').fancybox({
openEffect : 'none',
closeEffect : 'none',
'scrolling' : 'no',
'height' : 1000, <--- Try these one at a time
'autoHeight' : true, <--- Try these one at a time
'autoResize' : true, <--- Try these one at a time
'fitToView' : true, <--- Try these one at a time
'closeBtn' : true,
afterLoad : function() {
this.content.html();
}
});
You can read the full plugin options documented here:
http://fancyapps.com/fancybox/#docs
Related
Currently I have the following code. This is on Fancybox pop up window. I'm not sure if that's relevant or not.
$.fancybox.open({
href: "#preview_image_img",
title: "This is only a preview text may be adjusted to look its best.",
closeBtn : true,
openEffect : 'elastic',
closeEffect : 'elastic',
scrolling : 'no',
overlayShow: false,
fitToView: true,
afterLoad : function( instance, current ) {
console.log(instance);
}
})
afterLoad I console.log this object from the callback 'instance'. It appears on my console like so.
It's a list of an object with a bunch of methods etc.
if I console.log instance.key, instance.content etc all those return a value. When I do instance.dim (which coincidently is the one I need) I get undefined. How can I get the value of that?
Update: Now it popups from a specific referer =)
Here is my fancybox code:
if (document.referrer) { //if for the referrer
referrerone = /referrersite.com/;
if (referrerone.test(document.referrer)) {
$(document).ready(function(){
$(".fancybox").fancybox({
});
$(".various").fancybox({
hideOnContentClick: true,
showCloseButton: false,
transitionOut : 'none',
transitionIn : 'none',
}).trigger('click');
$('.fancybox-media').fancybox({
openEffect : 'none',
closeEffect : 'none',
helpers : {
media : {}
}
});
});
}
}
I want to add some static rules like the Popup plug-in for wordpress allows:
-Fancybox will auto close after some seconds.
-Not from an internal link: Shows the PopUp if the user did not arrive on this page via another page on your site.
You can use
document.referrer
to get the last page which your page has been loaded from
I have a jquery fancybox with a normal a href link inside it. When I click on that link the fancybox closes. How can I prevent the fancybox to close after I clicked on the link?
This is the code for the fancybox:
$(function(){
$(".booking_module").fancybox({
maxWidth : 550,
topRatio : 0,
fitToView : false,
width : '100%',
height : 'auto',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none',
centerOnScroll: true,
autoResize: true,
autoCenter: true,
margin : [topmargin, 0, 0, 0],
helpers : {
overlay : {closeClick: false}
}
});
});
This option will disable closing fancybox when clicking on the background
$(document).ready(function() {
$(".booking_module").fancybox({
helpers : {
overlay : {
closeClick: false
} // prevents closing when clicking OUTSIDE fancybox
}
});
});
and this option will disable all default click methods of closing fancybox
$(document).ready(function() {
$(".booking_module").fancybox({
closeBtn : false,
closeClick : false,
helpers : {
overlay : {
closeClick: false
} // prevents closing when clicking OUTSIDE fancybox
},
keys : {
close: null
} // prevents close when clicking escape button
});
});
i think the second option is what you're looking for. Maybe without the "closeBtn"
The problem was that I was using 3 classes for the a href. One of those classes was not used anymore. When I removed that un-used class it didn't close anymore after clicking on that link.
Not sure what the catch is but in FF the video keeps playing. All other browsers close when you click outside of fancybox... the embeded Youtube Video will stop playing as well. Firefox seems to ignore this. What am I doing wrong?
$(document).ready(function() {
$(".fancybox").fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none',
callbackOnClose: function() {
$("#fancy_content").html(" ");
}
});
});
$("#fancy_content").empty();
$(document).ready(function() {
/*
* Simple image gallery. Uses default settings
*/
$('.fancybox').fancybox();
// Change title type, overlay closing speed
$(".fancybox-effects-a").fancybox({
helpers: {
title : {
type : 'outside'
},
overlay : {
speedOut : 0,
opacity: 0.3,
css: {'background-color': '#cdc3b7'}
}
}
});
});
You don't have to initialize the same .fancybox selector twice. In other words, you don't have to do :
$(".fancybox").fancybox({
// options
});
... and later :
$(".fancybox").fancybox();
#fancy_content is not a valid fancybox selector (at least not for v2.x)
$("#fancy_content").empty(); is outside of the .ready() method. Anyway is useless as explained above.
callbackOnClose is not a valid API option (use afterClose instead if needed)
This script works perfectly fine cross-browser :
$(".fancybox").fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
/*
// yo don't need this
,
callbackOnClose: function() {
$("#fancy_content").html(" ");
}
*/
});
... as you can see in this JSFIDDLE. Make sure you test it with FF (works fine with my FF v17.0.1)
I am having an issue getting Fancybox's YouTube video implementation working on my localhost. When I load the page I get this error:
Unsafe JavaScript attempt to access frame with URL http://sites:8888/clients/project_name/v1/products/index from frame with URL http://www.youtube.com/embed/RtXSVGsQ8N0. Domains, protocols and ports must match.
I obviously want to make sure the implementation is working correctly before I push it to the live server.
Thanks in advance.
Seems you are either trying to do a cross domain ajax call. Whats your browser?
To clarify on ToyDaVirus, make sure you specify type as iframe in parameters.
i.e. 'type' : 'iframe'
$('#selector').click(function() {
$.fancybox({
'padding' : 10,
'autoScale' : false,
'transitionIn' : 'elastic',
'centerOnScroll' : true,
'overlayColor' : '#000',
'transitionOut' : 'none',
'title' : this.title,
'width' : 680,
'height' : 495,
'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
'type' : 'iframe',
'swf' : {
'wmode' : 'transparent',
'allowfullscreen' : 'true'
}
});
return false;
});