Скрипт на JS для отображения необходимого изображения
Необходимо реализовать скрипт на Java Script
Суть скрипта заключается в том, чтобы он смог выводить необходимое изображение в карточки товара на определенном разрешении по предусмотренным условиям.
Объяснение задачи.
Допустим есть карточки товаров которые реализованы с помощью сеток GRID или FLEX (скрин 1)
Для каждой карточки товара организованы адаптивные изображения с помощью тегов picturesrcset (скрин 2)
За счет медиа-запросов для конкретного разрешения экрана в карточке выводится необходимое изображения. При этом исходя из медиа-запросов осуществляется пере группировка сетки (GRID или FLEX) с карточками, за счет чего в одном ряду может выводится по 3, 2 или по 1 карточке.
Нужно по предусмотренным условиям (стилям CSS, перегруппировки сетки (GRID или FLEX)) назначенные на определенное разрешении (с помощью медиа-запрос), что самое важно ЕСЛИ ПОСЛЕДНЯЯ КАРТОЧКА ЯВЛЯЕТСЯ ПОСЛЕДНЕЙ И ПРИ ЭТОМ ТОЛЬКО НЕЧЕТНОЙ ВЫВОДИТЬ необходимое фото.
Пример (скрин 4):
Допустим по условии на разрешении 1045рх сетка перенастраивается таким образом чтобы в ряду было по 2 карточки. А для последней карточки если она является последней, не четной по счету и при этом для нее задается css свойство, что она должна занимать полностью весь ряд выводить изображение ( <source type="image/webp" srcset="img/favoritelatest/familyhouse_1045_full.webp" media="(max-width: 1045px)" class="flat-card__trump flat-card__trump--full">)
Если последняя карточка является нечетной последней, но для нее не задано css свойство чтобы она должна занимать полностью весь ряд выводить изображение (<source type="image/webp" srcset="img/favoritelatest/familyhouse_1045.webp" media="(max-width: 1045px)" class="flat-card__trump flat-card__trump--small">)
В случае с сеткой FLEX для последней нечетной карточки чтобы она занимала полностью весь ряд задается условие
flex: 0 1 100%;
Załączniki 7
-
Здравствуйте, могу реализовать скрипт и протестировать.
Мой стэк: JS, TS, ReactJS, Redux, SCSS...
Пишите, буду рад помочь.
-
482 0 1 Witam, Uważnie przeczytałem Twój brief!
=============================
Jestem gotowy do rozpoczęcia pracy
po uzgodnieniu wszystkich warunków.
-
213 2 0 Dobry dzień
Mam duże doświadczenie w JavaScript. Przygotowuje się do pracy, gotowy do pracy.
-
3305 70 1 Доброго дня.
За допомогою css та js налаштовую відображення відповідно до ТЗ
Звертайтеся, буду радий співпрацювати
-
612 21 0 Pozdrawiam ! Mogę spróbować zrobić. Doświadczenie jest. Napisz - porozumimy się.
Aktualne zlecenia dla freelancerów w kategorii Aplikacje desktopowe
Potrzebny architekt Airtable do zbudowania schematu relacyjnego i nowej czystej bazy AirtablePotrzebna pomoc w przemyśleniu i zbudowaniu czystiej schemy relacyjnej dla wewnętrznego systemu operacyjnego w Airtable. Obecna baza jest już używana przez zespół, ale rozwinęła się organicznie: struktura jest częściowo płaska, część tabel/widoków jest używana aktywnie, część… Bazy danych i SQL, Aplikacje desktopowe ∙ 4 dni 14 godzin temu ∙ 10 ofert |
Tworzenie oprogramowania do generowania plików cięcia drewnianych puzzliSzukamy programisty do stworzenia oprogramowania, które automatyzuje proces tworzenia plików cięcia dla drewnianych figurkowych puzzli. Aktualny proces Obecnie każdy plik jest tworzony ręcznie przez projektanta w Adobe Illustrator. Plik zawiera: zewnętrzny kontur puzzla o… Aplikacje desktopowe ∙ 4 dni 18 godzin temu ∙ 14 ofert |
Mała poprawka na stronie
59 PLN
Trzeba zaktualizować umowę ofertową w stopce na nową, w firmie zmieniły się zasady Zadanie na 20 minut Programowanie stron internetowych, Aplikacje desktopowe ∙ 5 dni 20 godzin temu ∙ 112 ofert |
Narzędzie do porównywania rachunków z bankiem, kartami i księgowymZadanie techniczne: narzędzie do porównywania rachunków z bankiem, kartami i księgowymOgólny cel Potrzebne jest lokalne narzędzie (skrypt/mała aplikacja w Pythonie), które uruchamiane ręcznie co 1-2 miesiące na moim komputerze i dokonuje porównania między: Rachunkami, które… Python, Aplikacje desktopowe ∙ 8 dni 3 godziny temu ∙ 44 oferty |
Dodać przerwy 10-30 sekund między wysyłkami e-mailiWitam! Szukam doświadczonego programisty 1C / BAS (BAF) do szybkiego rozwiązania problemu technicznego z wysyłką maili.Istota problemu: Używamy programu księgowego BAF (Business Automation Framework), edycja 2.0. Raz w miesiącu pojawia się potrzeba masowego wysyłania klientom… Programowanie stron internetowych, Aplikacje desktopowe ∙ 13 dni 19 godzin temu ∙ 10 ofert |