jloop == outburst

So we searched high and low for a good answer to this one and finally cobbled together a good solution.

Fancybox is a really nice jQuery plugin that gives you some handsome options for the div overlay. We are using it in a new project, but needed to call it from Flash, and there was really no documentation for how to do this. Hopefully our solution will help someone else.

Here’s the really simple javascript function we added onto our page:

<script type="text/javascript" >
function callFancy(my_href) {
var j1 = document.getElementById("hiddenclicker");
j1.href = my_href;
$('#hiddenclicker').trigger('click');
}
</script>

Now somewhere on the page we had to add a “hidden” <a> tag that we could manipulate with javascript like this:

<div id="hidden_clicker" style="display:none;">
<a class="overlay-flash" id="hiddenclicker" href="#" >Hidden Clicker</a>
</div>

The tag is wrapped in a div tag that has a display:none set so it doesn’t show in the browser.

Next part is the ActionScript. We embedded the SWF using SWFObject and can call the javascript function just like this:

getURL("javascript:callFancy('/linktopage.html');");

That’s it. Hope it helps someone out there.

UPDATE 8/18/09: I neglected to point out that the A class assigned to our “hiddenclicker” div is a custom javascript implementation to launch a certain window. Here is the code we added to an included .js file:


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

Sorry for the omission…

Subscribe to comments Comment | Trackback |

Post Tags:

Browse Timeline

Comments ( 57 )

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

Dynamically Calling Fancybox from Javascript « ThingsILearned added these pithy words on Jan 27 10 at 6:38 pm

do you have a working demo? I’ve tried exactly what you said to do, and i get nothing!

Thanks

Steven added these pithy words on Aug 16 09 at 4:32 pm

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

I tried this using Action script 3 and i had to change the geturl method to the as3 method. This seems to break the javascript function Any thoughts, ideas?

Chris added these pithy words on Aug 17 09 at 6:29 am

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

Thanks for putting together the code. I got it to work beautifully with a relative html page. I’ve hit a speed bump when I try to insert an absolute path like http://yahoo.com

Any ideas on why most of the absolute paths I insert are breaking the fancybox? The dark overlay appears but the content box with the X never appear.

Cheryl added these pithy words on Aug 25 09 at 2:14 pm

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

When I include the code I get an “Object Expected” on $(‘#hiddenclicker’).trigger(‘click’);

Could someone tell me what I miss here.

Rachid added these pithy words on Sep 01 09 at 2:56 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

Thanks for this script!
Anybody knows how to put pictures in group?
So you can navigate trough fanybox once you get the pictures out?

Mario added these pithy words on Oct 01 09 at 6:03 am

BRILLIANT!! thank you!

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

This is great but i’m using XML to load external images and links. Is there away I can call this javascript function from an XML file?

The way my XML is currently calling links… link=”http://yourLinkHere.com/”

Jason added these pithy words on Oct 19 09 at 2:55 pm

De lujo, me sirvio bastante!!!!

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

In IE 7 fancybox overlay not work.Please Help me

A.B.T.Raju added these pithy words on Nov 28 09 at 5:11 am

Wonderful! It works just fine. Thanks a lot!

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

thank you so much, works like a charm

sky added these pithy words on Dec 11 09 at 1:27 am

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

Can someone give some working demo swf and the other source files?

in AS3 I have:
var url:String = “javascript:callFancy(‘./image.png’);”;
var request:URLRequest = new URLRequest(url);
navigateToURL(request);

and I did the same rest but it doesn’t work at all.

Andrew added these pithy words on Jan 05 10 at 1:57 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

Don’t work in Chrome 3

Carlos Silva added these pithy words on Feb 08 10 at 10:04 am

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

Hello,
I’ve implemented this article and it works, well, almost…
fancybox works correctly when loading some object like images, flash file etc… the problem is when I try to load an html page, the page is displayed correctly only two times, the third appears a javascript error and no page is displayed! (fancybox shows the ‘thinking’ icon…
Any Idea?

Thanks

Lluis added these pithy words on Feb 16 10 at 12:42 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

Thanks a bunch. I used it to launch an swf from another flash clip, while both are loaded with swf object. Works great. Thanks.

Patrice added these pithy words on Mar 03 10 at 1:48 pm

Graciassssssss me fuinciono perfecto!!!! felicidades xD

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

I don’t have a lot of javascript/jquery experience and there’s a step of this solution that I need spelled out if it’s not too much trouble.

“the A class assigned to our “hiddenclicker” div is a custom javascript implementation to launch a certain window. Here is the code we added to an included .js file”

Exactly where is the code added?
Is a special file created just for this with the js extension?
Or is it added to one of the included js files that come with fancybox?

michael added these pithy words on Mar 15 10 at 7:27 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

any examples of an AS3 implementation? thanks — hope i can get this puppy working!

Lance added these pithy words on Mar 16 10 at 2:50 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

I can’t display the html code in here. If I invoke the callfancy() function from flex – with document.write(“Hello!!”); uncommented the function writes to the page but I cant get the hidden link to click. Sorry if I’m repeating myself here Is my use of the href link ok here? I know that QuestionnaireMain.swf displays fine when I run fancybox in the more standard way of clicking an image link

Brian

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

Brian added these pithy words on Mar 24 10 at 8:25 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

Thank you! My test only works when was tested online, with swfobjects and this code (note the “type”=”iframe”):

$(document).ready(function() {
$(“a.overlay-flash”).fancybox({
‘width’ : ’75%’,
‘height’ : ’75%’,
‘autoScale’ : false,
‘transitionIn’ : ‘none’,
‘transitionOut’ : ‘none’,
‘type’ : ‘iframe’,
‘hideOnContentClick’ : false
});
});

Sergio Almeida added these pithy words on Mar 26 10 at 6:56 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

About the last post.. I found the following solutions

Title:
var j1 = document.getElementById(“hiddenclicker”);
j1.href = “./example/1_b.jpg”;
jl.title = “hello”;//does NOT work, instead try:
document.getElementById(“hiddenclicker”).title = “hello” // this works great

Options:
Place your options before the trigger like this
$(“a#hiddenclicker”).fancybox({‘titlePosition’ : ‘inside’});

mehpac added these pithy words on Mar 26 10 at 8:46 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

Ok, i found the solution:

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’);
}

And then

Hidden Clicker

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

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

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

This may bit obvious but why isn’t the J1 variable used invoke the trigger after it is initialized?

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

Brian added these pithy words on Mar 30 10 at 5:37 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

Answered my own question:

All above code is correct except for the function

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’).trigger(‘click’);
}

