Отключен JavaScript

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

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

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

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

Вперед

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

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

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

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

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

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

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

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

Наверх

#2 Ирина345

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

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

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

Константин1111 (24 April 2014 - 14:16) писал:

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

Наверх

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

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

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

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

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

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

Наверх

#4 Ирина345

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

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

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

Константин1111 (25 April 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

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

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

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

Константин1111 (25 April 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 April 2014 - 14:29

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

Наверх

#7 Cybernetic

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

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

Отправлено 07 July 2014 - 07:24

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

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

Наверх

#8 Cybernetic

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

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

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

Cybernetic (07 July 2014 - 07:24) писал:

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

Наверх

#9 Vaccina

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

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

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

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

Наверх

#10 waldmoos

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

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

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

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

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

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

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

Наверх

#11 Сake

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

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

Отправлено 10 July 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 July 2014 - 07:52

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

Наверх

#13 waldmoos

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

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

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

Сake (10 July 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ы
5979 сообщений

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

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

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

в файл main.js

Наверх

#15 waldmoos

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

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

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

Сake (11 July 2014 - 01:31) писал:

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

в файл main.js

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

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

Наверх

#16 Сake

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

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

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

Цитата

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

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

Наверх

#17 waldmoos

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

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

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

Сake (12 July 2014 - 00:09) писал:

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

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

Наверх

#18 Mari-ina

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

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

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

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

support 2.0 (25 April 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ы
5979 сообщений

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

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

Наверх

#20 Mari-ina

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

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

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

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

Наверх

Вперед

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

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

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

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

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

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

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

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

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

Войти

Google поиск