RSS Feed

DonD 2012© No Rights Reserved

Page last updated 25/01/2012 10:24:02

Produced with

Site Feedback

Search

Lightbox +2

Setting up your web page

If you have gone through the tutorial of Lytebox this is going be familiar.

Adding code to your header first. Copy the code below > select the “Insert html code” > select the button “Paste to head”

<script type="text/javascript" src="spica.js"></script>

<script type="text/javascript" src="lightbox_plus.js"></script>

You may have noticed in the demo, on the previous page, that the background had a transparent coloured background. This is produced by the overlay.png which is in the resource folder.

I have found through trial and error that an extra piece of header code is needed to call this into action.

Add the following code to the header in the same way as above.

<link rel="stylesheet" type="text/css" href="resource/lightbox.css" media="screen,tv" />

Adding you thumbnails and hyperlink

Insert the photos you’re going to use as thumbnails in there positions on your web page. Right click the photo> hyperlink > Internet page and in the URL address, as in Lytebox, add your location of the photo similar to below.

images/grass.jpg"rel="lightbox" title="Grass

The first part of this address is giving the folder and file name location. The next is telling Lightbox to open this file and lastly a title for the photo which will be placed under the photo.

Configuration

If you require the colour of the background different make up a new .png file 128 x 128pix with the amount of transparency you require and save it as the file name of overlay.png and upload it to the resource folder on your host. You will overwrite the original file, so if you want to keep the original file change it’s name.

If on the other hand you don’t require a background transparent colour don’t put the second piece of code in the header. Select the photo to the right to see this result.

Road

Prev

Prev