How to Use Lightbox to Open iFrame
Lightboxes add a "wow factor" to many high-end commercial websites. When you click the website's link, the screen goes dim, a bright box appears to float above the screen and then fills with the webpage. Add this to your site with some basic code and planning. Lightboxes with inline frames (iframes) are as easy to acquire as saving a single folder on your webserver, then adding a few lines of code to any page in your website.
Other People Are Reading
Instructions
-
-
1
Download the free GreyBox_v5_54 file from orangoo.com/labs/GreyBox/. Unzip the file. Upload the "greybox" folder into your main (root) web directory.
-
2
Paste code into the header section (between <head> and </head>) of the HTML of any web page where you want a lightbox to appear, replacing "www.mysite.com" with your website:
<script type="text/javascript">
var GB_ROOT_DIR = "http://www.mysite.com/greybox/";
</script>
<script type="text/javascript" src="greybox/AJS.js"></script>
<script type="text/javascript" src="greybox/AJS_fx.js"></script>
<script type="text/javascript" src="greybox/gb_scripts.js"></script>
<link href="greybox/gb_styles.css" rel="stylesheet" type="text/css" /> -
-
3
Create the link for your lightbox in the body of the HTML of the page from Step 2 (between <body> and </body>) with the following code, replacing "mysite" with the website you choose:
<a href="http://www.mysite.com" rel="gb_page_center[400,500]"> Lightbox to display mysite's web site, 500 pixels wide, 400 pixels high, in the center screen.</a>
Change the height and width values to get different sized lightboxes.
-
4
Test the lightbox by opening the web page in a browser and clicking on the link. Once it works as you wish, you can add lightboxes to other pages.
-
1
Tips & Warnings
Greybox provides documentation at orangoo.com/labs/GreyBox/Documentation/. Read the examples and normal and advanced usage sections for added functionality. Also read the FAQ pages for ideas.
References
- Photo Credit Comstock/Comstock/Getty Images
