Click to Zoom for Photos: Adding the Lightbox Effect
by Nathan Rohler
One of the most popular ways you can showcase photos on your website is the lightbox effect. This effect allows your photos to be viewed center-stage in a larger format whenever they are clicked on. Click on either of these photos for a demo:
Note that you can use your arrow keys to navigate between the two photos in the lightbox view.
Adding this effect usually requires manually uploading some files to your site and then writing some custom CSS and JavaScript code to add to your pages. That's fine if you have extra time; but that's not you, right? Well, we wanted to simplify the process, so we've written a little tool that makes adding the Fancybox lightbox script to your page a snap. Thanks to cdnjs, you don't even have to worry about adding any files to your site.
Step 1 – Choose Your Options:
1. Do you want to enable the lightbox effect for all images on your page, or specific selected images?
2. If there are multiple lightbox-enabled images on your page, do you want to enable navigation between photos when in lightbox view (like the demo above)?
3. For images with a caption (like the first demo image above), how should the text be displayed?
4. Would you like a drop shadow to be automatically added to lightbox-enabled images (as seen on the demo images above)?
5. Would you like a slight hover effect to be automatically added to lightbox-enabled images (as seen on the demo images above)?
Step 2 – Add The Following Customized Code to Your Page:
Add this code inside the <head> of your page, just before the closing </head> tag:
Note: If you're using WordPress, you can add this code to the head.php template file.
Add this code inside the <body> of your page, just before the closing </body> tag:
Note: If you're using WordPress, you can add this code to the footer.php template file.
Step 3 – Enable Lightbox for Specific Images
To enable the lightbox effect for a given image, simply add class="fancybox" to the image's <img> tag. For example:
<img src="my-image.jpg" />
Becomes:
<img class="fancybox" src="my-image.jpg" />
For each lightbox-enabled image, you may also want to set some custom options:
Because you selected the 'all images' option above, no additional changes are needed. The lightbox effect will automatically be applied to all photos in your page. You may want to set some custom options, though:
Setting Big-Image Sources
By default, the same image that is included in your page will be shown in the lightbox, but at full size. Often, though, you will want to have a low-resolution version inline in your page, and display a higher-resolution version in the lightbox. To set a custom image source for lightbox display, set the data-big attribute on the <img> tag. For example:
<img class="fancybox" src="small-image.jpg" />
Becomes:
<img class="fancybox" src="small-image.jpg" data-big="big-image.jpg" />
Setting Captions
As exemplified in the first demo image above, you can optionally specify captions for your lightbox-enabled images. To control the caption displayed for a photo, set the title attribute on its <img> tag. For example:
<img class="fancybox" src="my-image.jpg" />
Becomes:
<img class="fancybox" src="my-image.jpg" title="Image Caption Text" />
Conclusion
And that's it! Upload your updated page and reload it in your browser to see the effect. We hope that you'll find this to be a helpful tool you can bookmark for use whenever a project calls for the lightbox effect.
Do you have any suggestions or additional options you'd like to see? Please share in the comments below!
Pssst! Would you like to preview our new soon-to-be-released HTML5/CSS menu builder? It's powerful, easy-to-use, and mobile optimized. If so, open a support ticket and let us know in one sentence why you want in!