Streaming live at 10am (PST)

Interactions using a pop up modal for cms content


I’m working on a one page car rental site. In the section “In Stock” I have a slider with some cms content about the cars. There are pictures of the cars in the right column. If you preview the site, looking at the slider for the yellow car, you’ll see I have a modal overlay called “Gallery Modal” with an interaction to appear when you click one of the yellow car images to view it at full size. When you click the “X” in the upper right corner, it disappears. What I want is this modal to use a background image for that particular cms item/car that was clicked. It obviously doesn’t work this way though since I’m not using the collection page template, so it doesn’t recognize which is the current item. I can’t figure out a workaround to have Webflow recognize which cms item was clicked and show it’s larger view.

Hope this makes sense, and thanks in advance for the help!

Here is my public share link: LINK
(how to access public share link)


Hey Meleah. This might help you achieve what you need. Put it in the footer code section of your page;

              var bgImage = this.src;
              $(this).closest('.w-dyn-item').find('.modal-box').css('background-image','url(' + bgImage + ')')

You may want to put a loading spinner and a darker background on the parent container (.gallery-modal) of the modal to act as a loading progress indicator.

Sorry for the late reply, and thanks for the suggestion @AlexManyeki. I wasn’t able to achieve the same result as you. I tried putting the code in the footer code of the overall project settings and then in the custom code of just this particular page, neither had a result for me. What did I do wrong? Is it possible to achieve what I need using the lightbox feature?