jloop == outburst

[...] following hack, mostly taken from the method described here, allows you to dynamically any web page into a fancybox straight from [...]

Hi Steven. Sure… we have it working here: http://www.downtownlbbusiness.com/grow/resources-for-downtown-businesses

If you are using something like swfObject to embed your flash, make sure your hidden div is not inside the div that swfObject replaces with Flash. It must be a div outside of that. Best of luck.

jay added these pithy words on Aug 16 09 at 10:28 pm

Hey Chris. I haven’t really tried it from AS3, but obviously you will need to use the ExternalInterface methods for calling javascript instead of GetURL. The procedure is slightly different, but as long as you can call a javascript function, there shouldn’t be an issue.

I just edited the post to clarify that the hiddenclicker a tag we are using was referring to a custom fancybox element. I should have pointed that out in the original post. Ultimately, any a tag that calls fancybox should work, but my example uses a custom fancybox call.

jay added these pithy words on Aug 18 09 at 10:35 am

Hello,

I seem to get it working on safari but not FF (dont care about IE…lol) Also have the same issue as Cheryl where you cant link to an thml page outside of where the main page sits.

Thanks

Jorge added these pithy words on Aug 26 09 at 10:37 am

I can’t thank you enough for this little script.

I already had a hard enough time trying to get the fancybox working with html inside, and the flash to fancybox problem was doing my head in.

Keep up the great work

Weng added these pithy words on Sep 28 09 at 3:15 am

BRILLIANT!! thank you!

George added these pithy words on Oct 14 09 at 12:46 pm

De lujo, me sirvio bastante!!!!

Plog added these pithy words on Nov 05 09 at 1:29 pm

Wonderful! It works just fine. Thanks a lot!

Carlos added these pithy words on Dec 10 09 at 12:38 pm

This worked beautifully! Thank you so much!

BrandCulture.com is where I used it. If you click on blog you’ll see it come up in a lightbox.

Jeff Walden added these pithy words on Dec 21 09 at 3:41 pm

I’ve got index.html like this:
http://paste-it.net/public/ece683f/

and firebug says: “callFancy is not defined”

anyway: when I set both size to 100% in swfObject, firefox doesn’t show anything :/

can someone help me with that?

Andrew added these pithy words on Jan 05 10 at 5:35 pm

@ Andrew
In AS3 you have to use ExternalInterface class to communicate with javascript.

http://tinyurl.com/ffpmw

chris guy added these pithy words on Feb 03 10 at 3:34 pm

it works with any browser with this function :
$(document).ready(function() {
$(“a.overlay-flash”).fancybox({
‘width’ : ’75%’,
‘height’ : ’75%’,
‘autoScale’ : false,
‘transitionIn’ : ‘none’,
‘transitionOut’ : ‘none’,
‘type’ : ‘iframe’,
‘padding’ : 0,
‘zoomOpacity’ : true,
‘zoomSpeedIn’ : 500,
‘zoomSpeedOut’ : 500,
‘overlayOpacity’ : 0.9,
‘hideOnContentClick’ : false
});
});

don’t forget to set swfobject with
params.wmode = “transparent”;

djoulle added these pithy words on Feb 11 10 at 2:01 am

Dont forget to add the next line:
‘type’ : ‘iframe’,

Just add it to this code that you had to insert on between the second and third line (just above the ‘padding’ line) …:

$(document).ready(function() {
$(“a.overlay-flash”).fancybox({
‘padding’ : 0,
‘zoomOpacity’ : true,
‘zoomSpeedIn’ : 500,
‘zoomSpeedOut’ : 500,
‘overlayOpacity’ : 0.75,
‘frameWidth’ : 530,
‘frameHeight’ : 400,
‘hideOnContentClick’ : false
});
});

nl-x added these pithy words on Feb 17 10 at 4:04 am

Graciassssssss me fuinciono perfecto!!!! felicidades xD

osca added these pithy words on Mar 13 10 at 9:40 pm

Michael – yes we try not to mess with the .js files that are part of the fancybox package. So we create a separate .js file and include it in the header file. You can see the page where we are using this technique on a site we did here: http://www.downtownlbbusiness.com/grow/resources-for-downtown-businesses

jay added these pithy words on Mar 15 10 at 9:03 pm

Hi Guys thanks for an elegant solution. I’m almost there with my implementation (Display a Flex 3 questionnaire)

When I call the fancybox function from a link/image either inside or outside the “hidden_clicker” div my flex app displays fine in the fancybox, so that tells me that the fancybox functionality is working ok

