Step 1:
Download Facebox and jquery-1.2.2.pack.js (Right click and "Save As")
Step 2:
Create two html pages. I created one named: "demo" and "popup" for demonstration purposes. You can name them whatever you want. You should have the facebox files in a folder as well with the jquery file.
Make sure you have your flash file that is going to execute the facebox popup too.
These are the files that should be in the "facefiles" folder:
Make sure you have your flash file that is going to execute the facebox popup too.
These are the files that should be in the "facefiles" folder:
Step 3:
Lets start with the main page where the javascript is going to be placed to tell the flash file to execute the popup. The code on the main page is tied in with the javascript that is going to be coded in the flash button.
The coded highlighted in black is the javascript code to call the popup command. Remember to add your scripts inside the header tag.
The coded highlighted in black is the javascript code to call the popup command. Remember to add your scripts inside the header tag.
Step 4:
Okay, now that we created the main page. Lets create the popup page where the content is going to be loaded into.
I made the most basic for test purposes and just wrote some text, I set the margins to zero's so that there is no padding around the iframe that we are going to code into the flash button on the next step:
I made the most basic for test purposes and just wrote some text, I set the margins to zero's so that there is no padding around the iframe that we are going to code into the flash button on the next step:
Step 5:
We are now ready to create a button in flash and add the javascript to it. Open Flash and create a simple button.
I created the button and placed the following code on top of it:
("jQuery.facebox('<iframe src=popup.html width=100% height=431 scrolling=no framborder=0></iframe>')");
More_Details is the name of my button, you can name the button to whatever you'd like.
To make the page load inside the popup I made an iframe that loads into it. I set the width to 100% so that it can adjust to the width automatically and the height can be 100% as well. You can set the width and height manually if you'd like as well.
From here on out you can put whatever you want in the iframe "popup.html"
From here on out you can put whatever you want in the iframe "popup.html"
Demo:
Here is a working example that I made using flash and facebox together. Click the button to see it in action!
Final Words:
Thank you for viewing my tutorial setup for facebox + flash. If you find any errors or flaws please let me know and I will update the tutorial asap. Sorry that it took so long to get up.
If you like this tutorial and want to display it on your website please give me credit for making a tutorial as well as a link back to my website I would really appreciate it. Thank you and good luck :)
For Questions, Comments, or if something is wrong with the tutorial that you need me to fix email me at:
<admin@squaredvision.com>
If you like this tutorial and want to display it on your website please give me credit for making a tutorial as well as a link back to my website I would really appreciate it. Thank you and good luck :)
For Questions, Comments, or if something is wrong with the tutorial that you need me to fix email me at:
<admin@squaredvision.com>