Lytebox Gallery Setup

Support for Lytebox templates with image viewers

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 spot. Proceed to slide #2 by editing 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: "gallery3-5.jpg" and "Fgallery3-5.jpg" are for the gallery #3 page (gallery3.htm), in the slide #5 spot.


Title for each image
Each slide can have it's own unique title. In the default gallery setup each slide title is the slideshow name and number. Edit the "Slideshow One" in the following line to add a title to "gallery1.htm" image #1.

<a href="gallery/Fgallery1-1.jpg" rel="lytebox[show1]" title="Slideshow One">


Re-sizing 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 re-size to fit them, however, IE may have problems with displaying the new sizes.


IE re-size bug
Internet Explorer has a bug using Lytebox on a local computer hard drive where images will not display new image sizes if re-sized from the original download sizes. The best option to test during setup is to use Firefox, Google Chrome or Opera for testing.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 add another row of images to a Lytebox gallery HTML page. 12 images per gallery used in this example.

1. Do the steps on the add gallery row support page and stop at the "link editing" step.
2. Edit the links in the new row you added with your new image names. Below is an example of the first new image in the row you added in "gallery1.htm", editing "1-12" to "1-13".

<a href="gallery/Fgallery1-13.jpg" rel="lytebox[show1]" title="Slideshow One">

<img src="gallery/gallery1-13.jpg" border="0" class="Galborder" alt="image"></a><br>



Add another gallery page
You can add as many Lytebox gallery pages (slideshows) as your project requires.

1. Example: if the template includes 3 galleries with 12 images each.
2. Make a copy of "gallery3.htm" and name it "gallery4.htm".
3. In the "gallery" folder create 12 thumbnail images named "gallery4-1.jpg" through "gallery4-12.jpg".
4. In the "gallery" folder create 12 new full sized images named "Fgallery4-1.jpg" through "Fgallery4-12.jpg".
5. Open the "gallery4.htm" and replace "3-1" through "3-12" with "4-1" through "4-12" in 2 places for each image for a total of 24 replacements.
6. Tip: in your editing software you can search and replace "3-" with "4-".
7. Edit the "menu-gallery.js" and add a link to the "gallery4.htm". Add a new gallery link to the site map page.

Slideshow options, speeds and colors
In the "lytebox" folder edit the "lytebox.js" for animation speeds and other options. Set the color theme in the "lytebox.css" by editing the following css on about line #16:

@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.

Note: Edit the color theme in the "lytebox.js" in pre-2009 templates.


The black and darkgreen themes
The black and darkgreen color themes were added by Allwebco. To change to this theme edit the "@import url" line to black or darkgreen in the "lytebox.css" as shown above.


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".

#lbImageContainer, #lbIframeContainer { padding: 20px; padding-top: 20px; }

#lbDetailsData { padding: 0 20px; }

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" (allows for the css file border).


The watermark
If your gallery includes a watermark edit the watermark .gif, .png or .jpg in the "lytebox" folder. Css code for the watermark is located in the "lytebox.css" inside the "lytebox" folder. You can edit the location and height of the watermark. To remove the watermark, edit the "visibility: visible;" to "visibility: hidden;" or delete the 12 or 13 lines of code used for the watermark.

See also: watermark support


Editing with your own custom colors
Follow these steps to create a custom Lytebox purple color theme for example.

1. Edit the "lytebox.css" to "purple". In the "lytebox" folder.
2. Make a copy of the "lytebox-blue.css" or "lytebox-green.css" and re-name it "lytebox-purple.css".
3. Edit the "lytebox-purple.css" with your custom colors. See: color editing support.
4. You may be able to skip this step: Images are used in the "lytebox-purple.css" (.gif or .png) so optionally replace "blue" or "green" with "purple" and create new images naming them "close_purple" .png or .gif or any other images that may be used.

How files work in Lytebox galleries
When you click on, and open an image in the "gallery1.htm" page an "Fgallery" image is layered over the page. Next and previous links are displayed for the 9 or 12 images in the gallery page.

The Lytebox galleries include the following inside the lytebox folder:

• "lytebox.css" is the framework .css file for lytebox. Edit on line 15 with your color theme. Edit watermark sizes and location in this file.
• Individual .css files for each color theme.
• Close .png or .gif images used in each color theme .css file.
• "lytebox.js" includes the script and options near the top of the file that you can edit (in older templates this file may be in the top level folder).

About the script and more options
Notes about the version modifications made to the lytebox script 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 lytebox.com and for the original script see www.lokeshdhakar.com



Related Topics:
Gallery Overview