January 22, 2007

GreyBox: Jazz up your Web site in 10 minutes

Author: Dmitri Popov

Want to add a couple of cool features to your Web site without delving into the world of Web programing? In this case, you might want to give GreyBox a try. It's a tiny (only 22KB) JavaScript-based tool, released under the LGPL, that allows you to add page-in-a-page and gallery features using just a few easy-to-understand lines of code (check GreyBox' Web site for some examples).

To install GreyBox, download the latest version of the package, unpack it, and upload the greybox folder onto your server. Add then the following code between the <head> and </head> tags in the page you want to spice up:


<script type="text/javascript">
var GB_ROOT_DIR = "http://myserveraddress/greybox/";
</script>

<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" />

Replace the myserveraddress with the actual server address, and you are good to go.

GreyBox allows you to do two things: you can add a page-in-a-page feature to a Web page, and you can create a photo gallery. The former effect can be put to several uses. For example, you and your visitors can search Wikipedia without leaving the currently viewed page. To do this, simply add the rel attribute to the link as follows:


<a href="http://en.wikipedia.org/wiki/Main_Page" title="Wikipedia" rel="gb_page_fs[]">Seach Wikipedia</a>

You can also specify parameters such as the width and height of the embedded window:


<a href="http://en.wikipedia.org/wiki/Main_Page" title="Wikipedia" rel="gb_page_fs[800 600 ]">Seach Wikipedia</a>

GreyBox can also handle a set of pages, so users can, for example, look up words in several references. This code creates a "gallery" containing specified Web sites, and users can switch between them using the Back and Forward buttons:


<a href="http://en.wikipedia.org/wiki/Main_Page" title="Wikipedia" rel="gb_pageset[my_web_pages]">Open Wikipedia</a>

<a href="http://dictionary.cambridge.org/" title="Cambridge Dictionaries Online" rel="gb_pageset[my_web_pages]">Open Cambridge Dictionaries Online</a>

To create a simple yet stylish photo gallery you can use a code block similar to the previous one:


<a href="http://farm1.static.flickr.com/106/263885161_6dd6926331.jpg" title="City at Night" rel="gb_imageset[my_flickr_photos]">City at Night</a>
<a href="http://farm1.static.flickr.com/77/223716448_fc1ee516e1.jpg" title="Berlin U-Bahn" rel="gb_imageset[my_flickr_photos]">Berlin U-Bahn</a>

This code creates a gallery that fetches your Flickr photos. There is one problem in the described example, though: each photo in the created gallery has its own link, which doesn't look particularly good on the page. But GreyBox has a solution to that problem too. Using the GB_showImageSet method, you can create a more elegant script and a single link that opens the photo gallery:


<script>
var my_flicker_photos = [{'caption': 'City at Night', 'url': 'http://farm1.static.flickr.com/106/263885161_6dd6926331.jpg'},
{'caption': 'Berlin U-Bahn', 'url': 'http://farm1.static.flickr.com/77/223716448_fc1ee516e1.jpg'}];
</script>
<a href="#" onclick="return GB_showImageSet(my_flicker_photos, 1)">Browse my Flickr photos</a>

And if you want to do the same with a set of Web pages, you can use the GB_showFullScreenSet method:


<script>
var my_web_pages = [{'caption': 'Wikipedia', 'url': 'http://en.wikipedia.org/wiki/Main_Page'},
{'caption': 'Cambridge Dictionaries Online', 'url': 'http://dictionary.cambridge.org/'}];
</script>
<a href="#" onclick="return GB_showFullScreenSet(my_web_pages, 1)">Open my Web pages</a>

That's all there is to it. If you want to spice up your Web site with two useful features with minimum fuss and with almost no coding, then GreyBox is just the ticket.

Dmitri Popov is a freelance writer whose articles have appeared in Russian, British, German, and Danish computer magazines.

Category:

  • Web Development
Click Here!