Отключен JavaScript

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

1

Смена Изображения Товара При Наведении На Миниатюру

Автор Антон 5554, 10 янв. 2017 23:59

Назад

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

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

#21 Антон 5554

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

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

Отправлено 11 Январь 2018 - 01:19

Vaccina (09 Ноябрь 2017 - 06:50) писал:

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

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

<!-- Другие изображения товара. Отображаются если есть изображения товара -->
				 {% IFNOT goods_images_empty %}
							 <div id="thumblist" class="thumblist popup-gallery">
								 {% FOR goods_images %}
										 <li><a href="{goods_images.MEDIUM}" title="{goods_images.NAME}" class="thumblisticon"><img src="{goods_images.OTHER}" alt="{goods_images.NAME}" class="goods-image-icon" itemprop="image" /></a></li>
																	 {% ENDFOR %}
							 </div>
				 {% ENDIF %}
			 </div><!-- END другие изображение товара -->

замените на:

<!-- Другие изображения товара. Отображаются если есть изображения товара -->
				 {% IFNOT goods_images_empty %}
							 <div id="thumblist" class="thumblist">
								 {% FOR goods_images %}
										 <li><a data-href="{goods_images.MEDIUM}" title="{goods_images.NAME}" class="thumblisticon"><img src="{goods_images.OTHER}" alt="{goods_images.NAME}" class="goods-image-icon" itemprop="image" /></a></li>
																	 {% ENDFOR %}
							 </div>
				 {% ENDIF %}
			 </div><!-- END другие изображение товара -->

далее зайдите в main.js - найдите:

