Introduction
This article is going to teach you how to extract an image from a Framer CMS gallery and connect it to a Lightbox. The process involves extracting, basically cloning one of the images which opens up endless possibilities to also connect it to various Carousel, Sliders or pretty much anything that will fit your use case.
Getting Started
First off, you're going to need two pieces of custom code to make this work. The first one is the actual component that lets you extract the image and the second is a code override that adds the Lightbox itself, both of them are free and provided by us.
The component that clones the images can be grabbed from here or at the bottom of the page. The Lightbox code override can be grabbed from another article that details it out, specifically, here.
Preparing the CMS Gallery
For CMS Pages
If you're on a CMS page, you can just drag and drop a gallery on to your Canvas from Insert > Fields > Gallery. Once that's done, right click the gallery and Create a Component, that will expunge the Gallery variable and give you the options to connect it to a data source.
Open up your gallery component and nested at the lowest level find the Image layer, to this layer you will attach the code override of the Lightbox. Make sure you set the width and height of your Image to what you would like to be represented in the Lightbox.
Connect the now expunged Gallery variable to the data source (the CMS gallery). What we did here basically is that we took a gallery, we nested it within a component to prepare it for various use cases, expunged the gallery variable, and reconnected it to the data source.
On the actual page, add the Image Gallery Slide component that you got from the first link, and connect it to the gallery component that's outside of the page (on the canvas).
Use the Image Index control property to pick which image you want to show from your CMS gallery.
For non CMS Pages
If you're on a non CMS page, the process is similar but involves an extra step. You need to first drag and drop a collection onto your Canvas, so Insert > Collections > Collection. Nested within the collection you're going to add your gallery. If you already nested the gallery within a component, just drag and drop that component within the collection.
Connect your collection to the Image Gallery Slide as you did previously.
The last step you have to do in case you have multiple CMS items, is to filter the item's gallery you want to show, which is by Title in this case; otherwise you will see all your CMS item galleries within the collection.
To filter the gallery, select the collection on the canvas, go to Filters > Match > Any then for Filters > Field > Collection > Equals > Your Article.
If anything is unclear or you feel like you need an example to figure it out, provided with the Image Gallery Slide component there is the remix link which already has a demo setup so you can disseminate an examine the implementation.
People also ask
Can I use these resources for Framer templates or commercial projects?
Yes you can, our resources are available for all creators.
Can I get support or help from you on this?
We offer very limited support to our free resources, but shoot an email, we might give some pointers to help you out.
Can I share these resources with my peers or audience?
Yes, we'd love it if you shared these resources with other so more people can access them, just make sure to credit us.
