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>
<a href="http://www.yoursite.com/images/popup2.jpg" rel="lytebox[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="lytebox[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>
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/duoplate/js/lytebox.js. Look for the Configuration
section about 40 lines down.
|