// Изменение главного изображения товара при нажатии на миниатюру
$(document).ready(function () {
$('.thumblist-box a').click(function () {
	 // Путь к среднему изображению
	 var MediumImageUrl = $(this).attr('href'),

замените на:

// Изменение главного изображения товара при нажатии на миниатюру
$(document).ready(function () {
$('.thumblist-box a').click(function () {
	 // Путь к среднему изображению
	 var MediumImageUrl = $(this).attr('data-href'),

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

Ссылка на товар: https://geoidea.ru/g...ka-tomshoo-mini

Наверх

#22 DevidINA

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

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

Отправлено 16 Январь 2018 - 17:11

Здравствуйте. Подскажите как сделать чтобы при нажатии (не при наведении) на миниатюру изображение открывалось в изображении товара и открывались все одного размера, а если уже нажать на изображение товара, открывался слайдер с темным фоном. И возможно ли поставить увеличение изображения товара как под лупой при наведении на него. Спасибо !

Наверх

#23 Vaccina

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

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

Отправлено 17 Январь 2018 - 03:36

Антон 5554 (11 Январь 2018 - 01:19) писал:

Здравствуйте, в карточке товара при клике на большое изображение всегда открывается первое. Помогите исправить? Заранее благодарен.
Ссылка на товар: https://geoidea.ru/g...ka-tomshoo-mini

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

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

// Изменение главного изображения товара при нажатии на миниатюру
$(document).ready(function () {
  $('.thumblist-box a').click(function () {
				// Путь к среднему изображению
				var MediumImageUrl = $(this).attr('data-href'),
		// Главное изображение, в которое будем вставлять новое изображение
		MainImage = $('.general-img img'),
		// В этом объекте хранится идентификатор картинки главного изображения для коректной работы галереи изображений
		MainImageIdObject = $('.general-img a').attr('href'),
		// Получаем идентификатор этого изображения из соседнего input поля
		GoodsImageIconId = $(this).find('a').attr('src');
		// Изменяем главное изображение
		MainImage.attr('src', MediumImageUrl);
		// Изменяем идентификатор главного изображения
		MainImageIdObject.attr('rel', GoodsImageIconId);
		return false;
  });
});

замените на:

// Изменение главного изображения товара при нажатии на миниатюру
$(document).ready(function () {
  $('.thumblist-box a').click(function () {
	// Путь к среднему изображению
	var MediumImageUrl = $(this).attr('data-href'),
	// Главное изображение, в которое будем вставлять новое изображение
	MainImage = $('.general-img img'),
	// В этом объекте хранится идентификатор картинки главного изображения для коректной работы галереи изображений
	MainImageIdObject = $('.general-img a'),
	// Получаем идентификатор этого изображения из соседнего input поля
	GoodsImageIconId = $(this).find('a').attr('src');
	// Изменяем главное изображение
	MainImage.attr('src', MediumImageUrl);
	MainImageIdObject.attr('href', MediumImageUrl);
	// Изменяем идентификатор главного изображения
	MainImageIdObject.attr('rel', GoodsImageIconId);
	return false;
  });
});

DevidINA (16 Январь 2018 - 17:11) писал:

Здравствуйте. Подскажите как сделать чтобы при нажатии (не при наведении) на миниатюру изображение открывалось в изображении товара и открывались все одного размера, а если уже нажать на изображение товара, открывался слайдер с темным фоном. И возможно ли поставить увеличение изображения товара как под лупой при наведении на него. Спасибо !

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

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

// Галерея изображения и Фильтры в карточке Товара
function goodspage() {
$('.thumblisticon').click(function(){
				var url = $(this).attr('href');
				$('.general-img').find('img').attr('src', url);
$('.general-img').find('a').attr('href', url);
				return false;
  });

замените на:

// Галерея изображения и Фильтры в карточке Товара
function goodspage() {
  $('.thumblisticon').click(function () {
	var url = $(this).attr('href');
	$('.general-img').find('img').attr('src', url);
	$('.general-img').find('a').attr('href', url);
	return false;
  });
  // Открытие изображения товара при клике
  $(document).ready(function () {
	$('.popup-gallery').magnificPopup({
	  delegate: 'a',
	  type: 'image',
	  tLoading: 'Загружаем изображение #%curr%...',
	  mainClass: 'mfp-img-mobile',
	  gallery: {
		enabled: true,
		navigateByImgClick: true,
		preload: [
		  0,
		  1
		] // Will preload 0 - before current, and 1 after the current image
	  },
	  image: {
		tError: '<a href="%url%">Изображение #%curr%</a> не загружено.',
		titleSrc: function (item) {
		  return item.el.attr('title') + '<small>StoreLand.ru</small>';
		}
	  }
	});
  });

Наверх

#24 DevidINA

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

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

Отправлено 17 Январь 2018 - 15:39

Vaccina (17 Январь 2018 - 03:36) писал:

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

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

// Изменение главного изображения товара при нажатии на миниатюру
$(document).ready(function () {
$('.thumblist-box a').click(function () {
			 // Путь к среднему изображению
			 var MediumImageUrl = $(this).attr('data-href'),
	 // Главное изображение, в которое будем вставлять новое изображение
	 MainImage = $('.general-img img'),
	 // В этом объекте хранится идентификатор картинки главного изображения для коректной работы галереи изображений
	 MainImageIdObject = $('.general-img a').attr('href'),
	 // Получаем идентификатор этого изображения из соседнего input поля
	 GoodsImageIconId = $(this).find('a').attr('src');
	 // Изменяем главное изображение
	 MainImage.attr('src', MediumImageUrl);
	 // Изменяем идентификатор главного изображения
	 MainImageIdObject.attr('rel', GoodsImageIconId);
	 return false;
});
});

замените на:

// Изменение главного изображения товара при нажатии на миниатюру
$(document).ready(function () {
$('.thumblist-box a').click(function () {
// Путь к среднему изображению
var MediumImageUrl = $(this).attr('data-href'),
// Главное изображение, в которое будем вставлять новое изображение
MainImage = $('.general-img img'),
// В этом объекте хранится идентификатор картинки главного изображения для коректной работы галереи изображений
MainImageIdObject = $('.general-img a'),
// Получаем идентификатор этого изображения из соседнего input поля
GoodsImageIconId = $(this).find('a').attr('src');
// Изменяем главное изображение
MainImage.attr('src', MediumImageUrl);
MainImageIdObject.attr('href', MediumImageUrl);
// Изменяем идентификатор главного изображения
MainImageIdObject.attr('rel', GoodsImageIconId);
return false;
});
});

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

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

// Галерея изображения и Фильтры в карточке Товара
function goodspage() {
$('.thumblisticon').click(function(){
			 var url = $(this).attr('href');
			 $('.general-img').find('img').attr('src', url);
$('.general-img').find('a').attr('href', url);
			 return false;
});

замените на:

// Галерея изображения и Фильтры в карточке Товара
function goodspage() {
$('.thumblisticon').click(function () {
var url = $(this).attr('href');
$('.general-img').find('img').attr('src', url);
$('.general-img').find('a').attr('href', url);
return false;
});
// Открытие изображения товара при клике
$(document).ready(function () {
$('.popup-gallery').magnificPopup({
	 delegate: 'a',
	 type: 'image',
	 tLoading: 'Загружаем изображение #%curr%...',
	 mainClass: 'mfp-img-mobile',
	 gallery: {
	 enabled: true,
	 navigateByImgClick: true,
	 preload: [
		 0,
		 1
	 ] // Will preload 0 - before current, and 1 after the current image
	 },
	 image: {
	 tError: '<a href="%url%">Изображение #%curr%</a> не загружено.',
	 titleSrc: function (item) {
		 return item.el.attr('title') + '<small>StoreLand.ru</small>';
	 }
	 }
});
});

Спасибо! Увеличение при наведении не работает

Наверх

#25 DevidINA

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

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

Отправлено 17 Январь 2018 - 15:53

DevidINA (17 Январь 2018 - 15:39) писал:

Спасибо! Увеличение при наведении не работает

Все сделал. Вопрос закрыт

Наверх

#26 Антон 5554

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

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

Отправлено 18 Январь 2018 - 00:43

Vaccina (17 Январь 2018 - 03:36) писал:

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

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

// Изменение главного изображения товара при нажатии на миниатюру
$(document).ready(function () {
$('.thumblist-box a').click(function () {
			 // Путь к среднему изображению
			 var MediumImageUrl = $(this).attr('data-href'),
	 // Главное изображение, в которое будем вставлять новое изображение
	 MainImage = $('.general-img img'),
	 // В этом объекте хранится идентификатор картинки главного изображения для коректной работы галереи изображений
	 MainImageIdObject = $('.general-img a').attr('href'),
	 // Получаем идентификатор этого изображения из соседнего input поля
	 GoodsImageIconId = $(this).find('a').attr('src');
	 // Изменяем главное изображение
	 MainImage.attr('src', MediumImageUrl);
	 // Изменяем идентификатор главного изображения
	 MainImageIdObject.attr('rel', GoodsImageIconId);
	 return false;
});
});

замените на:

// Изменение главного изображения товара при нажатии на миниатюру
$(document).ready(function () {
$('.thumblist-box a').click(function () {
// Путь к среднему изображению
var MediumImageUrl = $(this).attr('data-href'),
// Главное изображение, в которое будем вставлять новое изображение
MainImage = $('.general-img img'),
// В этом объекте хранится идентификатор картинки главного изображения для коректной работы галереи изображений
MainImageIdObject = $('.general-img a'),
// Получаем идентификатор этого изображения из соседнего input поля
GoodsImageIconId = $(this).find('a').attr('src');
// Изменяем главное изображение
MainImage.attr('src', MediumImageUrl);
MainImageIdObject.attr('href', MediumImageUrl);
// Изменяем идентификатор главного изображения
MainImageIdObject.attr('rel', GoodsImageIconId);
return false;
});
});

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

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

// Галерея изображения и Фильтры в карточке Товара
function goodspage() {
$('.thumblisticon').click(function(){
			 var url = $(this).attr('href');
			 $('.general-img').find('img').attr('src', url);
$('.general-img').find('a').attr('href', url);
			 return false;
});

замените на:

// Галерея изображения и Фильтры в карточке Товара
function goodspage() {
$('.thumblisticon').click(function () {
var url = $(this).attr('href');
$('.general-img').find('img').attr('src', url);
$('.general-img').find('a').attr('href', url);
return false;
});
// Открытие изображения товара при клике
$(document).ready(function () {
$('.popup-gallery').magnificPopup({
	 delegate: 'a',
	 type: 'image',
	 tLoading: 'Загружаем изображение #%curr%...',
	 mainClass: 'mfp-img-mobile',
	 gallery: {
	 enabled: true,
	 navigateByImgClick: true,
	 preload: [
		 0,
		 1
	 ] // Will preload 0 - before current, and 1 after the current image
	 },
	 image: {
	 tError: '<a href="%url%">Изображение #%curr%</a> не загружено.',
	 titleSrc: function (item) {
		 return item.el.attr('title') + '<small>StoreLand.ru</small>';
	 }
	 }
});
});

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

Наверх

#27 Vaccina

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

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

Отправлено 18 Январь 2018 - 08:42

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

Ответила вам в другой теме форума:
https://forum.storel...ню/#entry271978

Наверх

#28 Антон 5554

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

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

Отправлено 05 Ноябрь 2019 - 12:33

Vaccina (18 Январь 2018 - 08:42) писал:

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

Ответила вам в другой теме форума:
https://forum.storel...ню/#entry271978

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

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

Наверх

#29 Vaccina

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

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

Отправлено 16 Ноябрь 2019 - 08:49

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

Уточните пожалуйста, актуален ли еще ваш вопрос? На данный момент верхние и нижние стрелки работают.

Наверх

#30 Антон 5554

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

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

Отправлено 18 Ноябрь 2019 - 08:57

Vaccina (16 Ноябрь 2019 - 08:49) писал:

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

Уточните пожалуйста, актуален ли еще ваш вопрос? На данный момент верхние и нижние стрелки работают.

Здравствуйте, стрелки работают да. Но при наведении на миниатюру, верхние стрелки перестают работать и показывают всегда один и тот же товар. Помогите с этим пожалуйста.

Наверх

#31 Vaccina

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

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

Отправлено 19 Ноябрь 2019 - 03:58

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

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

.thumblist-image .next, .thumblist-image .prev {margin: 10px 10px 10px 5px;z-index:9;cursor: pointer;width: 28px;height: 28px;border: 0px solid #dfdfdf;-webkit-border-radius: 100%;-moz-border-radius: 100%;border-radius: 100%;position: absolute;top: 35%;right: 0px;text-indent: -999em;background: url("{ASSETS_IMAGES_PATH}ico-pager.png") no-repeat -78px 6px;}

замените на:

.thumblist-image .next, .thumblist-image .prev {background-color: #fff;margin: 10px 10px 10px 5px;z-index:9;cursor: pointer;width: 28px;height: 28px;-webkit-border-radius: 100%;-moz-border-radius: 100%;border-radius: 100%;position: absolute;top: 35%;right: 0px;text-indent: -999em;background-image: url("{ASSETS_IMAGES_PATH}ico-pager.png?lc=1574078154");background-position: -78px 6px;background-repeat: no-repeat;z-index: 30;}

Наверх

#32 Антон 5554

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

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

Отправлено 19 Ноябрь 2019 - 09:32

Vaccina (19 Ноябрь 2019 - 03:58) писал:

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

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

.thumblist-image .next, .thumblist-image .prev {margin: 10px 10px 10px 5px;z-index:9;cursor: pointer;width: 28px;height: 28px;border: 0px solid #dfdfdf;-webkit-border-radius: 100%;-moz-border-radius: 100%;border-radius: 100%;position: absolute;top: 35%;right: 0px;text-indent: -999em;background: url("{ASSETS_IMAGES_PATH}ico-pager.png") no-repeat -78px 6px;}

замените на:

.thumblist-image .next, .thumblist-image .prev {background-color: #fff;margin: 10px 10px 10px 5px;z-index:9;cursor: pointer;width: 28px;height: 28px;-webkit-border-radius: 100%;-moz-border-radius: 100%;border-radius: 100%;position: absolute;top: 35%;right: 0px;text-indent: -999em;background-image: url("{ASSETS_IMAGES_PATH}ico-pager.png?lc=1574078154");background-position: -78px 6px;background-repeat: no-repeat;z-index: 30;}

Сделал. изменений не наблюдается)