Modern Design
Intuitive Workflow
Clean Interface
Solid Backend
Customizable Slides
Slider

Add lightbox to your WordPress slider

When you create a website it can be a real challenge to show many images to your visitors without breaking the layout, or making the users scroll through multiple (non-thumbnail size) images. When the image is inserted in the content area, that will most likely limit its width, and that makes it a bit harder to show a large image to the visitors.

Showcase Simple

Description: Showcase is both powerful and flexible at the same time also Virtually infinite loop-able.

Tags: , , , , ,

History of lightbox on web

Lightbox appeared in the early 2000’s, it introduced an elegant, easy to implement way to resolve the challenge of showing multiple, large images to the visitors. This solution even allows to break boundaries of the image container. It is also possible to group the images, therefore it is enough to show one image to the visitors. They can click and when the larger image shows up, they can view multiple images not just that one which they have selected.

The lightbox displays an image and creates a dark overlay on the page
The lightbox displays an image and creates a dark overlay on the page

Lightbox was made to display images by filling the screen, and dimming out the rest of the web page. The images in a lightbox is placed above the current page, not within, so you don’t have to worry about ruining your page’s layout to show a large image. They are widely used to display images, videos and any URL in a fancy area over your website’s main content, and they are popular because they keep users on the same page, so after checking out the image, the user can easily go back to the original page, without having to wait for the other page to load and the current one to load again.

The downside of using lightbox is that the users can’t use the browser’s back button to “go back“ to the original page (if they haven’t noticed that the page was not changed, they will think they are on a different page), but if they would click on it of course they are taken back to a wrong page. The content that is displayed within a lightbox cannot be saved as a bookmark either. Of course, it is unlikely for a user to want to bookmark a simple image (they tend to simply save it to their computers), but if an iframe is shown, there might be some content which they want to see later. It is suggested to put these kind of contents to a new page, and rather link to that page (forcing the user to navigate to that other page). Here is an excellent list on whether lightbox should be used or a new page.

In Smart Slider 3 for WordPRess, the lightbox feature can be used easily, all you need to do is to click on a green link button of your slide or layer, select the lightbox and choose images from the WordPress media library, videos or websites, what you would like to display in the lightbox. You can add more than one content to the very same lightbox and then it displays arrows to navigate between the contents. It is very simple and responsive as it works fine on tablet and mobile. Lightbox will scale your content to fill up the largest possible area of the screen.

Note

The lightbox is available in the pro version of Smart Slider 3.

Create lightbox from slide background images automatically

If you have a background image on all of your slides, you can use the Lightbox from backgrounds feature which was introduced in version 3.0.27. The option will automatically create a lightbox from all the background images of your slider, without you having to add them manually to each of your slides, and when navigating using the lightbox arrows, the slides will be changed, too.

The downside of this feature is that if the background image required for all slides to makes this function work as expected.

If you don’t want all of your slides to open a lightbox, you can create lightbox from individual slides, too. In this case, you aren’t limited to show one image only, you can select multiple ones, you can even insert videos and iframe URLs. You can even set an autoplay interval, to show every image to the visitors without them having to interact with the lightbox.

Note

Version 3.0.34. introduces the possibility to add caption (the title of the slide) to the lightbox images created via this feature.

Open lightbox by clicking on a layer

Using the link option at any layer you can trigger a lightbox from that layer. Again, you can select any number of images, insert any number of video and iframe URLs, and set the autoplay.

This way you can showcase more and bigger images, load a video, or show for example a contact form when your users are clicking on an image or a button layer. This lightbox also can have multiple images, videos and frames, so you’ll be able to show whatever you would like to.

Version Overview

Pro only
  • Lightbox, lightbox from backgrounds


Similar Sliders -

Product slider for WooCommerceMuseum – About #2Portfolio – CollectionsCarousel with Lightbox

Related pages