This is a simple javascript lightbox for photos with slideshow function. Once installed, Photo Lightbox plugin will automatically search for all image links within the webpage for loading into lightbox. Photo Lightbox does not alter your image links or post.

Reasons for using Photo Lightbox WordPress Plugin

Compatible with WordPress Version Upgrades

  1. The whole Photo Lightbox plugin including the javascript lightbox is written by me. It is not an adaptation of any famous javascript lightbox. Therefore, any changes in WordPress Version that may render this plugin unusable, will be rectified immediately unless the WordPress Update is beyond my programming knowledge.

Does not depend on Javascript Libraries included with WordPress

  1. Most famous lightboxes depends on the JQuery Library included with WordPress. These Lightboxes may not work if WordPress upgrades its JQuery Library. The plugin authors may not be able to make it compatible as most of them are not the author of the javascript lightboxes. Javascript libraries are great, but in order to avoid this issue, Photo Lightbox is written without Javascript Libraries.

Does not need to wait for the whole webpage to finish loading

  1. As of version 1.2, Photo Lightbox loads its Javascript Initiation function in wp_footer(), instead of onload event. This will allow Photo lightbox to work before web page finish loading.

Cross browser compatibility

  1. Photo Lightbox is tested in the latest versions of Firefox, Safari, Opera, Google Chrome, and Internet Explorer. I always update my web browsers to the latest version, so as to check my plugins compatibility.

Important

  1. In order for version 1.2 to work you need a <?php wp_footer(); ?> in the footer.php, right before </body> of your theme.

Change Log

Version 1.2

  1. Rewrite path to plugin javascript script using WordPress defined WP_PLUGIN_URL.
  2. Load Javascript Initiation in wp_footer(), instead of onload event. This will allow Photo lightbox to work before web page finish loading.
  3. Needs wp_footer() in theme to work.

Version 1.1

  1. Version 1.1 includes auto scroll left Image Title. Image Title which it is too long and overflows the container will be automatically scroll to the left. However user has to pause the gallery in order to prevent the gallery from showing next side within 5 secs, this will enable user to read the whole scrolling Image Title.
  2. Function to hide flash video during Photo Lightbox activation, so as to prevent certain flash video without wmode=transparent to show above images.
  3. Included CSS line-height for text, in order to overwrite line-height set by themes, which causes the text to shift down.
  4. photolightbox.js minified and reduce from 30kb to 20kb. Loads much faster now.

Donations for Photo Lightbox

Please donate any amount as you wish, for support in development of Open Source Software.

Thank you!


Sample Setups

Single Image

Emply rel attribute will set the image as a single image

flyer2

Single Image with Long Title

The long title will scroll from right to left. Press pause to view complete scrolling

flyer3

Grouped Images (Image sets)

Example  rel=’set1′

flyer3flyer4flyer5

Excluded Image

Example rel=’exclude’

flyer4

Image with Broken Link

flyer5

Text Image Link

Click here to show image!

Installation

  1. Deactivate any other javascript image gallery or lightboxes before installation. Because there could be conflict in scripts.
  2. Install through the Add New option under Plugins in your WordPress Admin or Upload `photolightbox` to the `/wp-content/plugins/` directory and unzip
  3. Activate the plugin through the ‘Plugins’ menu in WordPress
  4. Go to your blog post or page.
  5. Click on any thumbnail or image link and image will be shown in Photo Lightbox.

Setting Up

  1. All images that have a link to source image in your server will be automatically included in Photo Lightbox.
  2. Image links without rel attribute will be automatically included as a single image and not a grouped image.
  3. To enter image rel and title attribute. After inserting thumbnail or image using image uploader. Click on the thumbnail and select edit image icon, a window will pop up. Ensure Link URL is link to image, select advance settings  and key in link rel and title under Advance Link Settings. Click update when done. Title longer than the title box of Photo Lightbox Console, will be cropped.
  4. To group image links or show images as a set, key in identical rel attribute for all images. No standard prefix needed. Example rel=’group1′ for all images intended to be grouped in group1 and rel=’animals’ for all images of animals within the same post.
  5. Thumbnails inserted by WordPress Gallery shortcode that are linked to Image files will be treated as single images, as we are unable to add in rel attribute to image link.
  6. Thumbnails inserted by WordPress Gallery shortcode that are linked to attachment page will not be included in Photo Lightbox, because they are not image links, however the attachement image within the WordPress Gallery (image.php) may be included in Photo Lightbox, depending on whether the image template codes the attachement image as an image link.
  7. Enter exclude in link rel (rel=’exclude’). To exclude any thumbnail or image link from Photo Lightbox.

Navigations

  1. Click on next or previous arrow to show next or previous image. (In the case of grouped images)
  2. Click on Opaque Black Overlay or Close icon to close Photo Lightbox.
  3. Click on pause icon to pause image, a pause message will be shown in right hand side status box.
  4. Click on play icon will immediately show next image, in the event of last image shown, Photo Lightbox will close itself.
  5. The Photo Lightbox console will show image count and image title (if there is any).

Frequently Asked Questions

Why is Photo Lightbox not working ?

Please check that your theme header.php has the wp_head Template Tag, and footer.php has the wp_footer Template Tag.

//Needs wp_head() in theme header.php to work
//Add this in your theme header.php, if you cannot find it.
<?php wp_head(); ?>

//Needs wp_footer() in theme footer.php
//Add this in your theme footer.php, if you cannot find it.
//add in before </body>
<?php wp_footer();?>

Why is error message shown ?

Photo Lightbox will show error message in the event that it fails to load an image from the server, due to image broken link, or image missing from server or server connection error.

Why does photo Lightbox closes before showing image ?

Photo Lightbox timeout may have occur before image gets fully loaded. Sorry for any inconvenience, Please click on image again.

Why is image out of monitor screen ?

User could be using a netbook or sub notebook with a small screen. User should select view in fullscreen from their web browser setting. Browsing in fullscreen mode should not have cropped image.

Why is Photo Lightbox behaving weirdly?

User may have clicked on controls too rapidly, causing script timeouts to overlap or delayed. However, this is unlikely to happen.