Web Design: Portfolio Slideshow - Lightbox

By CRAIG KUNCE

This tutorial shows how you can add Lokesh Dhakar's lightbox to your website to showcase artwork, design work, or photography in a cool, interactive way.

Being generous, Lokesh has offered this creation as an open source project that anyone can use. Please credit and link to Lokesh's web site when using this feature on your site.

The beauty of this way of doing things is that you keep your viewer on the same page, simplifying and clarifying their web experience. It also reduces the need for more pages, more navigation, and more links. Cleaner and clearer—that's good web design.

Here's how the lightbox feature works: Just click any of the four images below… and a larger image pops up and fills the screen. Pretty simple.

lightbox sample lightbox sample   lightbox sample   lightbox sample

 

Here's how I added the lightbox slideshow to this web page:

  1. First, visit lokeshdhakar.com and download the files for lightbox2
  2. I placed these files in a folder on the root level of my web site's directory. Like this:
    lightbox
  3. Next, in Photoshop, I created my large thumbnail images of my artwork (seen above), and the larger images that will be seen after the viewer clicks a thumbnail and the lightbox appears.
  4. Place them on your web page, and link them to their corresponding larger image.
  5. Now I followed the steps on Lokesh's web site
  6. First go to code view of the web page you're using lightbox on
  7. In the <head> area of the web page copy and paste the code that will load the jquery library, and then the javascript for the lightbox function, and the css. The code looks like this:
    <script src="js/jquery-1.7.2.min.js"></script>
    <script src="js/lightbox.js"></script>
    <link href="css/lightbox.css" rel="stylesheet" />
  8. Be sure to correct so the path follows your folder structure. I had to add web_lightbox/ to mine.
  9. This is how it looks pasted just above the </head> closing tag
    lightbox
  10. As directed in the instructions, I open the lightbox.css file and double check the link paths to the images. I had to change mine to reflect the folders I created in my root directory. Here's the new path:
    lightbox
  11. Next I did the same with the two files in the lightbox.js file. Mine looked like this:
    lightbox
  12. Now we're on to the second part of Lokesh's tutorial, activating the lightbox feature.
  13. In code view, add these two attributes to your image's link tags:
    rel="lightbox" title="my caption"
  14. You only need to add the second attribute if you want a caption.
  15. My code looked like this:
    lightbox
  16. Lastly, if you want to have several images presented together, in a slideshow format, add a name in square brackets inside the lightbox attribute. Like this:
    rel="lightbox[fineart]"
  17. That's it! Save and upload everything and try it out.