GreyBox at http://orangoo.com/labs/GreyBox/ , integration in the RapidWeaver themes and usage.
GreyBox is a very light stand-alone javascript (just only 22Kb), not a RapidWeaver plug-in we have implemented (included) into the theme.
For this reason manual operations are needed and instructions are available below.
GreyBox can be used to display websites, images and other content in a beautiful way.
To use it it'is necessary to follow some easy steps:
First of all you must publish your site. The GreyBox's graphics assets must be online to see them into the theme.
1: Edit the path in the HTML file in the theme
2: Upload your images using RapidWeaver
3: Create all links in your project for showing images/links
Explanation point-to-point:
1: Edit the path in the HTML file in the theme
To display correctly images or webpages you have to set the right path to GreyBox folder, included in the theme, editing the index.html file.
To do that:
- start RapidWeaver and open the theme inspector clicking on the menu bar "view-->theme view (or by the shortcuts ⌥++T)
- right-click or CTRL-Click on the theme icon and choose "show contents"
- locate the "index.html" file and open it with a text editor (suche as textedit, textwrangler or smultron)
The following is the GreyBox link you will find in the index.html file:
var GB_ROOT_DIR = "http://www.yourdomain.com/rw_common/themes/theme_name/greybox/";
Link elements:
• GreyBox standard code "absolute"
• Do not change this part.
• Insert your domain here (use a free text edidor like TextEdit, Textwrangler, Smultron)
• theme name ( in the Theme.plist )
2: Upload your images using RapidWeaver
You can publish your greybox images without FTP programs but directly from RapidWeaver! Here it is how to do it:
Choose the "home" page into your RapidWeaver project
Open the "page inspector" (Command+I) and choose the "advanced" panel.
Choose the images you want displays with "add file" option (or use drag and drop).
All images will be published in the "assets" folder, presents in your domain.
Note: Images resolution must already been corrected for the web (you must do it berfore publishing with and image editor)
Example:
http://www.yourdomain.com/assets/your_image.jpg"
This "absolute path" for publicating images let you reduce to the minimum possibilities to make mistakes writing images links.
Then, with this method you don't need to use other softwares to publish images!
Exception: This operation must be done only for images and not for external links to websites.
3: Showing images (Create all links in your project )
You can use greybox to show single image, images gallery, single link and sites gallery.
The syntax depends on what you want display images or webpages (take a look at greybox website - http://orangoo.com/labs/greybox/normal_usage.html - to understand different syntax)
Here an example to show a single image example:
comment in your page
• Do not change this part.
• Your domain and regular path
• Folder created by RapidWeaver which includes all images (absolute path as explained at point 2).
• RapidWeaver folder for your images ( automatically created using page inspector)
• Image file, image name, image title
It is possible to use an image as a link instead of a simple string of text, just substitute the text with an image icon and add relative path to the full size image.
Note: You can upload your images (thumbnail) in the "assets" folder with all full size images
Suggestion: If you want to create a graphic link to an slideshow made with several images/links to sites (using relative GreyBox syntax for slideshow) put it just into the first link and others will been autamatically linked to.
This is a short tutorial to understand how to basically configure Greybox; you can find more informations and examples at official website ( http://orangoo.com/labs/GreyBox/ ), and ( http://orangoo.com/labs/greybox/normal_usage.html )