Here is what I have thus far…
$(document).ready(function() {
$(“#tour a”).fancybox({
‘width’ : 800,
‘height’ : 675,
‘type’ : ‘iframe’,
‘autoScale’ : false,
‘padding’ :0
‘onComplete’ : function(){
$.fancybox.resize();
}
});
});
But as soon as I throw in the onComplete stuff fancybox fails to work. Anybody know what am I missing?
You’re missing a comma after ‘padding’:0
Thanks Raffles. That was one of my hundreds of trial and errors and I forgot the comma. Adding the comma does make it work again but it does not resize still. Basically to start I want it at height 575 width 700 and when I click the “larger” link it should resize to height 675 width 800. This is also a fancybox iframe (ie outside page). Thanks! Is this possible? I searched for hours to no avail.
resize() does it to match the size of the content. With an iframe that’s probably hard to determine. Try setting the width and height to 575 and 700 to start with, then doing resize().
If that doesn’t work, instead of using resize(), just set the height yourself:
$(document).ready(function() {
$("#tour a").fancybox({
'width' : 700,
'height' : 575,
'type' : 'iframe',
'autoScale' : false,
'padding' :0
'onComplete' : function(){
$('#fancybox-content').css({height:'800px',width:'675px'});
}
});
});
Thanks again Raffles! Unfortunately that did not work. It appears to be just making it the larger size as soon as its loaded and not after I click the link. Others in other forum posts have attached the function to a click event but they didnt seem to be having any luck either.
here is my test page - just click the red house in the top right corner. http://goo.gl/FVntF
Can you show me how to just set the height and width myself upon that “larger” link being clicked?
Still looking for a manual way of resizing fancybox if anyone knows?
this guy claims this is all that is needed but it’s greek to me. Does anyone know how to add this? http://www.sajithmr.me/fancybox-runtime-height-change/
Ah, I missed the bit about clicking the link. onComplete is obviously going to be inadequate then. You need a click event to be set up after the onComplete event.
You’ll need some “special” code because the link is in an iframe, setting the context to the document within the iframe.
$(document).ready(function() {
$("#tour a").fancybox({
'width' : 700,
'height' : 575,
'type' : 'iframe',
'autoScale' : false,
'padding' :0
'onComplete' : function() {
$('a.tournav', $('#fancybox-frame').get().contentWindow.document).click(function() {
$('#fancybox-content').css({height:'800px',width:'675px'});
});
}
});
});
That ought to work. The only thing you might want to change (other than the 1990s table-based layout) is the a.tournav selector, to make it more specific (I haven’t checked if other links have that class name).
EDIT: I also really need to recommend getting rid of the context-menu blocking script you have there. That’s going to put a LOT of people off (like me). Just imagine if they want to open one of your links in a new tab - they won’t be able to! It’s not going to stop people copying anything on your website (CTRL+U for starters) - after all, it’s on the internet.
Thanks for your time Raffles. But arg, that does not work - looks like it should though! Fancybox loads fine with the original dimensions but fails to change in size when that link is clicked. It just adds scrollbars. Any thoughts as to why? Thanks!
I understand what your saying about the no right click script - its just a reminder that its copyrighted. I was just getting hundreds of out of work mothers starting daycares copying my whole site verbatim. Copying a word, or sentence, or even whole paragraph I can live with but not my whole entire site. Something had to be done. And me calling all of them over and over was getting old.
On that page you linked to, the original size is 675x800, so if you change it onclick to 675x800 nothing is going to happen! This is because this JS is still there:
$(document).ready(function() {
$("#tour a").fancybox({
'width' : 700,
'height' : 575,
'type' : 'iframe',
'autoScale' : false,
'padding' :0,
'onComplete' : function(){
$('#fancybox-content').css({height:'800px',width:'675px'});
}
});
});
You don’t want the onComplete function to set the new size - you just want it to set up the click event for it. You just haven’t updated it to what I last posted.
Well I’m retarded some times but not that retarded (hopefully) lol. I tested that last solution locally and just didn’t update it on the server. I will make a simple striped down test page with full path links so it is easy for you or others to test out possible solutions. I will post that in a few…
OK! Here it is stripped down with absolute paths so its a copy and paste easy test. http://goo.gl/oQ2b9
I would be ever so thankful if we could figure this out. As I dont really want to just display the larger size as default. Thnaks for your help!
I don’t know why, but the problem lies with the contentWindow bit. It should work, because the stuff in the iframe is from the same domain (I’m trying it on my local 127.0.0.1 server). With Firebug I can see the iframe has the contentWindow property, but accessing it with JS brings it up as “undefined”. Very odd, and I’m tired so I need to go to bed.
The iframe is pretty nasty. I think a better idea is to keep the “larger” link outside it and put an “inline” div in the fancybox instead. Give this a whirl:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>{ visibility: inherit; } Testing</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://www.buildingblockshomedaycare.com/jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.buildingblockshomedaycare.com/jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.css">
<style>
#tourframe {height:95%;width:100%;overflow:auto;border:0}
#tourbox {display:none; height:100%}
</style>
<script type="text/javascript">
var cl = false;
$(document).ready(function() {
var tourlink = $("#tour a").eq(0),
tourbox = $('#tourbox'),
toggler;
tourlink.fancybox({
width:700,
type:'inline',
autoDimensions:false,
height:575,
onComplete: function() {
var iframe = $('iframe', tourbox);
toggler = $('div > a:first-child', tourbox)[0];
iframe.attr('src', 'tour.html');
tourbox.css('display', 'block');
$(toggler).click(function() {
toggler.smaller = !toggler.smaller;
var txt = toggler.smaller ? 'Smaller' : 'Larger',
css = toggler.smaller ? {width:'575px',height:'800px'} : {width:'700px',height:'575px'},
framew = toggler.smaller ? '595px' : '720px';
$(this).text(txt + ' version');
$('#fancybox-content').css(css);
$('#fancybox-content > div').css(css);
$('#fancybox-wrap').css('width', framew);
$.fancybox.center();
return false;
});
},
onCleanup: function() {
tourbox.css('display', '');
$(toggler).text('Larger version');
$(toggler).unbind('click');
}
});
});
</script>
</head>
<body>
<div id="tour"><a href="#tourbox"><img src="../images/virtualtour.jpg" width="115" height="155" border="0" alt="Virtual Tour Click Here"></a></div>
<div id="tourbox">
<div><a href="#size-toggle">Larger version</a> <a>Email this tour</a></div>
<iframe src="" height="575" width="700" id="tourframe"></iframe>
</div>
</body>
</html>
Wow. That works but none of the fancybox images show. Like the shadow and the close link etc. And the white padding around the thing is a little irregular. That thing is woven pretty deep Im not even sure where to begin.
That’s something Firebug can help you fix in a jiffy. Just inspect the elements in question and see why their CSS images aren’t being applied. Probably some silly mistake or conflict or selectors.
This script works great in IE. But I am having trouble getting it work in Firefox. In IE, I have a 400x600 popup page, and when clicking on a link in it, the user is taken to a webpage within that same box which resizes perfectly.
However, when testing in Firefox it just shows scrollbars and the same popup. No resizing.
Any known issues with FF and this? Please advise.
Thx.