DWUser.com

Empowering Web Creativity

Back to Education Center Home:  Go Back        Font size:  Smaller  Larger         Font weight:  Lighter  Heavier 

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:

African Daisy Field

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! 

 

Tell Others and Have Your Say

 
 
Customizable Google Maps Made Easy! Try EasyMapBuilder Now »
 
Log In
  Reset Password...
 
Why create an account?
  • Manage support tickets and purchases
  • Access to free extensions
  • Special discounts and offers
  • Access to member-only forums
Create Account
100% Spam-Free Guarantee
(Optional)
 

Use the following form to ask a question or submit a support request. An appropriate staff member will reply as soon as possible (usually within a few hours).
Contact Us / Create Support Ticket
 
To attach files, you must Sign Up or Log In.

You have no items in your basket.  Featured products:

XML Flash Slideshow v4 Flash Audio Kit for Dreamweaver

Home | Customer Satisfaction / Refund Policy | Privacy Policy | jQuery Slider | Top of Page

© 2003-2016 DWUser.com / Magnetic Marketing Corp.  All rights reserved.