Опубликовано: 27 июня 2015
Замена изображений при наведении на карточку товара Есть решение
Добрый день!
Подскажите, пожалуйста, как изменить размер эскизов товара на странице категории (увеличить)? Где именно в коде "Купить просто" находятся эти параметры?
Можно ли сделать эскиз динамическим при наведении мыши?
(например, http://www.net-a-porter.com/ru/en/d/Shop/Whats-New...)
Спасибо!
Комментарии (9)
Здравствуйте!
в файле ""
1. после строки
<ul class="product-list {$view}">{if isset($s_products)}{$products = $s_products}{/if}
пропишите код
{$images_pr = $wa->shop->images(array_keys($products), '200x0')}
<style type="text/css">
.image img{
display:none;
}
.image img.first{
display:inline-block;
}
.image:hover img{
display:inline-block;
}
.image:hover img.first{
display:none;
}
.image img.deimg{
display:inline-block !important;
}
</style>
2. замените строку
на
{if count($images_pr[$p.id]) > 1}
{foreach $images_pr[$p.id] as $v}
<img src="{$v.url_200x0}"{if $v@first} class="first"{/if}>
{if $v@iteration == 2}{break}{/if}
{/foreach}
{else}
{$wa->shop->productImgHtml($p, '200x0', ['itemprop' => 'image', 'alt' => $p.name, 'default' => "`$wa_theme_url`img/dummy200.png", 'class' => 'deimg'])}
{/if}
Здравствуйте!
в файле "product-list.html" (магазин-витрина-шаблоны)
1. после строки
<ul class="product-list {$view}">{if isset($s_products)}{$products = $s_products}{/if}
пропишите код
{$images_pr = $wa->shop->images(array_keys($products), '200x0')}
<style type="text/css">
.image img{
display:none;
}
.image img.first{
display:inline-block;
}
.image:hover img{
display:inline-block;
}
.image:hover img.first{
display:none;
}
.image img.deimg{
display:inline-block !important;
}
</style>
2. замените строку
{$wa->shop->productImgHtml($p, '200x0', ['itemprop' => 'image', 'alt' => $p.name, 'default' => "`$wa_theme_url`img/dummy200.png"])}
на
{if count($images_pr[$p.id]) > 1}
{foreach $images_pr[$p.id] as $v}
<img src="{$v.url_200x0}"{if $v@first} class="first"{/if}>
{if $v@iteration == 2}{break}{/if}
{/foreach}
{else}
{$wa->shop->productImgHtml($p, '200x0', ['itemprop' => 'image', 'alt' => $p.name, 'default' => "`$wa_theme_url`img/dummy200.png", 'class' => 'deimg'])}
{/if}
Игорь, спасибо большое!
Все получилось с динамичными эскизами http://www.intashop.ru/category/zhenskaya-odezhda/.
Как я поняла, теперь нужно пересоздать эскизы заново, чтобы больший размер отобразился, верно?
Хорошо получилось
Про большой размер я не понял - где он должен отобразиться?
На витрине товаров сами превью. http://www.intashop.ru/category/zhenskaya-odezhda/
Сейчас они 200px по ширине, а я хочу, чтобы были 250
в файле "product-list.html" (магазин-витрина-шаблоны)
замените все вхождения строки
200x0
на
250x0
если эскизы не формируются по умолчанию
то в настройках магазина создайте правило "250x0" и сгенерируйте заново все эскизы
Игорь, сделала, все картинки эскизы перегенерировала. Теперь некоторые по ширине 250 (в основном квадратные), а некоторые так и остались 200. Но когда перетаскиваю маленький эскиз в фотошоп, то показывает ширину 250...То есть сама картинка большая, но сайт ее ограничивает до 200. Есть ли по высоте ограничения в верстке витрины?
Или может быть я неправильно в настройках создала правило? Нужно ведь по ширине сделать 250, а высоту авто?
точно, забыл совсем про ширину блока контейнера, ширина этого блока 214px
и соответственно вместить изображение шириной 250px никак не может. Но может 212px, тем более что изображения у Вас больше в высоту чем в ширину
как максимально увеличить изображения:
в пользовательских стилях прописать
.product-list.thumbs .image a img {
max-height: 350px;
max-width: 212px;
}
.product-list.thumbs .image a {
height: 350px;
vertical-align: top;
}
* 350px можно переписать на более подходящий размер (высота блока и максимальная высота изображения)
* конечно же желательно что бы изображения были одинакового размера
* 212px меньше чем указанную ширину блока контейнера, но это делается специально для некоторых браузеров (на всякий случай)
Игорь, добрый день!
Я подумала, что даже размер 212 px мне не поможет, так как одежду все равно не видно. И тогда возникла идея: можно ли переверстать страницу сайта вот так: http://cyrillegassiline.com/online-shop/?collectio...? В мобильной версии 2 фото в ширину, в экранной версии 3. Если экран компьютера меньше, то изображения уменьшаются, а не меняют количество в строке.
Насколько сложно это осуществить?
Спасибо!
Здравствуйте!
Во всю ширину сайт будет сделать проблематично, т.к. придется переделывать многие элементы на все страницах и основные элементы конечно тоже. Это займет много времени.