Перейти к содержимому


Увеличение Изображения Товара В Каталоге

Автор velena168, 22 сент. 2014 00:14

  • Авторизуйтесь для ответа в теме
Сообщений в теме: 25

#1 velena168

velena168

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 1 643 сообщений
  • ГородСанкт- Петербург

Отправлено 22 Сентябрь 2014 - 00:14

Возможно сделать, как в Бистро увеличение картинки в каталоге по клику, а лучше при наведении на лупу?

Прикрепленные изображения

  • Снимок1.jpg

#2 velena168

velena168

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 1 643 сообщений
  • ГородСанкт- Петербург

Отправлено 22 Сентябрь 2014 - 17:06

Уже почти на всех шаблонах сделано, а на Осени нет. Давно просили помочь сделать предпросмотр как на Движении, но видимо очень сложно, так хоть помогите, пожалуйста сделать, как в Бистро увеличение картинки в каталоге.

Заказов из-за 403 ошибки совсем мало, теперь есть время еще улучшить и причесать сайт.
Пожалуйста.

#3 velena168

velena168

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 1 643 сообщений
  • ГородСанкт- Петербург

Отправлено 23 Сентябрь 2014 - 13:37

?

#4 velena168

velena168

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 1 643 сообщений
  • ГородСанкт- Петербург

Отправлено 24 Сентябрь 2014 - 10:58

Ну вот, без Сake и помочь некому. Почему-то его так долго нет. Только бы не уволился.

#5 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 25 Сентябрь 2014 - 01:23

В шаблоне Товары находим:
<div class="product_image_wrapper">
						<a href="{goods.URL | url_amp}" title="{goods.NAME}"  class="product_img_link">
						  <img class="product_image" src="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-other.png?design=autumn{% ELSE %}{goods.IMAGE_OTHER}{% ENDIF %}" alt="{goods.NAME}" />
						</a>
					  </div>

меняем на:

<div class="prd-image product_image_wrapper">
  <a href="{goods.URL}" title="Перейти на страницу &laquo;{goods.NAME}&raquo;"><img class="goods-image-small" {% IF goods.IMAGE_EMPTY %}src="{ASSETS_IMAGES_PATH}no-photo-medium.png" width="220"{% ELSE %}src="{goods.IMAGE_SMALL}"{% ENDIF %} alt="{goods.NAME}" /></a>
<div class="goods_images_list">
{% FOR images %}
  <div style="display: none;"><img src="{goods.images.LARGE}" alt="{goods.images.NAME}" /></div>
{% ENDFOR %}
</div>
</div>

далее в style.css втавляем:

.prd-image {
		position: relative;
}
						
.goods_images_list > div {
		display: none;
		position: absolute;
		z-index: 100;
		background: #FFFFFF;
		border: 3px solid #CCCCCC;
		border-radius: 4px;
		left: 118px;
		padding: 2px;
		top: 11px;
		max-height: 359px;
		max-width: 512px;
}
.goods_images_list img {
		width:350px;
}

.product_image_wrapper > a img {
	max-width: 180px;
}


и в main.js вставляем в самый конец:
$(function() {
   $('.prd-image a img').bind('mouseenter', function () {
				$(this).data('hover', true).parent().removeAttr('title');
				setTimeout($.proxy(function() {
						var goods_images_list = $(this).closest('.prd-image').find('.goods_images_list');
						var size = goods_images_list.find('img').size();
						if(size && $(this).data('hover')) {
								goods_images_list.find('div:eq(0)').show();
								if(size > 1) {
										goods_images_list.data('interval', setInterval($.proxy(function() {
												var next = $(this).find('div:visible').next();
												if(!next.length) {
														next = $(this).find('div:eq(0)');
												}
												$(this).find('div').hide();
												next.show();
										}, goods_images_list), 3000));
								}
						}
				}, this), 2000);
		});
		$('.prd-image a img').bind('mouseleave', function () {
				var goods_images_list = $(this).closest('.prd-image').find('.goods_images_list');
				goods_images_list.find('div').hide();
				$(this).removeData('hover');
				if(goods_images_list.data('interval')) {
						clearInterval(goods_images_list.data('interval'));
						goods_images_list.removeData('interval');
				}
		}); 
});

#6 velena168

velena168

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 1 643 сообщений
  • ГородСанкт- Петербург

Отправлено 25 Сентябрь 2014 - 02:41

Просмотр сообщенияVaccina (25 Сентябрь 2014 - 01:23) писал:

