Custom CMS Lightbox
Here is a custom Webflow CMS powered lightbox system. Hopefully you like it. This project is built using Finsweets slider component and a bit of custom code. Because no-one likes to read paragraphs I'll write the main things in bullets.
- This so called lightbox doesn't use the lightbox element.
- There is a custom modal that contains a slider.
- A bit of custom code opens the slider on a right slide.
- Project is cloneable and ready to use. Check the project page for that.
- There is no unnecessary styling (you do you)
- The lightbox is disabled in mobile (from interactions panel). Feel free to enable it and make it work.
- This project was made possible by resources and tutorials from Finsweet, Pixel Geek and Unsplash
- Check the instructions
Steet Gallery - example
Street has a roof
Busy Street
Red Light
Day Time
Empty Vienna
Empty Road
High Rise Buildings
Empire State
Instructions
The elements
Every functional element is in the magical section. There is the Gallery List and The Gallery Modal.
The Interactions
Interactions are really simple too. They open and close the Modal. The open interaction is in the list item element and the closing interaction is in the modal close wrapper.
The Custom Code
The custom code does the magic. It is in two parts which both should be placed before the </body> tag (the last box in the page settings).
First part is the F'in sweet custom slider with their CMS library. You should check those documents if your planning on using this in a serious project.
The second part is the thing that opens the slider on a right slide. This custom code came from Pixel Geeks tutorial. Check the tutorial for deeper understanding.
You can check and copy both parts from below or page settings. If you have your own classes / selectors / styling just check the bolded parts mach your elements.
<!-- Hosted Library script file on CDN for free -->
<script src="https://cdn.finsweet.com/files/cmslibrary-v1.8.js"></script>
<script>
(function() {
// create a new Library instance and store it in a variable called "fsSlider"
var fsSlider = new FsLibrary(".slider-data-feed")
// run Slider on our instance
fsSlider.slider({
sliderComponent: ".slider-component",
resetIx: true
})
})();
</script>
<script>
var eq = '';
$('.gallery-list-item').on('click', function(){
eq = $(this).index();
$('.gallery-modal').find('.w-slider-dot:eq('+eq+')').trigger('click');
console.log(eq);
$('body').css('overflow','hidden');
});
$('.gallery-modal-close-wrapper').on('click', function(){
$('body').css('overflow','visible');
});
</script>