RSS Feed

DonD 2012© No Rights Reserved

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

Produced with

Site Feedback

Search

Lytebox 2

2/4

How to use in Webplus

On the previous page you saw some examples of how it could look on your site. All these were governed by what was put into the “rel” part of the coding.

Example:

1. Single photo

<a href="images/OldbusL.jpg" rel="lytebox" title="The old bus"><img src="images/OldbusS.jpg"/></a>

2. Group photos

<a href="images/OldbusL.jpg" rel="lytebox[Whitby]" title="The old bus"><img src="images/OldbusS.jpg"/></a>

3. Slide show

<a href="images/OldbusL.jpg" rel="lyteshow[Whitby]" title="The old bus"><img src="images/OldbusS.jpg"/></a>

Even this coding can be made easier by using WebPlus to do the work.

How do we use this within WebPlus

• Download the lytebox zip file. Unzip and upload the images folder, lytebox.js & .css files to your host to the same directory as your site pages are uploaded to.
  
  
• Get together 2 sizes of the photos to use with lytebox. One small to use as a thumbnail on your page and the second larger to display. Upload the larger photo to the images folder from lytebox.
  
  
• Paste the code below into the header of your page by copying the code and clicking the “attach html code” button and selecting “Paste to head” in the dialogue box.
  
  <script type="text/javascript" language="javascript" src="lytebox.js"></script>
  <link rel="stylesheet" href="lytebox.css" type="text/css" media="screen" />
  
  

Position the thumbnails on your page and right click each in turn and select hyperlink. In the hyperlink dialogue window select “an internet page” and in the address box delete the http:// and paste in code. As this example.

What does this mean?

images/OldbusL.jpg" – this is the location, relative to where your page is on your host, and name of the large photo(you can put the photo anywhere but the path to it must be reflected here).

rel="lytebox" – this tells lytebox what you are doing with this photo(in this case it’s a single photo).
if you had this - rel="lytebox[hols]" – the extra [hols] is saying that the photo is part of the hols group, in this case you would have more than one with the extra [] in. When you click on a photo to view you are given the option to go through the group of photo via next & prev buttons that appear when you put your cursor over the photo. You can have more than one group on a page just change the [name] in the brackets.

if you had this - rel="lyteshow[hols]" – this is telling lytebox that this photo belongs to the hols slideshow and when you select a photo to view, it will play all the photos with this name in a non-stop slideshow which you can modify by configuring.

title="Old Bus – as the name  suggest it is the title of the photo which will be displayed below the photo.

Note - You will notice in this “easier” example the <a href=" &  "><img src="images/OldbusS.jpg"/></a>

are missing. We are leaving Webplus to put in the extra code that is needed.

In the Hyperlink Dialogue box make sure you set the “Target Window or Frame” as “New Window”.

You do not have to have a thumbnail to use lytebox, as can be seen on this page in the site. What ever you can put a hyperlink onto can act as a button to use lytebox.

This is by far the easiest method I have found to use lytebox on your site. There is a more advanced way which would help with the group and slideshow option which I cover here.

If anybody needs any help with this just contact me  here

Configuration

You can change how lytebox displays by modifying the lytebox.js file. Open notepad and drag and drop the file into it. You will something like this (click here to view). You will see comments next to what is configurable to help you. Once modified upload to your host keeping a copy of the original.

Single photo

2/4

images/OldbusL.jpg"rel="lytebox" title="Old Bus