Learn about Linux
Download Linux
Get Linux helpSpecial Offers
Feature: Web Development
GreyBox: Jazz up your Web site in 10 minutes
Share
Print
CommentsTo 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.
Comments
on GreyBox: Jazz up your Web site in 10 minutesNote: Comments are owned by the poster. We are not responsible for their content.
Thanks!
painfully slow...
Posted by: Anonymous Coward on January 23, 2007 04:39 AMI have a pretty fast internet connection, does this have anything to do with me not having installed Java from Sun?
#