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.

Fancybox iframe not working when called via javascript function

I tried calling iframe in a fancybox, but it is not working.
Here is what I wrote:
var paramsFancy={
'transitionOut': 'elastic',
'transitionIn': 'elastic',
'speedOut': 300,
'speedIn': 500,
'autoScale': true,
'centerOnScroll': true,
'autoDimensions': true,
'href' : '/index.php'
};
$.fancybox.open(paramsFancy);
I read the people comments from Open fancybox from function but nothing works for me.
Can anyone please help?

If you are using fancybox v1.3.4 (my guess, because the API options in your code above) then you need to do this :
$.fancybox(paramsFancy);
... because $.fancybox.open() is not a valid method for v1.3.x and below. It was introduced for v2.x and above.
Additionally, if you want to open an iframe, then you need to add the type API option to your settings like :
var paramsFancy = {
transitionOut: 'elastic',
transitionIn: 'elastic',
speedOut: 300,
speedIn: 500,
autoScale: true,
centerOnScroll: true,
autoDimensions: true,
href : '/index.php',
type: "iframe" // need this for external pages
};
$.fancybox(paramsFancy);
See JSFIDDLE using fancybox v1.3.4
On the other hand, if you are really using fancybox v2.x, then you need to update your API options like :
var paramsFancy = {
closeEffect: 'elastic', // transitionOut
openEffect: 'elastic', // transitionIn
closeSpeed: 300, // speedOut
openSpeed: 500, // speedIn
fitToView: true, // autoScale
autoCenter: true, // centerOnScroll
autoSize: true, // autoDimensions
href: '/index.php',
type: "iframe" // you still need this
};
Notice I commented out the options for v1.3.4
Then you could either use
$.fancybox(paramsFancy);
or
$.fancybox.open(paramsFancy);
... since the first method is backwards compatible.
See JSFIDDLE using fancybox v2.1.5

This should work :
var paramsFancy={
'transitionOut': 'elastic',
'transitionIn': 'elastic',
'speedOut': 300,
'speedIn': 500,
'autoScale': true,
'centerOnScroll': true,
'autoDimensions': true,
'href' : '#contentdiv',
'type': 'iframe'
};
paramsFancy.href='/index.php';
$.fancybox.open(paramsFancy);

fancybox not opening, not sure why

I am trying to open a fancybox with the latest version of fancybox which 2.3.4, The following code does not seems to be working, neither it is throwing an error.
I am just confused why it is not opening the Page:
$(".openmails1").click(function() {
var sender = $(this).attr('data-id');
var subject = $(this).attr('title');
var mailid = $(this).attr('rel');
$.fancybox.open({
href: '/account/compose.cfm?sender='+sender+'&subject='+subject+'&mailid='+mailid,
maxWidth : 600,
maxHeight : 900,
fitToView : true,
width : '70%',
height : '80%',
autoSize : true,
closeClick : false,
openEffect : 'none',
closeEffect : 'none',
scrolling : 'no'
});
});
Here is how i am calling it
<a data-fancybox-type="iframe" title="This is a Welcome Email" data-id="24" rel="myemail#domain.com" href="javascript:void(0);" class="openmails1">Inia Ornit</a>
Update #1
This is how it is being called:
<a data-fancybox-type="iframe" title="This is a Welcome Email" data-id="24" rel="myemail#mtdomian.com~24" class="openmails1">Inia Ornit</a>
There are four records with different details, but the class used is same:
Here I am using it like this
$(".openmails1").fancybox({
href: '/account/compose.cfm?sender='+$(".openmails1").attr('data-id')+'&subject='+$(".openmails1").attr('title')+'&mailid='+$(".openmails1").attr('rel')+'&frmaccount=1',
maxWidth : 600,
maxHeight : 900,
fitToView : true,
width : '70%',
height : '80%',
autoSize : true,
closeClick : false,
openEffect : 'none',
closeEffect : 'none',
scrolling : 'no'
});
It is always opening the First one, no matter if i open even the last record, always going as the first record, not sure why it is happening as like this

See this link with working example.
$.fancybox.open([
{
href : 'http://fancyapps.com/fancybox/demo/1_b.jpg',
maxWidth : 600,
maxHeight : 900,
fitToView : true,
width : '70%',
height : '80%',
autoSize : true,
closeClick : false,
openEffect : 'none',
closeEffect : 'none',
scrolling : 'no'
}
], {
padding : 0
});
Hope this helps.
UPDATE #1
According to your update code I think you have to change to
$(".openmails1").click(function(e) {
e.preventDefault();
$(".openmails1").fancybox({
href: '/account/compose.cfm?sender='+$(this).attr('data-id')+'& subject='+$(this).attr('title')+'&mailid='+$(this).attr('rel')+'&frmaccount=1',
maxWidth : 600,
maxHeight : 900,
fitToView : true,
width : '70%',
height : '80%',
autoSize : true,
closeClick : false,
openEffect : 'none',
closeEffect : 'none',
scrolling : 'no'
});
});
You have to create the fancy box to every hyperlink clicked. See jsFiddle with running example.
Hope it is what yooou're looking for.

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,