| LyteBox Setup |
|
|
|
| Written by Administrator | |
| Wednesday, 12 December 2007 | |
|
Note - Lytebox will not work when wrapped inside a frame (our demo) CLICK HERE to open this demo in a new window to view the LyteBox feature. How does this effect you? Quite simply it doesn't. This feature simply won't work on our default demo page because it is wrapped inside a frame. Your site, as long as it is not set inside a frame will not be effected by this at all. The already enabled LyteBox feature gives your site a dazzling picture display! Make sure to click on each of the examples. LyteBox comes pre-installed with this template just follow the tutorials below to setup your images. Single Image Example
To enable use the following around any image: <a href="http://www.yoursite.com/images/popup.jpg" rel="lytebox" title="Your Description."><p align="center"><img class="boxed" src="http://www.yoursite.com/images/thumbnail.jpg" alt="Description" width="214" height="61" /></p></a> Grouped Images Example
To enable use the following around any group of images: <a href="http://www.yoursite.com/images/popup1.jpg" rel="lytebox[gallery]"
title="Your Description"><p align="center"><img class="boxed" src="http://www.yoursite.com/images/thumbnail1.jpg"
alt="Description" width="214" height="61" /></p></a> Slideshow Example
To enable use the following around any group of images: <a href="http://www.yoursite.com/images/popup1.jpg" rel="lyteshow[gallery]" title="Your Description"><p align="center"><img class="boxed" src="http://www.yoursite.com/images/thumbnail1.jpg" alt="Description" width="214" height="61" /></p></a><a href="http://www.yoursite.com/images/popup2.jpg" rel="lyteshow[gallery]" title="Your Description"><p align="center"><img class="boxed" src="http://www.yoursite.com/images/thumbnail2.jpg" alt="Description" width="214" height="61" /></p></a> <a href="http://www.yoursite.com/images/popup3.jpg" rel="lyteshow[gallery]" title="Your Description"><p align="center"><img class="boxed" src="http://www.yoursite.com/images/thumbnail3.jpg" alt="Description" width="214" height="61" /></p></a> Advanced You can also change the effects of each display above. To edit these settings edit the file templates/foreverace/js/lytebox.js. Look for the Configuration section about 40 lines down.
I like what I see! I want to join today. |
|
| Last Updated ( Friday, 04 July 2008 ) |
| < Prev | Next > |
|---|