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


Увеличение Фото Товара, Шаблон Весна

увеличениефото товара весна

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

#1 Константин1111

Константин1111

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 192 сообщений
  • ГородКраснодар

Отправлено 24 Апрель 2014 - 14:16

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

#2 Ирина345

Ирина345

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

  • Модераторы
  • 5 673 сообщений

Отправлено 24 Апрель 2014 - 15:32

Просмотр сообщенияКонстантин1111 (24 Апрель 2014 - 14:16) писал:

Добрый день, хотелось бы следать так,чтобы фотография увеличивалась при нажатии на нее и открывался полный размер, примерно как в шаблоне пластик, очень уж неудобно данное новшество в "весне", когда увеличение возможно только в окне товара
Здравствуйте, что бы произвести необходимые Вам изменения, прочтите информацию по этим ссылкам
http://forum.storela...-при-наведении/
http://forum.storela...ара-в-каталоге/
http://forum.storela...ажатии-на-него/

#3 Константин1111

Константин1111

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 192 сообщений
  • ГородКраснодар

Отправлено 25 Апрель 2014 - 14:00

как это сделать непосредственно на моем шаблоне? не найду подобных строк на сайте

#4 Ирина345

Ирина345

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

  • Модераторы
  • 5 673 сообщений

Отправлено 25 Апрель 2014 - 17:47

Просмотр сообщенияКонстантин1111 (25 Апрель 2014 - 14:00) писал:

как это сделать непосредственно на моем шаблоне? не найду подобных строк на сайте
Здравствуйте, попробуйте найти в Редакторе шаблонов->Товар
строку
<!-- Другие изображения товара. Отображаются если есть изображения товара -->
{% IFNOT goods_images_empty %}

и передней вставить
<!-- Ссылка на увеличение среднего изображения товара до большого. Появляется если у товара указано изображение -->
{% IFNOT GOODS_IMAGE_EMPTY %}
<div class="goodsDataMainImageZoom">
<a href="{GOODS_IMAGE_LARGE}" target="_blank">Увеличить изображение</a>
</div>
{% ENDIF %}
а main.css  добавить код

.goodsDataMainImageZoom {text-align:center;padding:0.5em;}
.goodsDataMainImageZoom a {padding:5px 0px 5px 25px;background:transparent url('{ASSETS_IMAGES_PATH}zoom-magnifying.png') no-repeat scroll center left;}


#5 support 2.0

support 2.0

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

  • Модераторы
  • 4 950 сообщений

Отправлено 25 Апрель 2014 - 19:17

Просмотр сообщенияКонстантин1111 (25 Апрель 2014 - 14:00) писал:

как это сделать непосредственно на моем шаблоне? не найду подобных строк на сайте
Для дизайна Весна - В шаблоне "Товар" найдите код
{% ENDIF %}
								 <a href="{goods_images.LARGE}" title="{goods_images.NAME}" class="cloud-zoom-gallery" rel="useZoom: 'zoom1', smallImage: '{goods_images.MEDIUM}' "><img src="{goods_images.ICON}" alt="{goods_images.NAME}" /></a>										
				 {% IF goods_images.last %}

и замените его на
{% ENDIF %}
								 <a href="{goods_images.LARGE}" data="{goods_images.ID}" title="{goods_images.NAME}" class="cloud-zoom-gallery" rel="useZoom: 'zoom1', smallImage: '{goods_images.MEDIUM}' "><img src="{goods_images.ICON}" alt="{goods_images.NAME}" /></a>										
				 {% IF goods_images.last %}


далее найдите код
<!-- Большое изображение -->
		 <div class="image">
			 <div id="wrap" style="top:0px;z-index:9999;position:relative;">
				 {% IF GOODS_IMAGE_EMPTY %}
					 <img src="{ASSETS_IMAGES_PATH}no-photo-medium.png" alt="{GOODS_NAME}" title="Увеличить {GOODS_NAME}" class="thumbnail .goods-image-medium "/>
				 {% 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 %}		
			 </div>
		 </div>