I removed the line:
$(‘#hiddenclicker’).fancybox({‘titlePosition’:’inside’});

And it worked great!

Thank you for pioneering this great script and thank you to all who continue to tweak it.

Michael added these pithy words on Apr 01 10 at 2:28 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

I’m having issues getting this to work in IE — I found a solution for AS3 — but just can’t get this son of a bitch to work in IE…

to see my code — check this post:
http://www.gotoandlearnforum.com/viewtopic.php?f=29&t=27453

Has anyone messed with this in IE?

Thanks!

Lance added these pithy words on Apr 28 10 at 12:01 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

Thanks soo much! Works beautifully!
If like me you are using XML to load external images and links, just call the javascript from the XML rather than the flash. ie

link=”javascript:callFancy(‘/linktopage.html’)”

Alexandra added these pithy words on Jun 05 10 at 9:14 am

I am confused about where to plug in that added bit of code that was posted on 8/18/09. It says to add it to an included .js file…. but which one? where do I put this code?

Brando added these pithy words on Aug 07 10 at 5:35 pm

WOW, thanks guys for sharing this!

Maxim Larivière added these pithy words on Nov 10 10 at 12:39 pm

Excelente, funcionó!!!!
Te lo agradezco mucho

rodion6 added these pithy words on Feb 20 11 at 3:53 pm

Great solution. thanks for saving my life.

David added these pithy words on Apr 18 11 at 11:08 pm

Demo plz….

Elod added these pithy words on Oct 08 11 at 1:03 am

More better a sampleif u hawe.

Elod added these pithy words on Oct 08 11 at 1:04 am

That’s the single most helpful bit of advice this week! Many thanks.

andy added these pithy words on Oct 27 11 at 10:37 am

thanks a lot!!! It works very fine

Mic added these pithy words on Dec 07 11 at 3:46 pm

I found out about this amazing site: http://www.fight4fun.it/ and, need help with how this website was done. I really don’t like flash websites and the main reason is when you want to send a friend a specific page you can’t as it’s all the one URL. but I like the style of flash.

Sting added these pithy words on Jan 21 12 at 3:45 am

Need some Serious help with this.

http://www.ascent-ps.com

the purple button. I need that to open up fancybox.

Done everything in this but still now working. Help!

Tim Clarkson added these pithy words on Jan 22 12 at 3:15 pm

thanks so much, work like a charm

jhon added these pithy words on Feb 28 12 at 3:11 am

Thank you very much for the script. It works perfectly. Really appreciate for the share…..

Kazi Mohammad Ekram added these pithy words on Apr 21 12 at 6:40 am

Browse Timeline

Comments ( 57 )

Add a Comment