Template Lytebox Setup (Image Only)
NOTE: This support page is for templates that include Lytebox with images only.
UPDATE: If you purchased your lytebox template before 11/24/08 you may want to update your files with the 2009 Lytebox version. Click here for update info.
This support page is for templates that include Lytebox v3.22a and v3.22. If your template includes a folder named "lytebox" and one named "slide_pages" this script is included in your template. See your "lytebox.js" for the version number.
View the script in action:
Please see Allwebco Tour Templates for samples of the Lytebox setup, or open your downloaded template "slideshow-home.htm" or gallery pages to view a sample.
Setup the first slide:
In the "gallery" folder, edit the "gallery1-1.jpg" with your thumbnail. Edit the "Fgallery1-1.jpg" with your full sized image. Open the "gallery1.htm" and check the first slide in the first gallery image. For slide #2 edit the 1-2 images in the "gallery" folder.
Gallery Lytebox images are numbered by what gallery page they are on and what number slide (image) they are. EXAMPLE: "gallery.jpg" and "Fgallery3-5.jpg" is for the gallery #3 page (gallery3.htm), in the slide #5 spot.
Title for each image:
Each slide can have it's own specific title. In the default gallery setup each slide title is the slideshow number name. Edit the "Slideshow One" in the following line for example to add a title to "gallery1.htm" image #1.
Resizing images:
To change the Lytebox gallery image sizes, you will make the images in the gallery any size you would like and the Lytebox slideshow will resize to fit them, however, IE may have problems with displaying the new sizes.
IE resize bug:
Internet Explorer has a bug using Lytebox on a local computer hard drive where images will not display new image sizes if resized from the original download sizes. The best option to test during setup is to use Firefox, Netscape or Opera for testing.Click to download Firefox. Once uploaded to your hosting area the new sizes will then display properly in IE as well as other browsers.
Adding more rows of images to a gallery page:
To add another row of images to a Lytebox gallery. 1. Do the steps on the add gallery row support page and stop at the "link editing" step. 2. Edit the 3 links for the new row you have added with your new image names. Below is an example of the first new image you will have added in "gallery1.htm". You should edit the "1-7" to be "1-10" in 2 places.
Add another gallery page:
You can add as many Lytebox gallery pages (slideshows) as your project requires.
For templates that now include 3 gallery pages.
Make a copy of "gallery1.htm" and name it "gallery4.htm".
In the "gallery" folder create 9 thumbnail images named "gallery4-1.jpg" through "gallery4-9.jpg".
In the "gallery" folder create 9 new full sized images named "Fgallery4-1.jpg" through "Fgallery4-9.jpg".
Open the "gallery4.htm" and replace "1-1" through "1-9" with "4-1" through "4-9" in 2 places for each image for a total of 18 replacements.
Edit the "menu_gallery.js" and add a link to the "gallery4.htm".
Slideshow options and colors and speeds:
You can edit the color themes in the "lytebox.css" (Edit the lytebox.js in non-2009 templates). Open the "lytebox.js" for animation speeds and other options. Edit the color variable in the "lytebox.css" to change colors. This will be line 15:
@import url("lytebox/lytebox-blue.css");
In the above example edit the "blue" to one of the colors listed at the top of the "lytebox.css". If you do not see this line, click here for update info.
See "About the script and more options" below for more details.
The black and darkgreen themes:
The black and darkgreen color themes were added by Allwebco. To change to this theme edit line 15 to black or darkgreen in the "lytebox.css".
Margins, padding and borders:
If you want more margin (outer border) in the slideshows, edit the "this.borderSize" in the "lytebox.js" and... edit these 2 padding lines in the "lytebox.css".
NOTE: In most cases, edit the "this.borderSize" in the "lytebox.js" so it is 3 pixels larger than the padding you edit in the "lytebox.css".
Editing with your own custom colors:
You can create a custom color theme. For example, edit the "lytebox.css" to "red". In the "lytebox" folder. Then edit the "lytebox-red.css" with your own colors. You can edit the .gif images in the "lytebox" folder that start with "red_" and create your own custom images.
FILES: How this works in Lytebox gallery templates:
When you click on and open an image in the "gallery1.htm" page an "Fgallery" image is layered over the gallery page. Next and previous links are displayed for the 9 images in the gallery page.
The Lytebox gallery template download includes the following:
"lytebox.css" is the CSS file for lytebox and is edited on line 15 with your color theme.
"lytebox" folder for the lytebox close, play, pause and next images.
"lytebox" folder also includes a .css file for each color theme included with the template.
"lytebox.js" is the script and includes some options you can edit.
"gallery" folder includes the images used in the lytebox slideshows in the gallery pages.
About the script and more options:
Notes about the modifications to the lytebox script made by Allwebco can be found at the top of the "lytebox.css" and the "lytebox.js".
The Lytebox script included in some Allwebco templates is an updated version written by Markus F. Hay. that was originally created by Lokesh Dhakar. For more info and script options see www.dolem.com and for the original script see www.lokeshdhakar.com
