SEO Religion

Isulong SEOph LightboxGallery Demo Page

More and more sites have been amazed with the cool Javascript and CSS work done on Lightbox JS v2.0, which is basically making this cool way of viewing images when someone clicks on thumbnails more Web 2.0. No page reloading, no annoying pop-ups. And it is all powered by Scriptaculous. And scriptaculous is powered by Prototype.

Prototype was made to have a comprehensive library of Javascript functions so you no longer need to make them, but it’s comprehensiveness makes things a bit overwhelming to learn it all. So this is where Scriptaculous tries to simplify the process making functions more user friendly for the coder, that may not be that much of a hard core Javascript programmer. And Lightbox JS v2.0 is for a specific purpose of handling images on how to preview them when a thumbnail of an image is clicked. But to make a gallery out of it, using Lightbox JS v2.0 can be a tedious task to do especially when handling many images.

Here comes Isulong SEOph LightboxGallery

LightboxGallery is a script I made in my attempt to simplify the process of having many thumbnails tiled on a page with your Lightbox JS v2.0 code all ready set for you to use. It uses PHP and does not require any database, but requires to number your images incrementaly starting with number 1 and at the current moment, will only support .JPG files, all in lowercase. Although this was made real quickly, more improvements will be see in the future.

What you can easily do with LightboxGallery is tile even hundreds of thumbnails, you set the size of the thumbails (images are not resize, you will have to be in the proper size before using LighboxGallery), and the distance between each thumbnail. Since these are floating div tags, that wrap just like text when the end is met and will go on the next row, you can easily control the number of thumbnails in a row by changing the width of the container. This container may be a table or a div tag, which ever you are more comfortable with.

This is very easy to setup in these few easy steps.

Preparation of Isulong SEOph LightboxGallery

• Prepare both the actual size of images and the thumbnails too. If you have thousands of images and is using Windows, there is a Windows application called Photo Resizer. It is a free software by EMCO and they have very cool network security software as well. Rename your photos as numbers starting with the number 1, and going to the next number without missing a number and having the lowercase .jpg extention. Like 1.jpg, 2.jpg, 3.jpg and so on. The order of the numbers will be the same order as they appear in the gallery. Make sure each thumbnail filename number will have the same filename number in their corresponding bigger images. It is required that all thumbnails have all the same size. Although it is not required in the bigger images to have the size. So if you have a mix of portrait and landscape photos, you might want to resize the thumbnails in a way that they all have the same height and width.
• Download Isulong SEOph LightboxGallery here. Unzip it all and place the whole folder lightboxgallery on your web hosting account. Do not upload the files inside the lightboxgallery and mix it with your other files unless you really know what you are doing. Having all files together makes it clean and neat within your file structure as well.
• If you have any captions for the images, save each caption in a text file and name them 1.txt, 2.txt. 3.txt and so on corresponding to the same numbers of the images. Save these caption files together with your thumbnails. The captions are not required.

Setting up the Isulong SEOph LightboxGallery

• Open the file lighboxgallery.php inside your lighboxgallery folder and place the URL where the lightboxgallery folder is located like in the example below:
  $lightboxGalleryURL = "http://downloads.isulongseoph.com.ph/";
  Always end your URLs with a trailing slash.
• Upload all big images in the folder gallery-images. Upload all thumbnails and caption text files in the folder gallery-thumbnails.
• Just add these few lines of code in your html code.
  In the head section, preferably just before the closing head tag:
  

  Right after the opening body tag:
  

  Just before the closing body tag:
  

  Add this attribute in your body tag:
  

  And finally, where you want your thumbnail gallery to appear, replace the values with the actual values you want to use.
  
'thumbnail height', 'thumbnail width',
'margin width', 'margin height',
'border color'
); ?>

  As a guide, here is a copy of the code I used for the gallery above:
  
'45', '45',
'20', '20',
'000000'
); ?>