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.
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.
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.
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.
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.
Thus, when people click on it, the image can be enlarged to the original size.
Or, you can group all the images into a gallery. For this, the HTML code looks like the following.
And then, the lightbox can work as below.