Lightbox Effect on WordPress Images

FavoriteLoadingAdd to favorite tutorials list

Lightbox plugin for WordPressAdding the WP jQuery Lightbox Plugin to your website means that images will open in a black popup box when clicked on. This adds a professional lightbox effect to the images in your posts and pages. If you have a series or gallery of images in one post, the lightbox includes next and previous buttons to scroll though all the images at full size.

THIS IS A FREE TUTORIAL

Setting up The Lightbox Plugin

  1. Go to Plugins/Add New
  2. Search for the WP jQuery Lightbox plugin
  3. Install  and activate
  4. Go to the new jQuery Lightbox section under Settings on your sidebar
  5. Make sure auto lightbox images is ticked
  6. Save Changes

That’s pretty much it, except if your images haven’t been re-sized for web and are larger than screen size at their full size, you can tick the box to shrink larger images automatically on the Lightbox settings page.

Screenshot showing Lightbox effect

A Single Image

Upload an image to your post or page as usual using the ‘Add image’ icon. If you add titles to your images, these will also show on the lightbox.

To see this effect in action on a single image, go to www.metalexchange.co.nz and click on one of the little maps on the homepage.

A Series of Images

Upload several photos to a post or page, then click insert gallery button on popup window or add several thumbnail sized images to the same post. If you add titles to your images, these will also show on the lightbox.

Comments

  1. My mistake. The small little check box “Shrink large images to fit smaller screens” makes the image fit into smaller screens :) Thanks for the great info on this plugin

  2. Jo Couchman says:

    If you’ve changed your WordPress thumbnail size (Settings/Media), use the Regenerate Thumbnails Plugin to regenerate thumbnails for all your existing images to the new size. Just go to Media Library, rick images and select regenerate thumbnails from the dropdown – http://wordpress.org/extend/plugins/regenerate-thumbnails/

  3. This plugin conflicts with the wp cycle plugin (slideshows like on my homepage). Instead use JQuery Lightbox for Native Galleries plugin – http://wordpress.org/extend/plugins/jquery-lightbox-for-native-galleries/ Either insert a gallery into a post/page via WordPress ‘Add Image’ window or add a lightbox class to your link (see plugin download page for details.

Ask a Question

*