В шаблоне Товары находим:
<div class="product_image_wrapper">
<a href="{goods.URL | url_amp}" title="{goods.NAME}" class="product_img_link">
<img class="product_image" src="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-other.png?design=autumn{% ELSE %}{goods.IMAGE_OTHER}{% ENDIF %}" alt="{goods.NAME}" />
</a>
</div>

меняем на:

<div class="prd-image product_image_wrapper">
<a href="{goods.URL}" title="Перейти на страницу &laquo;{goods.NAME}&raquo;"><img class="goods-image-small" {% IF goods.IMAGE_EMPTY %}src="{ASSETS_IMAGES_PATH}no-photo-medium.png" width="220"{% ELSE %}src="{goods.IMAGE_SMALL}"{% ENDIF %} alt="{goods.NAME}" /></a>
<div class="goods_images_list">
{% FOR images %}
<div style="display: none;"><img src="{goods.images.LARGE}" alt="{goods.images.NAME}" /></div>
{% ENDFOR %}
</div>
</div>

далее в style.css втавляем:

.prd-image {
position: relative;
}

.goods_images_list > div {
display: none;
position: absolute;
z-index: 100;
background: #FFFFFF;
border: 3px solid #CCCCCC;
border-radius: 4px;
left: 118px;
padding: 2px;
top: 11px;
max-height: 359px;
max-width: 512px;
}
.goods_images_list img {
width:350px;
}

.product_image_wrapper > a img {
max-width: 180px;
}


и в main.js вставляем в самый конец:
$(function() {
$('.prd-image a img').bind('mouseenter', function () {
$(this).data('hover', true).parent().removeAttr('title');
setTimeout($.proxy(function() {
var goods_images_list = $(this).closest('.prd-image').find('.goods_images_list');
var size = goods_images_list.find('img').size();
if(size && $(this).data('hover')) {
goods_images_list.find('div:eq(0)').show();
if(size > 1) {
goods_images_list.data('interval', setInterval($.proxy(function() {
var next = $(this).find('div:visible').next();
if(!next.length) {
next = $(this).find('div:eq(0)');
}
$(this).find('div').hide();
next.show();
}, goods_images_list), 3000));
}
}
}, this), 2000);
});
$('.prd-image a img').bind('mouseleave', function () {
var goods_images_list = $(this).closest('.prd-image').find('.goods_images_list');
goods_images_list.find('div').hide();
$(this).removeData('hover');
if(goods_images_list.data('interval')) {
clearInterval(goods_images_list.data('interval'));
goods_images_list.removeData('interval');
}
});
});
Спасибо.
Но не совсем получилось. Фото, цена, кнопка Быстрый заказ и наименование соседнего товара наезжают на фото увеличенного. И немного тормозит появление увеличенного фото и перелистывание товара (там где есть дополнительные фото), т. е. не сразу открывается увеличение и можно не догадаться что увеличивается.
Принцип правильный, но еще что-то надо подкорректировать.
Буду ждать еще исправлений.

А еще кое-где фото в категориях вылезли за рамку.

Прикрепленные изображения

  • Снимок1.JPG
  • Снимок2.JPG

#7 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 25 Сентябрь 2014 - 04:09

В main.css добавьте:
#category_view_type.grid_view #product_list li:hover {
z-index: 1;
opacity: 1;
}

также найдите:
#category_view_type.grid_view #product_list li {
	border: 0 none;
	margin: 0 10px;
	min-height: 250px;
	padding: 0;
	position: relative;
	text-align: center;
	vertical-align: top;
	width: 214px;
}
впишите стиль сюда opacity: .99;

#8 velena168

velena168

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 1 643 сообщений
  • ГородСанкт- Петербург

Отправлено 25 Сентябрь 2014 - 04:42

Просмотр сообщенияVaccina (25 Сентябрь 2014 - 04:09) писал:

В main.css добавьте:
#category_view_type.grid_view #product_list li:hover {
z-index: 1;
opacity: 1;
}

также найдите:
#category_view_type.grid_view #product_list li {
border: 0 none;
margin: 0 10px;
min-height: 250px;
padding: 0;
position: relative;
text-align: center;
vertical-align: top;
width: 214px;
}
впишите стиль сюда opacity: .99;

Ничиго не изменилось.

Может потому-что последний код у меня другой немного

#category_view_type.grid_view #product_list li{display: inline-block; display: -moz-inline-stack; *display: inline;position:relative;width:214px;min-height: 250px;margin:0 10px;padding:0;border:0; vertical-align: top;text-align:center;z-index: 1;}
Пока вернула назад.