и замените его на
<!-- Большое изображение -->
		 <div class="image">
			 <div id="wrap" style="top:0px;z-index:9999;position:relative;">
				 {% IF GOODS_IMAGE_EMPTY %}
					 <img src="{ASSETS_IMAGES_PATH}no-photo-medium.png" alt="{GOODS_NAME}" title="Увеличить {GOODS_NAME}" class="thumbnail .goods-image-medium "/>
				 {% 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 %}		
			 </div>
			 <center class="goodsImageZoom" data="{GOODS_IMAGE_ID}"><a href="#">Увеличить изображение</a></center>
		 </div>
		
		 {% IFNOT goods_images_empty %}
			 <div class="goodsImageList" style="display: none;">
			 {% FOR goods_images %}
				 <a href="{goods_images.LARGE}" data="{goods_images.ID}" title="{goods_images.NAME}" rel="gallery"><img src="{goods_images.ICON}" alt="{goods_images.NAME}" /></a>
			 {% ENDFOR %}
			 </div>
		 {% ENDIF %}


далее в файл main.js добавьте код
$(function() {
$('a[rel="gallery"]').fancybox();

// Увеличение изображение при клике на него и открытие галереи изображений
$('.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);
});
});


#6 Константин1111

Константин1111

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 192 сообщений
  • ГородКраснодар

Отправлено 26 Апрель 2014 - 14:29

Спасибо всем, помогло)

#7 Cybernetic

Cybernetic

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

  • Пользователи
  • PipPipPipPip
  • 1 014 сообщений

Отправлено 07 Июль 2014 - 07:24

Здравствуйте. Помогите решить вопрос с увеличении изображения по клику мыши.
Вышеописанный способ мне не подходит т.к. появляются не нужные слова под изображением "Увеличить изображение"
"Уменьшить изображение". Хотелось бы просто при клике на изображение изображение увеличивалось как при нажатии "увеличить изображение"
Более подробно на картинке в низу.

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

  • VAT.jpg


#8 Cybernetic

Cybernetic

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

  • Пользователи
  • PipPipPipPip
  • 1 014 сообщений

Отправлено 07 Июль 2014 - 10:08

Просмотр сообщенияCybernetic (07 Июль 2014 - 07:24) писал:

Здравствуйте. Помогите решить вопрос с увеличении изображения по клику мыши.
Вышеописанный способ мне не подходит т.к. появляются не нужные слова под изображением "Увеличить изображение"
"Уменьшить изображение". Хотелось бы просто при клике на изображение изображение увеличивалось как при нажатии "увеличить изображение"
Более подробно на картинке в низу.

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

#9 Vaccina

Vaccina

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

  • Модераторы
  • 23 864 сообщений

Отправлено 08 Июль 2014 - 01:48

на данный момент увеличение при клике на картинку работает корректно как и дальнейшее листание картинок, лишние фразы отсутствует, в консоле ошибок нет =)

#10 waldmoos

waldmoos

    Пользователь

  • Пользователи
  • PipPip
  • 15 сообщений

Отправлено 09 Июль 2014 - 22:48

Здравствуйте!
На аккаунте SL-300827 внес изменения по 2-му варианту. появилась надпись: увеличить изображение. Всё работает. Изображение открывается.
Вношу те же изменения в аккаунте SL-300332 - при клике на "увеличить изображение" просто перезагружается страница. При просмотре кода элемента, видно:
<a href="#">Увеличить изображение</a>
Подскажите пожалуйста, как это можно исправить?
И второй вопрос:
Как корректно отключить увеличение в окне товара (при наведении курсора)?

Сообщение отредактировал waldmoos: 09 Июль 2014 - 23:56


#11 Сake

Сake

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

  • Модератоpы
  • 5 979 сообщений

Отправлено 10 Июль 2014 - 03:39

