GreyBox jQuery Lightbox

GreyBox jQuery Lightbox

GreyBox jQuery Lightbox 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

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 href="greybox/salt.jpg" rel="gb_imageset[nice_pics]" title="Salt flats in Chile">
   <img src="greybox/salt_thumb.gif" />

How to use

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 = "";

GB_ROOT_DIR should be absolute.

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.

Download this fileView documentationView demo

Enjoyed this article? Subscribe to read more like it