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

[pavela]

[pavela]

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

Подскажите пожалуйста, как можно сделать, чтобы в карточке товара - при наведении на изображение и нажатии клавиши мышки - открывалась картинка большого размера, а не как сейчас - лупа ( просто не очень удобно - надо навести курсор на текст "увеличить изображение"), а сделать как например на сайте http://lamang.ru/cat...rochayniki/639/  
Спасибо

[Vaccina]

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

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

.product-info .image {
	text-align: center;
}

после него пропишите:

.product-info .image .goodsImageZoom {
	display: none;
}

Далее зайдите в шаблон Товар - найдите:

{% ELSE %}
			<a itemprop="image" href="{GOODS_IMAGE_LARGE}" title="Увеличить {GOODS_NAME}" class="cloud-zoom" id="zoom1" rel="position: 'inside', showTitle: false, adjustX:-4, adjustY:-4" style="position: relative; display: block;">
			  <img src="{GOODS_IMAGE_MEDIUM}" title="{GOODS_NAME}" alt="{GOODS_NAME}" id="image" style="display: block;" class=".goods-image-medium" />
			</a>
		  {% ENDIF %} 

замените на:

{% ELSE %}
			<a itemprop="image" href="{GOODS_IMAGE_LARGE}" title="Увеличить {GOODS_NAME}">
			  <img src="{GOODS_IMAGE_MEDIUM}" title="{GOODS_NAME}" alt="{GOODS_NAME}" id="image" style="display: block;" class=".goods-image-medium" />
			</a>
		  {% ENDIF %} 

Далее зайдите в шаблон main.js - найдите:

// Увеличение изображение при клике на него и открытие галереи изображений
  $('.goodsImageZoom a, .image-additional a').click(function(){
	if($(this).closest('.image-additional').length) {
	  $('.goodsImageZoom').attr('data', $(this).attr('data'));
	  return(true);
	}
	$('.goodsImageList a[data="' + $('.goodsImageZoom').attr("data") + '"]').trigger('click');
	return(false);
  });

замените на:

// Увеличение изображение при клике на него и открытие галереи изображений
  $('.goodsImageZoom a, .image-additional a, #wrap a').click(function(){
	if($(this).closest('.image-additional').length) {
	  $('.goodsImageZoom').attr('data', $(this).attr('data'));
	  return(true);
	}
	$('.goodsImageList a[data="' + $('.goodsImageZoom').attr("data") + '"]').trigger('click');
	return(false);
  });

После изменений почистите кэш браузера.

[pavela]

Vaccina (24 Декабрь 2016 - 03:48) писал:

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

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

.product-info .image {
text-align: center;
}

после него пропишите:

.product-info .image .goodsImageZoom {
display: none;
}

Далее зайдите в шаблон Товар - найдите:

{% ELSE %}
		 <a itemprop="image" href="{GOODS_IMAGE_LARGE}" title="Увеличить {GOODS_NAME}" class="cloud-zoom" id="zoom1" rel="position: 'inside', showTitle: false, adjustX:-4, adjustY:-4" style="position: relative; display: block;">
			 <img src="{GOODS_IMAGE_MEDIUM}" title="{GOODS_NAME}" alt="{GOODS_NAME}" id="image" style="display: block;" class=".goods-image-medium" />
		 </a>
		 {% ENDIF %}

замените на:

{% ELSE %}
		 <a itemprop="image" href="{GOODS_IMAGE_LARGE}" title="Увеличить {GOODS_NAME}">
			 <img src="{GOODS_IMAGE_MEDIUM}" title="{GOODS_NAME}" alt="{GOODS_NAME}" id="image" style="display: block;" class=".goods-image-medium" />
		 </a>
		 {% ENDIF %}

Далее зайдите в шаблон main.js - найдите:

// Увеличение изображение при клике на него и открытие галереи изображений
$('.goodsImageZoom a, .image-additional a').click(function(){
if($(this).closest('.image-additional').length) {
	 $('.goodsImageZoom').attr('data', $(this).attr('data'));
	 return(true);
}
$('.goodsImageList a[data="' + $('.goodsImageZoom').attr("data") + '"]').trigger('click');
return(false);
});

