RapidWeaver and Greybox | Jan Erik Moström

This is an old tutorial I used to have on an old site of mine, apparently I’ve managed to delete it at some time or the other. Anyway, I got asked where it could be found and I managed to dig up some old backups. I don’t know how well this tutorial works for the current version of RapidWeaver, but here it is.

RapidWeaver – using Greybox in a theme

I wanted to have some “lightbox” support on a site I’m working on, so after looking at RapidWeaver forums I decided to try to integrate greybox to the TigerPop theme. Note that I haven’t come up with anything myself, I’ve just pasted together stuff I’ve found at the forum.

The first step was to download greybox from Orangoo Labs site
The second step was to make a copy of the TigerPop theme, you can do this by control clicking the theme and selec the “Duplicate Theme” command

You’re asked for a new name, enter some suitable name.
The next step was to open the theme to see the actual files, you can do this by control clicking the theme and select “Show Contents”. You should see something like this:
You should now copy the greybox folder to the theme folder. When you downloaded greybox file from Orangoo Labs you problably ended up with a folder called “`GreyBox_v5_5`” or something like that. Open that folder and inside you should find a folder called “greybox”, copy that folder to the theme folder. You should now have something that looks like this:
The next step is to make sure that the greybox folder is copied with the other files when you create the web site. There are two ways to to this:

If you have the Developer Tools installed you can do it this way: Double click the file “Theme.plist” and you should see something like this:

Select the “css” row and then click on the “New Sibling” button. In the new row enter “greybox” so you get this:

If you don’t have the developer tools installed you can use a text editor (I’m using BBEdit ). Open “Theme.plist” and look at the beginning of the file, it should look something like this

Add a line to instruct RapidWeaver that the greybox folder should be copied, when you have done that the file should look like this (the added line highlighted):
The next step is to modify the “index.html” file, enter the following lines below the “user_javascript” tag in the “index.html” file:

var tmp_image_path="%pathto(greybox/next.gif)%";
var tmp_path_array=tmp_image_path.split("/");
tmp_path_array.pop();
var gb_path=tmp_path_array.join("/");
var gb_path = gb_path+"/";
var GB_ROOT_DIR=gb_path;
That’s it. Now you should be able to create web site using this theme. So how do you use it? Create a new web site and add a style page.
Now you need two photos, one is the smaller picture that is going to be shown in the page and the other is the larger image that is going to be used for the greybox effect.
Add the larger picture to the page assets for this page:
Add some text to the page and then drop the smaller picture onto the page where you want it:
Select the picture and click on the “Add link” button, from the first popup select the photo you added to the page assets and then enter “gb_image[]” to the rel field, you should have something like this:
The finished web page should look something like this:
Click on the picture and you should see something similar to this:

Answers to questions I’ve received

Can I use greybox on blocks and accordion pages?

Yes, as far as I can see from my tests. Just add the photo and thumbnails as described above.

Can I create slideshows with greybox?

Yes, it’s really simple. Change “gb_image[]” in step 11 to “gb_imageset[ps]” for each picture that you want to be a part of the slideshow. The “ps” can be anything but it has to be the same for all pictures in one slideshow, and by using different strings you can create different slideshows on the same page. You can find more info about greybox here

Can I use greybox on HTML pages?

Sure but you’ll have to all the editing manually and the real problem here is that you need to figure out where the pictures added to page assets end up. Here is one way of how you can do it (personally I have my photos set up in a different way with text and photos on different servers).

Here is the example project, it consists of the RW project file and a folder with the picture and the thumbnail.