#9 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 25 Сентябрь 2014 - 04:47

отпишитесь когда внесете изменения, чтобы мы могли далее просмотреть и проконсультировать, в панели разработчика данные стили давали положительный результат

#10 velena168

velena168

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 1 643 сообщений
  • ГородСанкт- Петербург

Отправлено 25 Сентябрь 2014 - 05:01

Просмотр сообщенияVaccina (25 Сентябрь 2014 - 04:47) писал:

отпишитесь когда внесете изменения, чтобы мы могли далее просмотреть и проконсультировать, в панели разработчика данные стили давали положительный результат
Изменения внесла. Но уж очень некорректно отображается. Покупателей не распугать бы.

И стикеры Новинки стали плохо отображаться, углы торчат и фото некоторые за рамку вылезают.

Прикрепленные изображения

  • Снимок.JPG

#11 batta

batta

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 1 142 сообщений
  • ГородНижний Новгород

Отправлено 25 Сентябрь 2014 - 11:15

Просмотр сообщенияvelena168 (25 Сентябрь 2014 - 05:01) писал:

Изменения внесла. Но уж очень некорректно отображается. Покупателей не распугать бы.

И стикеры Новинки стали плохо отображаться, углы торчат и фото некоторые за рамку вылезают.
Здравствуйте.
Данной проблемы не наблюдаем, вопрос ещё актуален?

#12 velena168

velena168

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 1 643 сообщений
  • ГородСанкт- Петербург

Отправлено 25 Сентябрь 2014 - 11:31

Просмотр сообщенияbatta (25 Сентябрь 2014 - 11:15) писал:

Здравствуйте.
Данной проблемы не наблюдаем, вопрос ещё актуален?
Конечно актуален.  Изменения делались для шаблона товары. посмотрите .../catalog/Новинки-1

Все актуально:

Цитата

не совсем получилось. Фото, цена, кнопка Быстрый заказ и наименование соседнего товара наезжают на фото увеличенного. И немного тормозит появление увеличенного фото и перелистывание товара (там где есть дополнительные фото), т. е. не сразу открывается увеличение и можно не догадаться что увеличивается.
Принцип правильный, но еще что-то надо подкорректировать.
Буду ждать еще исправлений.


А еще кое-где фото в категориях вылезли за рамку.

#13 batta

batta

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 1 142 сообщений
  • ГородНижний Новгород

Отправлено 25 Сентябрь 2014 - 12:09

Просмотр сообщенияvelena168 (25 Сентябрь 2014 - 11:31) писал:

Конечно актуален.  Изменения делались для шаблона товары. посмотрите .../catalog/Новинки-1

Все актуально:
Допишите в style.css
.prd-image.product_image_wrapper {
overflow: hidden;
}

#14 velena168

velena168

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 1 643 сообщений
  • ГородСанкт- Петербург

Отправлено 25 Сентябрь 2014 - 12:48

Просмотр сообщенияbatta (25 Сентябрь 2014 - 12:09) писал:

Допишите в style.css
.prd-image.product_image_wrapper {
overflow: hidden;
}
Стикеры Новинки встали на место. А увеличение фото при наведении теперь обрезано, т. к. теперь находятся в блоке

#15 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 26 Сентябрь 2014 - 00:04 

.prd-image.product_image_wrapper {
overflow: hidden;
}
попробуйте заменить на:
.image_link {
overflow: hidden;
}

изменения на счет перекрытия увеличенного фото другим товаром работают

#16 velena168

velena168

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 1 643 сообщений
  • ГородСанкт- Петербург

Отправлено 26 Сентябрь 2014 - 01:57

Просмотр сообщенияVaccina (26 Сентябрь 2014 - 00:04) писал:

.prd-image.product_image_wrapper {
overflow: hidden;
}
попробуйте заменить на:
.image_link {
overflow: hidden;
}

изменения на счет перекрытия увеличенного фото другим товаром работают

Так ведь, наоборот надо чтобы увеличенное фото перекрывало соседний товар, а сейчас оно под ним, зачем тогда оно нужно?

На 1 скрине как сейчас, а на 2-м как нужно.

Прикрепленные изображения

  • Снимок.JPG
  • Снимок1.JPG

#17 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 26 Сентябрь 2014 - 02:14