замените на:

// Увеличение изображение при клике на него и открытие галереи изображений
$('.goodsImageZoom a, .image-additional a, #wrap a').click(function(){
if($(this).closest('.image-additional').length) {
	 $('.goodsImageZoom').attr('data', $(this).attr('data'));
	 return(true);
}
$('.goodsImageList a[data="' + $('.goodsImageZoom').attr("data") + '"]').trigger('click');
return(false);
});

После изменений почистите кэш браузера.

Здравствуйте, к сожалению не нашел код Пунк 1)- который Вы указали в main.css и как следствие не смог вставить после него нужный и видимо по этому пока картинка открывается в новом окне а не на этой же странице((
Подскажите пожалуйста может я не там смотрел?

пункт 2 и 3 сделал

[Ирина345]

pavela (25 Декабрь 2016 - 00:12) писал:

Здравствуйте, к сожалению не нашел код Пунк 1)- который Вы указали в main.css и как следствие не смог вставить после него нужный и видимо по этому пока картинка открывается в новом окне а не на этой же странице((
Подскажите пожалуйста может я не там смотрел?

пункт 2 и 3 сделал

Здравствуйте, Вам внесли изменения на сайт.

[pavela]

Ирина345 (26 Декабрь 2016 - 14:50) писал:

Здравствуйте, Вам внесли изменения на сайт.

Вай, круто! Спасибо!

Скажите, а как можно реализовать следующее в соответствии со скриншотом 1:
1. Убрать текст "Увеличить изображение" - в карточке товара - под основным изображением?
2.+3. не понятно почему дополнительные изображения (которые находятся под основным) почему-то не помещаются в блок и пересекают две линии 2 и 3.
4. можно ли как то сделать, чтобы дополнительные изображения, которые находятся с низу - были в одну строчку (со стрелками пролистывания по бокам) как например на этом сайте? http://lamang.ru/cat...epilyatory/659/

спасибо

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

• 

[Vaccina]

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

.product-info .image {border: 1px solid #E7E7E7;padding: 10px;text-align: center;}

после него пропишите:

.product-info .image .goodsImageZoom {
display: none;
}

далее найдите:

.product-info > .left + .right {margin-left: 320px;}

замените на:

.product-info > .left + .right {margin-left: 320px;margin-bottom: 100px;}

4. На данный момент у вас установлена галерея.
В шаблоне HTML найдите и удалите:

<meta http-equiv="X-UA-Compatible" content="IE=7">

[pavela]

Vaccina (27 Декабрь 2016 - 02:44) писал:

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

.product-info .image {border: 1px solid #E7E7E7;padding: 10px;text-align: center;}

после него пропишите:

.product-info .image .goodsImageZoom {
display: none;
}

далее найдите:

.product-info > .left + .right {margin-left: 320px;}

замените на:

.product-info > .left + .right {margin-left: 320px;margin-bottom: 100px;}

4. На данный момент у вас установлена галерея.
В шаблоне HTML найдите и удалите:

<meta http-equiv="X-UA-Compatible" content="IE=7">

Здравствуйте.
Пункт 1 и 2 сделал как вы написали, но вот пункт 3 не нашел такой код в шаблоне HTML(((
Может быть по этому у меня изображение открывается в отдельной вкладке? а не на странице как планировалось?

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

• 

[Ирина345]

pavela (29 Декабрь 2016 - 20:04) писал:

Здравствуйте.
Пункт 1 и 2 сделал как вы написали, но вот пункт 3 не нашел такой код в шаблоне HTML(((
Может быть по этому у меня изображение открывается в отдельной вкладке? а не на странице как планировалось?

Здравствуйте, на данный момент у Вас изображения открываются в всплывающем окне, а не в отдельном окне. Очистите кеш браузера.

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

• 

[pavela]

Ирина345 (30 Декабрь 2016 - 14:18) писал:

Здравствуйте, на данный момент у Вас изображения открываются в всплывающем окне, а не в отдельном окне. Очистите кеш браузера.

Спасибо! Большое!