Help Center
Just a moment, your answer is on the way...
    Help Center
  1. Creating your site
  2. Advanced features
  3. CMS
  4. Connecting CMS collection content to your site
    5. CMS Request: Dynamic Lightboxes

CMS Request: Dynamic Lightboxes

Collecting votes
Currently, it is not possible to make lightboxes dynamic by connecting them to CMS collections. However, you can connect a lightbox's attached elements to CMS collection content to make the elements dynamic (e.g. text, images, buttons).  
We are always working to update and improve our products, and your feedback is greatly appreciated. 

Workaround

Using Velo, you can create a lightbox that opens from a dynamic item page and displays the same item as shown on the page that the lightbox was opened from.

For example, if you have dynamic item pages that display the services you offer, you could link a button on the page to a lightbox. In the lightbox, you could connect elements like text, images, and buttons to a dataset that connects to the same collection. As a result, when visitors click the button on your dynamic item page, a lightbox opens with more info about the same item displayed on the page. 
Before you begin:
Make sure your site has the following: 
Wix Editor
Studio Editor
  1. Go to your editor.
  2. Go to relevant dynamic item page. 
  3. Enable Velo Dev Mode: 
    1. Click Dev Mode at the top of the editor. 
    2. Click Turn on Dev Mode. 
  4. Copy the code snippet below and paste it at the top of your page code:
1import wixWindowFrontend from 'wix-window-frontend';
A screenshot of adding a code snippet to the top of a dynamic item page's code.
  1. Copy the code snippet below and paste it after: $w.onReady(function () {
1$w('#openLightbox').onClick(async () => {
2        const item = await $w('#dynamicDataset').getCurrentItem();
3        const id = item._id;
4        wixWindowFrontend.openLightbox("Dynamic Lightbox", id);
5    })
6
A screenshot of pasting the second snippet of code in the dynamic item page's code.
  1. In the sample code you pasted, replace the IDs listed below with those used by your site:
    • openLightbox: Replace with the ID of the button that opens the lightbox. 
    • dynamic Dataset: Replace with the ID of the dynamic item page dataset. 
    • Dynamic Lightbox: Replace with the name of the lightbox. 
A screenshot showing the IDs and lightbox name that needs to be replaced in the code.
  1. In your editor, go to the lightbox. 
  2. Add a dataset and connect it to the same collection as your dynamic item page:
    1. Click CMS  on the left side of the editor.
    2. Click Add Content Elements. 
    3. Click Dataset.
    4. Click the Choose a collection drop-down and select the same collection that connects to your dynamic item page. 
    5. Click Create. 
  3. Click the Maximum items displayed field in the dataset settings and type the number 1.
  4. Connect the elements in your lightbox (e.g. text, images, buttons) to the dataset:
    1. Click the relevant element on the lightbox. 
    2. Click the Connect to CMS icon .
    3. Click the dropdowns under Connections and select the relevant collection fields or dataset actions. 
    4. Repeat these steps for each element on your lightbox that you want to connect. 
  5. Copy the code snippet below and past it at the top of your lightbox code: 
1import wixWindowFrontend from 'wix-window-frontend';
2import wixData from 'wix-data';
A screenshot of pasting the code snippet to the top of the lightbox code.
  1. Copy the code snippet below and paste it after: $w.onReady(function () {
1const getData = async () => {
2       const id = await wixWindowFrontend.lightbox.getContext();
3       $w('#dataset1').setFilter(wixData.filter().eq('_id', id));
4}
5getData();
A screenshot of adding the code snippet above to the lightbox code.
  1. In the sample code you pasted, replace dataset1 with the ID of your lightbox dataset. 
  2. Preview your site to test the functionality. 
  3. When ready, publish your site. 
Note: All information, including planned features and time estimations, are purely informative and are subject to change or cancellation at any time at Wix’s discretion. They do not represent a promise, commitment or guarantee of future availability or implementation, and should not be relied upon in making purchasing decisions.

Related content

Wix Editor: Adding and Setting up a Lightbox

Hire a Professional

Get matched with a Wix Partner who can help you reach your site goals.
Get Matched