Lightboxes are some of the most elegant ways to display large images for visitors. Using lightboxes to enlarge images allow saving space on the website. You can display a smaller image for the visitor by default. Then, if they launch the lightbox, you can show a big, high quality image. This saves you loading time as well, because the smaller images will load a lot faster.
In this slider example, every slide has a simple background image. They all have captions as well with a short description. This text is displayed by the text bar control, which shows the slide title and description. The text bar is highly customizable, which means you can change several aspects. For instance, you can change the background color of the bar or remove it, if you don’t need it. Although, we advise using a background color to increase the contrast and make the text more legible. Speaking of texts, you can change their color, font family and size. Of course, you can decide if you want to show the slide title, description or both.
The lightbox is created using the “Lightbox from backgrounds” feature. This feature automatically creates lightbox from the background image of each slide. If you care about the loading time of your site, you won’t use large images there. Which means the lightbox might lose its purpose. Luckily, Smart Slider 3 got a nice feature for you to help you create better lightboxes. After enabling Lightbox from backgrounds, visit each slide and locate the Custom lightbox image feature. You’ll find it at Slide settings → Background tab, at the bottom, after switching to Expert mode. What does this feature do? It lets you pick a custom lightbox image, even for tablet and mobile devices. This way you can ensure your visitors will see the best possible lightbox image.
Core Web Vitals
PageSpeed Insights with Lighthouse analyzed this page on April 12, 2021. For the latest result analyze now!
Related Post: How to Create Beautiful Responsive Image Slider?
Related Post: Add Lightbox Slider to your WordPress site