Instructions
This is the instruction manual for use of the El Dorado stack. I am not going to go into great detail about what each setting does as that is described on the previous page. This page is intended for those who were smart enough to buy the stack and are ready to get down to business!
First, the basics:
You will add the El Dorado stack to the bottom of your Stacks page. Clicking on the stack will give you access to all its settings in the Info Pane.
IMPORTANT CONCEPT: Every item you want to display in a lightbox must have a link to it. The link can be text or an image or….? I will walk you through setting up a link through the RapidWeaver link feature as well as give the code so you hard-core coders can take shortcuts.
A simple one-image lightbox would be created by linking to an image in resources (or hosted separately on your server if you prefer).
The image in the demo project is different than the one shown here.
When you create a link through RapidWeaver, you can also set "custom attributes" which are important for making the lightbox work. Below is the setup for a single image display (here) in RapidWeaver:
Setting the link
1) I have linked to my image in the resources folder (you can also type the url of your image if you warehouse images).
2) I have used the Custom Attributes area of the link feature to add the following:
2) I have used the Custom Attributes area of the link feature to add the following:
Name
title
rel
class
title
rel
class
Value
My awesome storm image
a
lightbox
My awesome storm image
a
lightbox
If you do not want to use a title for your image, don't add that line to the custom attributes.
The class equal to lightbox is what tells the browser that this image is to be displayed in a lightbox (necessary to include this)
NOTE: The rel equal to a line needs further explanation. A bit later, we will be explaining how to set up a gallery in the lightbox. Each image in the lightbox gallery will be assigned the same rel value. So you could have multiple galleries on the same page. In one gallery, all images could be assigned a rel equal to a and in another gallery, they could have a rel equal to b, etc. The reason we assign a rel value to a single image is because of the way RapidWeaver works. If you just create a link in RapidWeaver, it will add a rel value of self on that link (behind the scenes… you won't know it's there). So to differentiate any links for our lightbox from any other RapidWeaver-created links, we want to assign a rel value. This can be a single letter as I've done, a word, a number or whatever. Let's just agree that you should add one when you create a link for this lightbox!
Advanced Single Image Coding
If you wanted to manually create a link in your page to display an image from the resources in the lightbox, you could type this (this is an image, not text):
If you wanted to manually create a link in your page to display an image from your server in the lightbox, you could type this (this is an image, not text):
Snippets for these two bits of code are included with the lightbox.
The next page will provide instructions for including hidden content in the lightbox.
The class equal to lightbox is what tells the browser that this image is to be displayed in a lightbox (necessary to include this)
NOTE: The rel equal to a line needs further explanation. A bit later, we will be explaining how to set up a gallery in the lightbox. Each image in the lightbox gallery will be assigned the same rel value. So you could have multiple galleries on the same page. In one gallery, all images could be assigned a rel equal to a and in another gallery, they could have a rel equal to b, etc. The reason we assign a rel value to a single image is because of the way RapidWeaver works. If you just create a link in RapidWeaver, it will add a rel value of self on that link (behind the scenes… you won't know it's there). So to differentiate any links for our lightbox from any other RapidWeaver-created links, we want to assign a rel value. This can be a single letter as I've done, a word, a number or whatever. Let's just agree that you should add one when you create a link for this lightbox!
Advanced Single Image Coding
If you wanted to manually create a link in your page to display an image from the resources in the lightbox, you could type this (this is an image, not text):
If you wanted to manually create a link in your page to display an image from your server in the lightbox, you could type this (this is an image, not text):
Snippets for these two bits of code are included with the lightbox.
The next page will provide instructions for including hidden content in the lightbox.