Сообщений в теме: 3

[MILA]

Добрый день!

Подскажите, пожалуйста, как сделать, чтобы в каталоге при наведении на фото оно не подсвечивалось, а показывалось следующее фото, если оно есть в карточке товара.

Спасибо!

[Vaccina]

Здравствуйте.

Зайдите в раздел Сайт - Редактор шаблонов - Товары - найдите:

				  <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;
}

[MILA]

Получилось. Но только для товара, у которого есть дополнительные фото... Если других фото нет, то фото вообще пропадает(((

[Vaccina]

Здравствуйте.

В этом случае вместо:

.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;}