How To Use Greybox

Last update: December 16, 2010
Date posted: December 16, 2010
Created by ninjazhai
banner-3
Greybox is another beautiful way not only to display your site contents or websites in a pop up window but also to do database operations in it. 
 
Image from http://orangoo.com
How To’s.
*Comments on codes serves as its explanations.
 
Step 1: Download Greybox here.
 
Step 2: Create your js/ directory and place greybox in it.
 
Step 3: Create your index.php file and it should have the following codes in it:

 

<html>
     <head>
          <title>How To Use Greybox</title>

          <script type="text/javascript">
               var GB_ROOT_DIR = "js/greybox/";
          </script>
          
          <script src="js/greybox/AJS.js" type="text/javascript"></script>
          <script src="js/greybox/AJS_fx.js" type="text/javascript"></script>
          <script src="js/greybox/gb_scripts.js" type="text/javascript"></script>
          <link href="js/greybox/gb_styles.css" rel="stylesheet" type="text/css">       

     </head>
<body>

     <b>This is the greybox parent window</b>
     <p>
          <a href="greybox_pop_up.php" title="Greybox pop up" rel="gb_page_center[500, 500]">
               Click this link to greybox pop up
          </a>
     </p>

</body>
</html>

 

Step 4: Create your greybox_pop_up.php with these codes in it:

 

 

<html>
     <head>
          <title>This is the greybox pop up</title>
     </head>
<body>
     <h2>This is the greybox pop up window</h2>
</body>
</html>

 

Step 5: Run your index.php, click the link to test if greybox is working.
 
our index.php
 
Greybox pop up after clicking the “Show greybox pop up link”
 
Tips.
 
You can do many things with greybox. It prevents you from the hassle of refreshing the whole page.