GreyBox logo
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.

Sites using GreyBox

Powered by Skeletonz