How to apply different interactions clicking on different list items?

Design help Animations & Interactions
1

I have a Collection List with a list of hotels.
On a page, I show short info (photo and name) about all hotels from my collection list. By clicking on the hotel photo I want to show pop-up with a video about the corresponding hotel (I made that using html-embed because my video locates on my server).

I added Collection List to the page, put photo+hotel name inside Div Block.
But when I add a mouse click on the photo of any hotel, this interaction applies to photos (list items) of other hotels from my list. How can I open different popups when I click on different items (photos) from my collection list?

2

Is there any solution for that?

3

Can you share your read only link please?

5

Okay, everything must be inside of your collection item element: the content of the item, the click trigger, the model and its content. Like for example:

  • col item
    – col item content div
    – col item trigger for the video modal ← IX on this
    – modal and its content ← so this is a SIBLING of the trigger

Now you will limit the IX to .class and SIBLING

image

So the url of the video or whatever is in the modal should somehow be part of the CMS.

But then you will need ONE only IX and to design ONE only modal. How sweet isn’t it?

6

Sounds great! I’ll try it immediately! Thank you!

1 Like
7

Once you’ll have understood this principle, you’ll understand what you can achieve with IX by using the actions limitations, and how your structure makes an IX possible. For IX targeting Collection List Items, you have to think the structure ahead.

8

Amazing! It works! Thank you so much! :clap:
Just one trifle left — is it possible to keep that video autoplayed? I forced it to autoplay using a small js-code for the whole site, but after the last changes, it doesn’t work. It is not so important, but if there is a quick solution it will great.

1 Like
9

Great!

Okay… logically, you should alway use some sort of JS code or a Youtube API to play videos when there’s multiple of them, unless your page will become slow. Using code or an API allows you to use only one player that’s repeated for all the videos, and to handle play, stop, loop etc… Especially, that’s useful to prevent a video continuing playing when another is started.

So the best practice in your position is to use more code, not less code, to make sure your video behave as the user expect them to and to keep your page as light as it should be.

Can’t help you further on this as I am not a coder.

10

Anyway, thank you very much!

1 Like
11

Can I apply this to this page: Webflow - Ytterjarna.se

I would like to add custom animation that affects only the Collection Item row that is clicked.

12

hi, i am unable to give each div individual div in each individual collection item a unique class. it adds the class to all the individual divs?