Develop Reference

cant set fancybox iframe from javascript

I am trying to set and call fancybox from within javascrip like this
$.fancybox.open({
type : 'iframe',
'width' : '75%',
'height' : '75%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
src : url,
smallBtn : false,
fitToView: false,
autoSize: false,
autoDimensions: false
})
It opens it fine but does not define the sizes, what am I doing wrong? o i need to set something else up? It just loads a page that displays a map, Thanks

Use either CSS or iframe.css option:
iframe : {
css : {
width : '75%',
height : '75%'
}
}
See docs - https://fancyapps.com/fancybox/3/docs/#iframe - for more info.

jquery fancy box in iframe call it from url

I have a jquery fancybox and I call it from url with #
$(document).ready(function() {
$('.fancybox').fancybox({
openEffect : 'elastic',
closeEffect: 'elastic',
'type' : 'iframe',
'overlayOpacity' : 0.1,
'overlayShow' : false,
'centerOnScroll' : true,
'autoSize': false,
'width' : 990,
'height' : 780,
});
$('.contact').fancybox({
openEffect : 'elastic',
closeEffect: 'elastic',
});
});
var thisHash = window.location.hash;
$(document).ready(function() {
if(window.location.hash) {
$(thisHash).fancybox().trigger('click');
}
$('.contact').fancybox();
}); // ready
I have managed to call it from url with # but the div containing the link for the fancy box becomes hidden when calling it from url.
If you open the page without # calling it the div is shown(not hidden).
Any ideas?

Fancybox Vimeo Video is not clickable (no fullscreen possible)

I display vimeo videos in my fancy box. The videos are shown but I can't click on the content of the fancy box if there is an vimeo video inside.
$('.fancybox-media').fancybox({
openEffect : 'none',
closeEffect : 'none',
'width' : 900,
'height' : 506,
fitToView : false,
autoSize: false,
closeClick: false
});
Any ideas?

YouTube in FancyBox is too small

Clicking the image in the left sidebar at http://vaiman.org/ we have too small YouTube box. I need to make YouTube area greater. How?
Here is my JavaScript code (http://vaiman.org/wp-content/themes/vaiman/javascript/youtube.js):
jQuery(document).ready(function() {
jQuery(".various").fancybox({
maxWidth : 1000/*850*/,
maxHeight : 1000/*638*/,
minWidth : 1000/*850*/,
minHeight : 1000/*638*/,
fitToView : false,
width : 1000/*'100%'*/ /*70%*/,
height : 1000/*'100%'*/ /*70%*/,
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
});
What is my error?

This code works below you can see an example in jsfiddle here
<div id="single_1"><a href="http://www.youtube.com/embed/A3Atj57r15U?autoplay=1" class="various fancybox.iframe">
<img src="http://vaiman.org/wp-content/themes/vaiman/images/photo1.jpg" width="191" height="91" alt=""></a></div>​
$(document).ready(function() {
$(".various").fancybox({
maxWidth: 800,
maxHeight: 600,
fitToView: false,
width: '70%',
height: '70%',
autoSize: false,
closeClick: false,
openEffect: 'none',
closeEffect: 'none'
});
});​

Problem adjusting Fancybox iframe overlay width and height

I'm using Fancybox to create an overlay with an iframe everything works but I can't seem to change the values of the width/height. I'm using fancybox-1.2.6 and jquery1.2.6
$(document).ready(function() {
$("a.iframe").fancybox({
'width' : '75%',
'height' : '75%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
});
and
<a class="iframe" id="iframe" title="Sample title" href="http://google.com/">iframe</a>

Here's how to manually open an iframe in a fixed sized fancybox
$.fancybox.open({
'href': 'mypage.html',
'type': 'iframe',
'autoSize': false,
'width': 800,
'height': 800
});

you have to directly change the css of it since fancybox isnt actually part of jquery.
$("#fancybox").css({'width': '500px', 'height': '500px'});
there is that way or something like this,
jQuery(document).ready(function() {
$.fancybox(
{
'autoDimensions' : false,
'width' : 350,
'height' : 'auto',
'transitionIn' : 'none',
'transitionOut' : 'none'
}
);
});

I solved this problem by adding a width and a height attribute to the link tag like this:
<a id="various3" href="action.html" width="60%" height="60%">Iframe</a>
And you fancybox code:
$("#popup").fancybox({
'autoScale' : false,
'width' : $("a#popup").attr("width"),
'height' : $("a#popup").attr("height"),
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'type' : 'iframe'
});

Please do not use Firefox. It doesn't work, they did not make height compatible, try chrome instead! (latest Firefox today!)
if it is a supportable browser, remove the quotes for px, put quotes for %, like:
'width': 400; //400 pixels;
'width': '75%'; //75% of the screen
//height do not work on Mozilla Firefox (today!)

just try this
$(".fancyboxiframe").fancybox({
fitToView:false,
autoSize:false,
'width':parseInt($(window).width() * 0.7),
'height':parseInt($(window).height() * 0.55),
'autoScale':true,
'type': 'iframe'
});

This has worked for me in the past. I had to set both the height and the width.
$(document).ready(function() {
$("a.iframe").fancybox({
'autoDimensions' : false,
'width' : 600,
'height' : 150,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'type' : 'iframe'
});
});

try to use:
'maxHeight' : 380,