К сожалению, при просмотре аккаунта SL-300332 описываемую вами проблему обнаружить не удалось. При нажатии на ссылку "увеличить изображение" - изображение увеличивается открываясь в сплывающем окне. Попробуйте очистить кеш в вашем браузере и проверить увеличение повторно.

Цитата

Как корректно отключить увеличение в окне товара (при наведении курсора)?

Найдите в вашем шаблоне "Товар" код

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

и замените его на

<a itemprop="image" href="{GOODS_IMAGE_LARGE}" title="Увеличить {GOODS_NAME}" 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>


#12 waldmoos

waldmoos

    Пользователь

  • Пользователи
  • PipPip
  • 15 сообщений

Отправлено 10 Июль 2014 - 07:52

Большое спасибо!
Про кеш -то я и забыл... всё заработало.
Увеличение при наведении исчезло, но вместо этого картинка стала кликабельной и открывается в том же окне, уводя посетителя со страницы товара.
Кликабельность картинки можно убрать? То, как картинка отображается на щелчке по "увеличить изображение" - вполне достаточно.

#13 waldmoos

waldmoos

    Пользователь

  • Пользователи
  • PipPip
  • 15 сообщений

Отправлено 10 Июль 2014 - 23:06

Просмотр сообщенияСake (10 Июль 2014 - 03:39) писал:

К сожалению, при просмотре аккаунта SL-300332 описываемую вами проблему обнаружить не удалось. При нажатии на ссылку "увеличить изображение" - изображение увеличивается открываясь в сплывающем окне. Попробуйте очистить кеш в вашем браузере и проверить увеличение повторно.



Найдите в вашем шаблоне "Товар" код

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

и замените его на

<a itemprop="image" href="{GOODS_IMAGE_LARGE}" title="Увеличить {GOODS_NAME}" 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>
SL-300332. Увеличение в окне товара (при наведении курсора) теперь отключено. Но теперь при клике на картинку - она открывается в том-же окне. Это совершенно лишнее, т.к присутствует ссылка под картинкой "увеличить изображение". Как решить эту проблему?

#14 Сake

Сake

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

  • Модератоpы
  • 5 979 сообщений

Отправлено 11 Июль 2014 - 01:31

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

$(function() {
  $('.image a[itemprop="image"]').click(function() {
	$('.goodsImageZoom a').trigger('click');
	return(false);
  });
});

в файл main.js

#15 waldmoos

waldmoos

    Пользователь

  • Пользователи
  • PipPip
  • 15 сообщений

Отправлено 11 Июль 2014 - 08:54

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

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

$(function() {
$('.image a[itemprop="image"]').click(function() {
$('.goodsImageZoom a').trigger('click');
return(false);
});
});

в файл main.js
SL-300332.
Я наверное не правильно сформулировал вопрос...
Как сделать, чтобы по щелчку на картинке она открывалась в  fancybox-image?

Сообщение отредактировал waldmoos: 11 Июль 2014 - 23:57


#16 Сake

Сake

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

  • Модератоpы
  • 5 979 сообщений

Отправлено 12 Июль 2014 - 00:09

Цитата

Как сделать, чтобы по щелчку на картинке она открывалась в  fancybox-image?

Вы пробовали использовать приведенный ранее мною код? Он именно это и реализует.

#17 waldmoos

waldmoos

    Пользователь

  • Пользователи
  • PipPip
  • 15 сообщений

Отправлено 12 Июль 2014 - 08:52

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

Вы пробовали использовать приведенный ранее мною код? Он именно это и реализует.
Спасибо! опять дело было в кэше...
Всё работает!

#18 Mari-ina

Mari-ina

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

  • Пользователи
  • PipPipPipPip
  • 646 сообщений

Отправлено 12 Июль 2014 - 21:35

Здравствуйте. Сделала по этой инструкции

Просмотр сообщенияsupport 2.0 (25 Апрель 2014 - 19:17) писал:

