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:

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?

What browsers are supported?

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