LyteBox Setup Tutorial
Wednesday, 12 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>





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

Last Updated ( Tuesday, 09 December 2008 )