When I invoke callFancy() – (with the parameter removed) I know the ExternalInterface method in flex is working when I get callFancy() to write a message to the screen.

But I cant get the hidden link to click. Any help would be greatly appreciated. (Maybe its a syntax issue I cant spot)
Cheers
Brian

the code

function callFancy()
{
//document.write(“Hello!!”);
var j1 = document.getElementById(“hiddenclicker”);
j1.href = “QuestionnaireMain.swf”; // embedded swf to be displayed in fancybox
$(‘#hiddenclicker’).trigger(‘click’);
}

$(document).ready(function() {
$(“#poll”).fancybox({
‘titleShow’ : true,
‘titlePosition’ : ‘inside’,
‘padding’ : 0,
‘transitionIn’ : ‘none’,
‘transitionOut’ : ‘elastic’,
‘type’ : ‘swf’,
‘width’ : 484,
‘height’ : 492
});
});

Hidden Clicker

swfobject.embedSWF(“pollInitiator.swf”, “hidden_clicker”, “123″, “82″, “9.0.0″);

Brian added these pithy words on Mar 24 10 at 8:12 am

Everything is working great except the buttons that link to additional swf files. They all launch into fancybox at the same size and won’t resize to actual pixels, any ideas?

Chris added these pithy words on Mar 24 10 at 8:41 am

Thanks for this great guide, I got it to work in less than 10 minutes.

I just have one question, how can I pass a title for a image and/or modify fancybox’s options ??

Thanks,

mehpac added these pithy words on Mar 26 10 at 8:21 am

How to use the different ID of example to add some subtitle etc?

I tried:

getURL(“javascript:callFancy({‘LINK’, ‘example5′, ‘BLABLA’});”);

or

getURL(“javascript:callFancy({href: ‘LINK’, id: ‘example5′, title ‘BLABLA’});”);

or

getURL(“javascript:callFancy(href: ‘LINK’, id: ‘example5′, title ‘BLABLA’);”);

But nothing’ seems to work. Someone has find how to do it?

Cloud added these pithy words on Mar 28 10 at 3:14 pm

Add title=”#” after href=”#” in the hiddenclicker div

Cloud added these pithy words on Mar 29 10 at 5:07 am

Still not able to get the title to display. It seems as though “Cloud” has done a bit of research here but something is missing on my end if they have a working example.

My index.html code:

Hidden Clicker

$(document).ready(function() {
$(“a.overlay-flash”).fancybox({
‘width’ : ’75%’,
‘height’ : ’75%’,
‘autoScale’ : false,
‘transitionIn’ : ‘none’,
‘transitionOut’ : ‘none’,
‘titleShow’:true,
‘titlePosition’:'inside’,
‘type’ : ‘iframe’,
‘padding’ : 0,
‘zoomOpacity’ : true,
‘zoomSpeedIn’ : 500,
‘zoomSpeedOut’ : 500,
‘overlayOpacity’ : 0.9,
‘hideOnContentClick’ : false
});
});

function callFancy(my_href, my_title) {
var j1 = document.getElementById(“hiddenclicker”);
j1.href = my_href;
var j2 = document.getElementById(“hiddenclicker”);
j2.title = my_title;
$(‘#hiddenclicker’).fancybox({‘titlePosition’:'inside’});
$(‘#hiddenclicker’).trigger(‘click’);
}

My actionscript call:
button.onRelease = function() {
getURL(“javascript:callFancy(‘http://www.google.com’,'does this work’);”);
}

Anybody see what I’m missing??

Everything else works great, just trying to ad dynamic title display

THANKS!!

Michael added these pithy words on Apr 01 10 at 2:14 pm

Another issue…

Anyone figure out how to pass variables through the getURL function? it seems that it won’t work unless it has the quotes around each string. If it has quotes it takes it literally. Variables are passed not as their value but the text.

Works:
button.onRelease = function() {
getURL(“javascript:callFancy(‘http://www.google.com’,’title’);”);
}

Doesn’t:
var URL:String = “http://www.google.com”
button.onRelease = function() {
getURL(“javascript:callFancy(‘URL’,’title’);”);
}

Doesn’t:
var URL:String = “http://www.google.com”
button.onRelease = function() {
getURL(“javascript:callFancy(URL,’title’);”);
}

Help?

Thank you!

michael added these pithy words on Apr 01 10 at 6:06 pm

hi~

This has been such a great help. I have one question, is there anyway to have 2 separate flash buttons that open different sized iframe windows. can the dimensions be set from flash?

Best,
Petra

Petra added these pithy words on May 10 10 at 3:00 pm