Для дизайна Весна - В шаблоне "Товар" найдите код
{% ENDIF %}
								 <a href="{goods_images.LARGE}" title="{goods_images.NAME}" class="cloud-zoom-gallery" rel="useZoom: 'zoom1', smallImage: '{goods_images.MEDIUM}' "><img src="{goods_images.ICON}" alt="{goods_images.NAME}" /></a>										
				 {% IF goods_images.last %}

и замените его на
{% ENDIF %}
								 <a href="{goods_images.LARGE}" data="{goods_images.ID}" title="{goods_images.NAME}" class="cloud-zoom-gallery" rel="useZoom: 'zoom1', smallImage: '{goods_images.MEDIUM}' "><img src="{goods_images.ICON}" alt="{goods_images.NAME}" /></a>										
				 {% IF goods_images.last %}


далее найдите код
<!-- Большое изображение -->
		 <div class="image">
			 <div id="wrap" style="top:0px;z-index:9999;position:relative;">
				 {% IF GOODS_IMAGE_EMPTY %}
					 <img src="{ASSETS_IMAGES_PATH}no-photo-medium.png" alt="{GOODS_NAME}" title="Увеличить {GOODS_NAME}" class="thumbnail .goods-image-medium "/>
				 {% 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 %}		
			 </div>
		 </div>[/font][/color]
[color=#282828][font=helvetica, arial, sans-serif]

и замените его на
<!-- Большое изображение -->
		 <div class="image">
			 <div id="wrap" style="top:0px;z-index:9999;position:relative;">
				 {% IF GOODS_IMAGE_EMPTY %}
					 <img src="{ASSETS_IMAGES_PATH}no-photo-medium.png" alt="{GOODS_NAME}" title="Увеличить {GOODS_NAME}" class="thumbnail .goods-image-medium "/>
				 {% 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 %}		
			 </div>
			 <center class="goodsImageZoom" data="{GOODS_IMAGE_ID}"><a href="#">Увеличить изображение</a></center>
		 </div>
		
		 {% IFNOT goods_images_empty %}
			 <div class="goodsImageList" style="display: none;">
			 {% FOR goods_images %}
				 <a href="{goods_images.LARGE}" data="{goods_images.ID}" title="{goods_images.NAME}" rel="gallery"><img src="{goods_images.ICON}" alt="{goods_images.NAME}" /></a>
			 {% ENDFOR %}
			 </div>
		 {% ENDIF %}


далее в файл main.js добавьте код
$(function() {
$('a[rel="gallery"]').fancybox();

// Увеличение изображение при клике на него и открытие галереи изображений
$('.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);
});
});


теперь у меня одновременно и зум в этом же окне, и ссылка на увеличение изображения. Как убрать зум вообще, и оставить только увеличение по щелчку на  картинке (слова "увеличить изображение" тоже убрать). И второй вопрос - там где несколько картинок, можно ли сделать на увеличенном изображении фразу с общим количеством фото и какое показано (например "Изображение 1 из 5") где-нибудь снизу под фото.

#19 Сake

Сake

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

  • Модератоpы
  • 5 979 сообщений

Отправлено 15 Июль 2014 - 05:03

Ранее данный вопрос рассматривался в теме форума http://forum.storela...ра/#entry125216
возможно вам так же пригодится тема форума http://forum.storela...ци/#entry124020

#20 Mari-ina

Mari-ina

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

  • Пользователи
  • PipPipPipPip
  • 646 сообщений

Отправлено 15 Июль 2014 - 14:00

Может я что-то не так делаю, но теперь у меня по щелчку на фото открывается увеличенное фото в этом же окне, а при щелчке по ссылке "увеличить изображение" открывается во всплывающем окне. Мне надо чтобы открывалось во всплывающем окне при щелчке на фото, ссылку "увеличить изображение" вообще убрать и чтобы на открывшемся фото снизу была нумерация "Изображение 1 из 5" например.





Темы с аналогичным тегами увеличениефото, товара, весна

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

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