The Stackable team is excited to introduce our new feature, the Lightbox. This is one of the new features included in our latest release, Stackable v3.8.0.
A Lightbox is a window overlay that is layered on top of a webpage, displaying media in full view and partially blocking the rest of the content on a page. When this window overlay appears, the background is dimmed and disabled, preventing site visitors from interacting with other content on the website.
Understanding Lightbox
Stackable’s Lightbox is a lightweight JavaScript module used to display images, videos, and other web content using modal dialogs. When a user clicks on a specific element, the Lightbox feature dims the rest of the webpage and brings the selected content into focus in an overlay or a ‘box of light’, hence the term Lightbox.
Lightbox is a powerful tool in web design that can significantly enhance the user experience on a website. Here’s a look at the benefits of using Lightbox in web design:
Benefits of Using Lightboxes for your Content
- Enhanced User Experience: The primary benefit of using Lightbox is the improvement it brings to the user experience. By overlaying zoomable high resolution images, videos, or forms over the current page, users can view content without being redirected to a new page. This makes the user journey smoother and more enjoyable, and helps keep users engaged on your website.
- Focus on Content: Lightbox dims the rest of the webpage and highlights the selected content. This brings the user’s full attention to the content in the Lightbox, making it perfect for showcasing important images or videos. It allows web designers to guide the user’s attention where they want it to go.
- Space Saving: Lightbox allows web designers to save space on the page. Instead of having to allocate large amounts of space to display images or videos in their full size, designers can use thumbnails or smaller versions, with the Lightbox used to display the full-size version when the user clicks on the content. This is especially useful for image galleries or product showcases.
- Versatility: Lightbox isn’t just for images and videos. It can also be used to different types of web content.
Lightbox in Stackable
With Stackable’s Lightbox, now users won’t have to write any code to activate it. This was developed with a lot of considerations in mind. First, it is responsive. It works great in mobile or tablet devices, you can swipe left or right, and pinch to zoom in or out.
Second, users can open several types of media in a lightbox, such as locally hosted images or video files, YouTube URLs, Vimeo URLs. You could also open web pages in Stackable’s lightbox, given that they allow embedding.
Third, when media is grouped together (by placing lightboxed blocks one after the other, or when they are inside columns), they are displayed as a lightbox gallery, with left and right arrows that can be used to navigate. It doesn’t matter if it’s all images, all videos, or all embeds—as long as they are adjacent to each other, it will open up as a lightbox gallery.
How to Create a Lightbox with Stackable
To create a lightbox, you must simply turn on Open Image in Lightbox toggle. It looks like this:
You can find this toggle in various places. Like in the Image panel of the Image block (Block > Style Tab). Simply select the Open Image in Lightbox toggle and that will enable the feature on the image.
You may also find the Open Image in Lightbox toggle on blocks where there are Link controls. There are various blocks that have Link controls such as Image block, Icon block, Call to Action, Card, Inner Column, Notification block, Pricing Box block, Team Member block, and Testimonial block.
Because of this option, you can use the Lightbox toggle to embed a Youtube Video to an Image block and open it up in a lightbox just like this:
Or you may also use a locally hosted file and embed it into an image, icon, button, inner column, or whichever! In the video below, we used the URLs of our locally hosted files and added it as a link to each Inner Column block.
With these options for this brand new feature, there are endless possibilities. With effortless setup, Stackable’s Lightbox makes it quick and easy to highlight your media and enhance user interaction.
Conclusion
Taking advantage of the Lightbox effect into your website design can significantly enhance the visual experience and user engagement on your site. With Stackable’s new Lightbox feature, you have a tool that brings your content into focus, creating an immersive and distraction-free viewing experience for your website visitors.