немного не понимаю вас, в последнем посте чуть выше стили убирали обрезание для увеличенных фото не портя скидочные бирки,  на данный момент при наведении на товар, увеличенное фото сверху перекрывает соседний товар как и должно, от чего у вас получается наоборот? и было ли нормально перекрытие до изменений в последнем посте.

на счет перекрытия, в main.css найдите:
#category_view_type.grid_view #product_list li {
	border: 0 none;
	display: -moz-inline-stack;
	margin: 0 10px;
	min-height: 250px;
	opacity: 0.99;
	padding: 0;
	position: relative;
	text-align: center;
	vertical-align: top;
	width: 214px;
	z-index: 1;
}
замените на:
#category_view_type.grid_view #product_list li {
	border: 0 none;
	display: -moz-inline-stack;
	margin: 0 10px;
	min-height: 250px;
	opacity: 0.99;
	padding: 0;
	position: relative;
	text-align: center;
	vertical-align: top;
	width: 214px;
}

#18 velena168

velena168

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 1 643 сообщений
  • ГородСанкт- Петербург

Отправлено 26 Сентябрь 2014 - 02:27

Просмотр сообщенияVaccina (26 Сентябрь 2014 - 02:14) писал:

немного не понимаю вас, в последнем посте чуть выше стили убирали обрезание для увеличенных фото не портя скидочные бирки,  на данный момент при наведении на товар, увеличенное фото сверху перекрывает соседний товар как и должно, от чего у вас получается наоборот? и было ли нормально перекрытие до изменений в последнем посте.

на счет перекрытия, в main.css найдите:
#category_view_type.grid_view #product_list li {
border: 0 none;
display: -moz-inline-stack;
margin: 0 10px;
min-height: 250px;
opacity: 0.99;
padding: 0;
position: relative;
text-align: center;
vertical-align: top;
width: 214px;
z-index: 1;
}
замените на:
#category_view_type.grid_view #product_list li {
border: 0 none;
display: -moz-inline-stack;
margin: 0 10px;
min-height: 250px;
opacity: 0.99;
padding: 0;
position: relative;
text-align: center;
vertical-align: top;
width: 214px;
}

Может не там код меняю, теперь все товары отображаются не таблицей, а столбиком.
Нормально перекрытие до изменений в последнем посте НЕ БЫЛО.

сейчас меняла в style.css строка 488 ПОЛУЧИЛОСЬ СТОЛБИКОМ, а не таблицей.

Прикрепленные изображения

  • Снимок3.JPG

#19 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 26 Сентябрь 2014 - 02:32

в данном блоке стилей
#category_view_type.grid_view #product_list li {
border: 0 none;
display: -moz-inline-stack;
margin: 0 10px;
min-height: 250px;
opacity: 0.99;
padding: 0;
position: relative;
text-align: center;
vertical-align: top;
width: 214px;
z-index: 1;
}

просто необходимо удалить  z-index: 1;

попробуйте этот блок заменить на:
#category_view_type.grid_view #product_list li {
	border: 0 none;
	display: inline-block;
	margin: 0 10px;
	min-height: 250px;
	opacity: 0.99;
	padding: 0;
	position: relative;
	text-align: center;
	vertical-align: top;
	width: 214px;
}

#20 velena168

velena168

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 1 643 сообщений
  • ГородСанкт- Петербург

Отправлено 26 Сентябрь 2014 - 02:53

Просмотр сообщенияVaccina (26 Сентябрь 2014 - 02:32) писал:

в данном блоке стилей
#category_view_type.grid_view #product_list li {
border: 0 none;
display: -moz-inline-stack;
margin: 0 10px;
min-height: 250px;
opacity: 0.99;
padding: 0;
position: relative;
text-align: center;
vertical-align: top;
width: 214px;
z-index: 1;
}

просто необходимо удалить  z-index: 1;

попробуйте этот блок заменить на:
#category_view_type.grid_view #product_list li {
border: 0 none;
display: inline-block;
margin: 0 10px;
min-height: 250px;
opacity: 0.99;
padding: 0;
position: relative;
text-align: center;
vertical-align: top;
width: 214px;
}
Спасибо, теперь увеличенные фото отображаются как надо, НО теперь опять стикеры НОвинок отображаются некорректно

Прикрепленные изображения

  • Снимок4.JPG

Обратно в Каталог товаров


Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных

  1. Форум владельцев интернет-магазинов
  2. → Вопросы работы сервиса StoreLand
  3. → Дизайн
  4. → Шаблон Осень
  5. → Каталог товаров
  6. Privacy Policy