What's WP
Our everything is about WordPress - best choice of WordPress users!
How to Add WordPress Lightbox for Image Enhancement

How to Add WordPress Lightbox for Image Enhancement

It is unavoidable that you need to insert some images into your blog posts. It is fine that you just use these graphical components to make the web content visually-appealing. However, if you showcase some how-to posts or tutorials, things can be different. Most of the images in these articles can be the screenshots. And you have to make sure that these screenshots are clear enough so that people can learn the details from them easily. To achieve this, the lightbox display is necessary. Here, we’d like to tell you how to add WordPress lightbox for image enhancement easily.

Frankly speaking, due to the limited width size in the post columns, your large images that have some details can hardly be showcased in a clear way. Especially, if you have the sidebar on each page, things can be even worse. To deal with this issue, you can give people the option to enlarge the images after clicking them via the lightbox feature.

Make Use of the FooBox Image Lightbox Plugin

The FooBox plugin can display the responsive images for your WordPress site with the built-in social sharing. With it, you can resize and showcase all your graphical components on all the screen sizes. And also, it allows the effortless backwards and forwards navigation for the easy browsing, along with the built-in progress bar.

Set Up for the FooBox Plugin

The configuration process for this plugin is really simple. After installing the plugin, entering the FooBox section and clicking the Settings button, you should firstly focus on the General part.

General Settings

From this part, you should set up for three main aspects. The first one is to decide what you are looking to attach the FooBox to. Here, you can enable this lightbox feature for all your WordPress galleries, images that have the captions and the attachment images in all the posts and pages.

Surely, you’d better enable all of these options.

Attach FooBox

The second setting option is to decide whether to show the “powered by FooBox” link under each lightbox. If you want, you can choose to enter the affiliate link to promote this plugin and to earn the commission from all the sales. But personally, we do not recommend you to do so.

The last setting option is for the lightbox display. Here, you can choose to force the smaller images to fit the perfect screen dimensions. However, you’d better not to do so, for this may affect the image quality.

In addition, you can hide the scroll bars when the lightbox is visible. Or, you can showcase the counter under the lightbox modal when checking the image galleries. And when hovering over each image, you can decide to show the image caption or not. It is possible that the images may have the trouble to load. In this case, you can display the customized error message as you like.

Disable Settings

Advanced Settings

Next, you should move on to the Advanced settings part. Here, you should finish the following setting options.

  • Close the lightbox on each overlay click.
  • Turn off the feature to defer running this plugin to work with other optimization plugins.
  • Drop the IE7 support so as to remove the CSS hacks to get things running in IE7.
  • Disable the hard-coded lightbox that is available from your current plugins and themes.

FooBox Advanced Settings

Display the FooBox Lightbox

Now, you can use the easy HTML to display the lightbox. If you only want to showcase the single image, you can add the “foobox” class into the image links directly.

Foobox Class

Thus, when people click on it, the image can be enlarged to the original size.

Image Lightbox Sample

Or, you can group all the images into a gallery. For this, the HTML code looks like the following.

Gallery Lightbox Code

And then, the lightbox can work as below.

Gallery Lightbox Sample

Author

Susan Rose is a freelance writer who has a deep knowledge about WordPress. She loves everything related to website building since the freshman year at Christopher Newport University, and loves to share her experience with people all over all the world. This girl is popular among our readers as she is outgoing and energetic. In the daily life, Susan loves detective novels as it can train her logical thinking and creativity.

Close

Want to Learn More About WordPress?

Get Our Free Themes, Plugins, Support, SEO Tips, and Other Tutorials!