Using the included Greybox Library
This document explains how to use the included Greybox support of Rapid Ideas Themes. There are different ways on "bringing up" a greybox layer in RapidWeaver. In the following sections I am going to describe how you use the greybox scripts in your site.
What is Greybox
Greybox is a new technique to add "pop ups" to your site. It is called a pop-up window that doesn't suck. It is different to many other so called lightbox libraries, as it not only works with images but also with whole external webpages. This makes greybox very flexible, as you can load any content in a greybox layer.
The Home of Greybox
If you want to find out more about Greybox, please visit the project home page at: http://orangoo.com/labs/GreyBox/
You will find many information on how to use Greybox and also some great examples
Showing Images
Showing images is one option of greybox. You can choose to show up one single image or a full set of images.
Showing one single image
Syntax:
<a href="URL" title="CAPTION" rel="gb_image[]">HTML</a>
Example:
<a href="http://static.flickr.com/119/294309231_a3d2a339b9.jpg" title="Flower" rel="gb_image[]">Show flower</a>
In RapidWeaver:
<a href="assets/myimage.jpg" title="My Image" rel="gb_image[]">Zeige mein Bild</a>
Showing a group of images
Syntax:
<a href="URL" title="CAPTION" rel="gb_imageset[NAME]">HTML</a>
<a href="URL" title="CAPTION" rel="gb_imageset[NAME]">HTML</a>
Example:
<a href="static_files/salt.jpg" rel="gb_imageset[nice_pics]" title="Salt flats in Chile">Salt flats</a>
<a href="static_files/night_valley.jpg" rel="gb_imageset[nice_pics]" title="Night valley">Night valley</a>
In RapidWeaver:
<a href="assets/salt.jpg" rel="gb_imageset[meine_bilder]" title="Salt flats in Chile">Salt flats</a>
<a href="assets/night_valley.jpg" rel="gb_imageset[meine_bilder]" title="Night valley">Night valley</a>
Showing Webpages
The other option of greybox is showing internal or external webpages. Here you have several options:
1. Displaying a single webpage or a group of webpages (a set of webpages)
2. You can define if you want the page to be displayed full-screen which uses the whole browser window size or set them in a centered layer with a specified size
Showing one page
Syntax:
<a href="URL" title="CAPTION" rel="gb_page[WIDTH, HEIGHT]">HTML</a>
Example:
<a href="http://google.com/" title="Google" rel="gb_page[500, 500]">Launch Google.com</a>
Showing one page as center window
Syntax:
<a href="URL" title="CAPTION" rel="gb_page_center[WIDTH, HEIGHT]">HTML</a>
Example:
<a href="http://google.com/" title="Google" rel="gb_page_center[500, 500]">Launch Google.com</a>
Showing one page in fullscreen
Syntax:
<a href="URL" title="CAPTION" rel="gb_page_fs[]">HTML</a>
Example:
<a href="http://google.com/" title="Google" rel="gb_page_fs[]">Launch Google.com</a>
Showing a group of pages
Syntax:
<a href="URL" title="CAPTION" rel="gb_pageset[NAME]">HTML</a>
<a href="URL" title="CAPTION" rel="gb_pageset[NAME]">HTML</a>
Example:
<a href="http://google.com/" title="Google" rel="gb_pageset[search_sites]">Launch Google search</a>
<a href="http://search.yahoo.com/" rel="gb_pageset[search_sites]">Launch Yahoo search</a>
Using greybox with RapidWeaver
The above code may be a little bit difficult for HTML novices. But using greybox with RapidWeaver can be much easier as you can just put in the needed information in the "Add Link" window. Sure, to take full advantage of greybox with all its options, HTML may best suit some special needs, but using the Add Link window is enough in most situations.
Greybox and the "Add Link" window in RapidWeaver
The Add Link window in RapidWeaver can be used to enter the needed information to load a content in a greybox layer. You will find an Add Link button in many RapidWeaver Page Templates (as far as I know for all styled text entries). To bring up the Add Link window, you have to first mark the text or image you want to be a link and press the Add Link button afterward.
Inserting the values in the Add Link window
1) Choose from the drop-down menu if you want to load an external website (URL) or an internal page or asset
2) If you have chosen URL in the first step to load an external page, type the URL to that page in this text field
3) To use greybox you have to use the entry "Current Window"
4) Give the link a nice description. This step is optional but should be set for accessability and SEO reasons
5) In the rel field you have to type in the greybox code, which was described in the steps "Showing Images" and "Showing Webpages" above. Here is an overview:
gb_page_fs[] for loading a webpage in fullscreen mode
gb_page_center[WIDTH,HEIGHT] for loading a page in a sized and centered layer (you have to set the WIDTH and HEIGHT to a number which represents pixels
gb_pageset[NAME] for loading a set of webpages into the greybox layer. Note that NAME should be the same for the same set of pages and you have to use more than one linked item to use a page set
gb_image[] for loading one image
gb_imageset[NAME] for loading a set of images. Note that NAME should be the same for the same set of images and you have to use more than one linked item to use as image set
6) If you have added all needed input, click on the Set Link button
Greybox, Firefox and Flash Slideshow
There seems to be a problem with Firefox and flash slideshow in a greybox layer: The slideshow will not be shown! Note that this is a bug in Firefox and not in greybox (or my theme). Let's hope they will correct it in future versions.
The easiest thing to make flash slideshows work with Greybox is by using the great and free RapidAlbum plugin. Just use the Slideshow template and - as far as I have tested - this fixes the firefox bug (well, not exactly the bug in FF but it outputs other code, so the bug will not be triggered).
For more information about the plugin or to download it, please visit the following site: