Cynosure.X International LLC: Lightbox JS

Lightbox JS

This technology, when used on your web site, allows visitors to click on thumbnail images to overlay the full-size image on your web page. While the full-size image is being displayed, your web page is shown in the background. When the visitor clicks on the full-size image, the overlay disappears. When the full-size image is large, a downloading screen is displayed. The downloading screen is automatically replaced by the full-size image after downloading. See an example by clicking on the thumbnail below.

The beauty of this technology is that it not only works with the latest browsers that support JavaScript, it is also backward compatible with non-JavaScript-supporting browsers. When a visitor has JavaScript disabled, the thumbnail link to the full-size image works in the same manner as before.

Comments & Discussion >>

How to implement it on your web site?

To use this technology on your web site is extremely easy. All you have to do is add the following lines into the <head></head> section of your web page. These lines have to be located in the "head" section and have to be on every web page that will use this technology.

<link rel="stylesheet"
      href="http://www.CynosureX.com/Software/Lightbox_JS/lightbox.css"
      type="text/css"
      media="screen" />
<script type="text/javascript"
        src="http://www.CynosureX.com/Software/Lightbox_JS/lightbox.js">
</script>

Next, add the 'rel="lightbox"' tag into every <a href> HTML tag that references a full-size image, as shown in the following code.

<a href="images/front.JPG" rel="lightbox">
  <img src="images/front_thumbnail.JPG">
</a>

If you would like to provide a caption to the full-size image, place 'title="your caption"' in the <a href>, along with the 'rel="lightbox"' tag. That's it! You are done. That's all you have to do to use this technology. Simple, huh?

Comments & Discussion >>

Why are we providing this web service?

When we saw the Lightbox JS implementation by Lokesh Dhakar on his web site, we thought it was very cool. The first thing we thought was that we'd like to use this on our web sites. We have several web sites with several hundred pages that could take advantage of this technology. But it would be hindering if we have to put the JavaScript and associated graphics files on every directory for every web page that we want to use it on. It would be awesome if the JavaScript and the required resource could be located on a central server.

Then we thought, "Wouldn't it be cool if we can provide this technology as a web service for anyone who'd want to use it on their web sites without them having to install the software and the resources?" At first we weren't sure if it would really be useful. But after reading a "Is there any way to use this on Blogger where you can't upload javascript files?" comment on Digg, we decided to provide this service and donate our bandwidth (hopefully to spread our name in return).

Comments & Discussion >>

The Catch

So what is the catch of using this web service technology, versus downloading the technology from Lokesh Dhakar's web site?

You don't have to mess with installation/modification/test of the JavaScripts and resources.
The technology is ready for use on any web page.
You'll have to live with whatever small/large changes we make to this technology in the future. See our Change Log.
We may eliminate this service in the future.
If our server ever goes away, you'll have to make changes to your web pages.

Comments & Discussion >>

Fun for Photographers