Source Set -> select Image

How to?
#1

Hi

I am trying to select each image from a carousel. Unfortunately it is not working (at least I don't know how to) as the Image srcset with the different resolutions of the image is preventing from working properly. The code:

<img class="c-teaser__image" srcset="https://img.campercontact.com/media/photos/4222124650709085.jpg?imgeng=/w_293 293w, https://img.campercontact.com/media/photos/4222124650709085.jpg?imgeng=/w_585 585w, https://img.campercontact.com/media/photos/4222124650709085.jpg?imgeng=/w_517 517w, https://img.campercontact.com/media/photos/4222124650709085.jpg?imgeng=/w_638 638w, https://img.campercontact.com/media/photos/4222124650709085.jpg?imgeng=/w_710 710w" sizes="(max-width: 767px) 293px, (min-width: 768px) 585px, (min-width: 1024px) 517px, (min-width: 1280px) 638px, (min-width: 1440px) 710px" src="https://img.campercontact.com/media/photos/4222124650709085.jpg" alt="">

(url is https://www.campercontact.com/de/deutschland/bayern/hammelburg/15768/forellenhof-reuss for example).

Maybe someone can help. I was trying to take the DIVs "c-teaser__image-fallback" and "c-teaser__image-fallback" but doing obviously a mistake... Thanks!

Cheers
/P

#2

@seventy9 Hi. If you are looking to select each image separately you can use an 'Image' selector - .c-carousel__item:nth(0) img - :nth(0) indicates that it's the first image in order. Just change this number based on the image order in HTML.

Example:

{"_id":"campercontact-com","startUrl":["https://www.campercontact.com/de/deutschland/bayern/hammelburg/15768/forellenhof-reuss"],"selectors":[{"delay":0,"id":"image-1","multiple":false,"parentSelectors":["_root"],"selector":".c-carousel__item:nth(0) img","type":"SelectorImage"},{"delay":0,"id":"image-2","multiple":false,"parentSelectors":["_root"],"selector":".c-carousel__item:nth(1) img","type":"SelectorImage"},{"delay":0,"id":"image-3","multiple":false,"parentSelectors":["_root"],"selector":".c-carousel__item:nth(2) img","type":"SelectorImage"},{"delay":0,"id":"image-4","multiple":false,"parentSelectors":["_root"],"selector":".c-carousel__item:nth(3) img","type":"SelectorImage"},{"delay":0,"id":"image-5","multiple":false,"parentSelectors":["_root"],"selector":".c-carousel__item:nth(4) img","type":"SelectorImage"}]}

Learn more: Selectors | jQuery API Documentation

#3

Thank you! Worked fine.