Streaming live at 10am (PST)

Interactions using a pop up modal for cms content


#1

Hello,

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!

http://elite-ignition.webflow.io/


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


#2

@PickyCreative

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

<script>
	$(document).ready(fucntion(){
      $('.column-car-images').find('img').each(function(){
          $(this).click(function(){
              var bgImage = this.src;
              $(this).closest('.w-dyn-item').find('.modal-box').css('background-image','url(' + bgImage + ')')
          });
      });
	})
</script>

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.