A pop-up window that doesn't suck.
Introduction
GreyBox can be used to display websites, images and other content in a beautiful way.
Why use GreyBox:
- It does not conflict with pop-up blockers
- It's only 22 KB!
- It's super easy to setup
- It's super easy to use
- You can easily alter the style as it is controlled through CSS
Examples
One website
To trigger GreyBox you'll only need to append a rel tag on your a tags:
<a href="http://google.com/" title="Google" rel="gb_page_fs[]">Launch google.com in fullscreen window</a>
Website gallery
Image gallery
It takes very little code to display image galleries:
<a href="greybox/night_valley.jpg" rel="gb_imageset[nice_pics]" title="Night valley">
<img src="greybox/night_valley_thumb.jpg" />
</a>
<a href="greybox/salt.jpg" rel="gb_imageset[nice_pics]" title="Salt flats in Chile">
<img src="greybox/salt_thumb.gif" />
</a>
Installation
Step 1
Append following to your header section. GB_ROOT_DIR is the URL where static files are located:
<script type="text/javascript">
var GB_ROOT_DIR = "http://mydomain.com/greybox/";
</script>
GB_ROOT_DIR should be absolute.
Step 2
Append also following scripts and one stylesheet:
<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" />
AJS_fx.js is optional. It's used for effects.
Step 3
You are ready to use GreyBox. Look on the documentation to see details and examples.
Where could it be used?
- Showing external pages
- AJAX uploading of files
- Showing internal pages (login, user preference, properties, contact formulas etc.)
- Showing a video or a flash animation
- Showing images
- Showing product information
- Admin sections
- ...
What browsers are supported?
- Safari
- Firefox 1.5+
- Internet Explorer 5.5+
- Opera 8.5+
Other browsers may also be supported.
Need help? Join the GreyBox group
Please use our Google group if you need help:
You'll need to become a member if you want to post.
