Skin: | %id=skin% | default, external |
Language: | See additional settings | en, es, fr, de, nl, etc.. |
Open Animation: | %id=open_animation% | elastic, fade, none |
Info Bar Location: | %id=info_bar_location% | default, top, bottom (depending on skin) |
1. Only Add Once
You should add this stack to a page only once, preferrably at the top of the page. You can then create links to invoke the lightbox, or any of the other "Ultimate *" stacks.
2. Launching The Lightbox From Links
To invoke the lightbox from a link you need to add a special attribute to it.
If you're adding links via the built-in RapidWeaver functionality, you need to add a custom attribute with name "rel" and value "lightbox".
If you're typing the links from source, you need to do it as follows: «a href="link.html" rel="lightbox"»Link title«a».
3. Launching The Lightbox From The Ultimate Launcher Stack
You can also launch a lightbox with the "Ultimate Launcher" stack. Add it to your page and view it's documentation.
4. Replacing Another Lightbox
If you bought this lightbox to replace another, the first setting in the HUD is of importance. The default value is 'rel="lightbox"'. This is the code that you need to add to links to be able to create the popup on click.
If the lightbox you used previously has another invocation code, you should change the field to reflect that value. For example, if your current lightbox requires you to add a class named "lightbox", you should change the field to 'class="lightbox"' (without the single quotes).
Being able to change this value is handy as it means that you won't have to update all your links to include another invocation code.
5. Changing The Skin
There are two skins available: "default", and "external". Just type which ever you want in the setting and test it out.
6. Standard Options
- BG Color: The background color of the page when the lightbox is activated
- Info Bar BG: The background color of the info bar (where title/description is show)
- Info Bar Text: The text color of the info bar
- Border Color: The color of the border around the lightbox
- Shadow Color: The color of the shadow around the lightbox (if any)
- BG Opacity: The opacity of the background, controls how much of the underlying elements is still visible (see-through)
- Border Size: The size of the border, in pixels
- Rounded Corners: How round the corners of the lightbox should be, in pixels
- Shadow Offset X, Shadow Offset Y, Shadow Blur: Values for the shadow
- Open Animation: The animation effect when the lightbox is opening: "elastic", "fade", or "none"
- Info Bar Location: The location of the info bar: "default", "top", "bottom". Some locations may not be available in all skins
- Cross-Fade Images: If enabled, images will fade into each other, if disabled, the old image will fade into a solid color, before fading in the new image
- Slideshow Mode: If enabled, the slideshow will automatically start playing as soon as the lightbox is opened
- Play Delay: The time between transitioning from 1 image to the next when the slideshow is running
7. Extra Options
There are a number of extra options available. To add them you must drag the "Ultimate Lightbox Extra Settings" stack to the dropzone inside this stack. Do not place it anywhere else on the page.
- Language: The language used by the lightbox: "en", "fr", "de", etc..
- BG Image: Instead of a solid color, you can use a BG image to be displayed when the lightbox is open. It is best to use a resources/filename.jpg link, or an asset path
- Text Size: The size of the text in the lightbox
- Opening Speed: The speed of the opening animation
- Transition Time: The speed of the animation when one image changes to another
- Info Display Time: How long the info bar should be displayed
- Info Bar Opacity: The opacity of the info bar
- Menu BG Opacity: The opacity of the menu
- Flash Size: The default flash size
- iFrame SizeThe default iframe size
- Show Description: Whether to include the description in the info bar
- Protect Images: Prevent right clicking and dragging of images
- Show Bars on Open: Show the info bar and menu when the lightbox opens
- Show Navigation on Open: Show the navigation when the lightbox opens
- Auto Hide Info Bar: Auto Hide the info bar after a specific timeframe
- Auto Hide Menu Bar: Auto Hide the menu bar after a specific timeframe
- Auto Hide Navigation: Auto Hide the navigation after a specific timeframe
- Link to Original Context: A link will be added in the info bar linking to the image URL
- Loop Slideshow: Restart the slideshow after the last item
- Is Right to Left: For certain countries
8. Compact Editor
You can change the "Compact Editor" slider from 0 to 7 or 8. With each increment, less and less of the stack will be visible. This is nice to use once your stack has been configured entirely and you want it to take up as little space as possible.
As you already know, setting "Compact Editor" to 0 will show this help file.
9. Other Questions?
Feel free to contact me via the contact form available on http://www.weaveraddons.com/