Добрый день!
Подскажите, пожалуйста, как сделать, чтобы в каталоге при наведении на фото оно не подсвечивалось, а показывалось следующее фото, если оно есть в карточке товара.
Спасибо!
0
Изменение Фото При Наведении Курсора
Автор MILA, 30 янв. 2019 12:44
Сообщений в теме: 3
#1
Отправлено 30 Январь 2019 - 12:44
#2
Отправлено 01 Февраль 2019 - 02:05
Здравствуйте.
Зайдите в раздел Сайт - Редактор шаблонов - Товары - найдите:
замените на:
далее зайдите в main.css - найдите:
замените на:
Зайдите в раздел Сайт - Редактор шаблонов - Товары - найдите:
<div class="product-image"> <a href="{goods.URL_MIN_PRICE_NOW | url_amp}" title="{goods.NAME}" class="product-img"> <img class="goods-image-small" src="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png?design=motor{% ELSE %}{goods.IMAGE_MEDIUM}{% ENDIF %}" alt="{goods.NAME}" title="{goods.NAME}" itemprop="image"> </a>
замените на:
<div class="product-image"> <a href="{goods.URL_MIN_PRICE_NOW | url_amp}" title="{goods.NAME}" class="product-img"> <img class="goods-image-small" src="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png?design=motor{% ELSE %}{goods.IMAGE_MEDIUM}{% ENDIF %}" alt="{goods.NAME}" title="{goods.NAME}" itemprop="image"> {% FOR images %} {% IF goods.images.index = 2 %} <img src="{goods.images.MEDIUM}" class="goods-image-small goods-image-small2" alt="{goods.NAME}" title="{goods.NAME}" itemprop="image"> {% ENDIF %} {% ENDFOR %} </a>
далее зайдите в main.css - найдите:
.products-grid .item .product-image:hover img {opacity: 0.8;filter: alpha(opacity=80);}
замените на:
.products-grid .item .product-image img.goods-image-small2 { display: none; } .products-grid .item:hover .product-image img.goods-image-small { display: none; } .products-grid .item:hover .product-image img.goods-image-small2 { display: block; }
#3
Отправлено 01 Февраль 2019 - 15:38
Получилось. Но только для товара, у которого есть дополнительные фото... Если других фото нет, то фото вообще пропадает(((
#4
Отправлено 02 Февраль 2019 - 05:37
Здравствуйте.
В этом случае вместо:
используйте:
В этом случае вместо:
.products-grid .item .product-image img.goods-image-small2 { display: none; } .products-grid .item:hover .product-image img.goods-image-small { display: none; } .products-grid .item:hover .product-image img.goods-image-small2 { display: block; }
используйте:
.products-grid .item .product-image img.goods-image-small2 {display: none;} .products-grid .item:hover .product-image img.goods-image-small2 {display: block;position: absolute;left: 0;top: 0;}
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных