Advertisement
More Information
Home arrow Tutorials arrow LyteBox Setup
Register
Login
LyteBox Setup Print E-mail
Written by Administrator   
Tuesday, 11 December 2007

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

one

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

Description Description Description

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

Description Description Description

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.

 


I like what I see! I want to JOIN TODAY.

Last Updated ( Monday, 14 July 2008 )
 
< Prev   Next >

S5 CB Register

S5 CB Register

World Class Service!

Shape 5 has built a great reputation for good customer service!

Take some time to read what our members are saying about Shape 5... click here!