Отключен JavaScript

У вас отключен JavaScript. Некоторые возможности системы не будут работать. Пожалуйста, включите JavaScript для получения доступа ко всем функциям.

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

Автор Константин1111, 24 апр. 2014 14:16

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

Вперед

Авторизуйтесь для ответа в теме

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

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

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

Пользователи
192 сообщений

ГородКраснодар

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

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

Наверх

#2 Ирина345

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

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

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

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

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

Наверх

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

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

Пользователи
192 сообщений

ГородКраснодар

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

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

Наверх

#4 Ирина345

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

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

Отправлено 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

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

Модераторы
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

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

Пользователи
192 сообщений

ГородКраснодар

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

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

Наверх

#7 Cybernetic

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

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

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

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

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

Наверх

#8 Cybernetic

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

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

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

Cybernetic (07 Июль 2014 - 07:24) писал:

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

Наверх

#9 Vaccina

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

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

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

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

Наверх

#10 waldmoos

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

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

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

Здравствуйте!
На аккаунте SL-300827 внес изменения по 2-му варианту. появилась надпись: увеличить изображение. Всё работает. Изображение открывается.
Вношу те же изменения в аккаунте SL-300332 - при клике на "увеличить изображение" просто перезагружается страница. При просмотре кода элемента, видно:

<a href="#">Увеличить изображение</a>

Подскажите пожалуйста, как это можно исправить?
И второй вопрос:
Как корректно отключить увеличение в окне товара (при наведении курсора)?

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

Наверх

#11 С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

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

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

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

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

Наверх

#13 waldmoos

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

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

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

Сake (10 Июль 2014 - 03:39) писал:

<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

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

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

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

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

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

в файл main.js

Наверх

#15 waldmoos

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

Пользователи
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

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

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

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

Цитата

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

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

Наверх

#17 waldmoos

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

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

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

Сake (12 Июль 2014 - 00:09) писал:

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

Спасибо! опять дело было в кэше...
Всё работает!

Наверх

#18 Mari-ina

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

Пользователи
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

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

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

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

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

Наверх

#20 Mari-ina

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

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

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

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

Наверх

Вперед

Обратно в Шаблон Весна

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

Вопросы работы сервиса StoreLand → Дизайн → Шаблон Весна → Оформление заказа → Установка Виджета Пунктов Выдачи Заказа Сдэк Автор Гость_Firefly_* , 07 дек. 2020 СДЭК, Весна	0 Ответов 2 755 Просмотров	Firefly 07 дек. 2020
Вопросы работы сервиса StoreLand → Дизайн → Шаблон Весна → Главная → Немного Подредактировать Подвал И Добавить Почту Автор Гость_jonik_plov_* , 15 авг. 2018 подвал, весна, почта, помогите	1 Ответ 3 323 Просмотров	Firefly 15 авг. 2018
Вопросы работы сервиса StoreLand → Дизайн → Шаблон Весна → Изменение общей стилистики → Правки В Шапке Сайта. Прошу Помощи. Автор Гость_Nicolas_* , 04 авг. 2015 весна, шапка, логотип	5 Ответов 2 054 Просмотров	Danil 05 авг. 2015
Вопросы работы сервиса StoreLand → Дизайн → Шаблон Весна → Много Вопросов По Юзабилити И Дизайну Шаблона "весна" Автор Гость_Nicolas_* , 15 июня 2015 весна 1 2 3	Популярная тема 42 Ответов 9 302 Просмотров	RedHead 11 янв. 2016
Вопросы работы сервиса StoreLand → Дизайн → Шаблон Весна → Несколько Вопросов По Карточке Товара И Шрифту Меню. Автор Гость_Nicolas_* , 29 мая 2015 весна, шрифт, карточка и 1 еще...	Популярная тема 13 Ответов 2 424 Просмотров	Nicolas 02 июня 2015

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

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

Bing (1)

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

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

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

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

Войти

Google поиск