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


Динамическая Смена Изображения Товара

Динамическая смена изображения товара

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

#1 igor-repsol

igor-repsol

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

  • Пользователи
  • PipPipPip
  • 152 сообщений
  • ГородОмск

Отправлено 13 Январь 2014 - 11:14

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

#2 Сake

Сake

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

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

Отправлено 14 Январь 2014 - 02:14

Пожалуйста, уточните ваш вопрос - вы хотите что бы изображения (миниатюры) автоматически подставлялись (через промежутки времени) в качестве основного изображения? Я верно вас понимаю? Если да, то вы можете использовать код

$(function() {
  if($('.zoomicon a').length) {
	var jnzoom = 0;
	setInterval(function() {
	  var img = $('.zoomicon:eq(' + jnzoom + ') a');
	  var MediumImageUrl = $(img).find('img').attr('rel'),
		MainImage = $('.fullimg img'),
		MainImageIdObject = $('.fullimg input'),
		GoodsImageIconId = $(img).parent().find('input').attr("rel");
		MainImage.attr('src',MediumImageUrl);
		MainImageIdObject.attr("rel",GoodsImageIconId);
	 jnzoom = $('.zoomicon:eq(' + (jnzoom + 1) + ') a').length ? ++jnzoom : 0; 
	}, 3000);
  }
});

просто добавив его в ваш файл main.js

#3 igor-repsol

igor-repsol

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

  • Пользователи
  • PipPipPip
  • 152 сообщений
  • ГородОмск

Отправлено 14 Январь 2014 - 08:36

Просмотр сообщенияСake (14 Январь 2014 - 02:14) писал:

Пожалуйста, уточните ваш вопрос - вы хотите что бы изображения (миниатюры) автоматически подставлялись (через промежутки времени) в качестве основного изображения? Я верно вас понимаю? Если да, то вы можете использовать код

$(function() {
if($('.zoomicon a').length) {
var jnzoom = 0;
setInterval(function() {
	 var img = $('.zoomicon:eq(' + jnzoom + ') a');
	 var MediumImageUrl = $(img).find('img').attr('rel'),
	 MainImage = $('.fullimg img'),
	 MainImageIdObject = $('.fullimg input'),
	 GoodsImageIconId = $(img).parent().find('input').attr("rel");
	 MainImage.attr('src',MediumImageUrl);
	 MainImageIdObject.attr("rel",GoodsImageIconId);
	 jnzoom = $('.zoomicon:eq(' + (jnzoom + 1) + ') a').length ? ++jnzoom : 0;
}, 3000);
}
});

просто добавив его в ваш файл main.js

Все правильно поняли меня. Но изменений нет.

#4 igor-repsol

igor-repsol

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

  • Пользователи
  • PipPipPip
  • 152 сообщений
  • ГородОмск

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

Возможно не правильно рекламировать стороной ресурс там видно как мне нужно.
http://bestreg5.ru/i...eplutus-dvr-127

#5 Сake

Сake

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

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

Отправлено 15 Январь 2014 - 00:54

На данный момент предложенный код на вашем сайте отсутствует. Пожалуйста, разместите код в вашем файле main.js. Если ваш вопрос относиться не к номеру аккаунта 257557, то сообщите соответствующий номер аккаунта.

#6 igor-repsol

igor-repsol

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

  • Пользователи
  • PipPipPip
  • 152 сообщений
  • ГородОмск

Отправлено 15 Январь 2014 - 07:34

Просмотр сообщенияСake (15 Январь 2014 - 00:54) писал:

На данный момент предложенный код на вашем сайте отсутствует. Пожалуйста, разместите код в вашем файле main.js. Если ваш вопрос относиться не к номеру аккаунта 257557, то сообщите соответствующий номер аккаунта.

Все работает. Я забыл наверно сохранить.
Можно его настроить по скорости смены и заменить эффект появления изображения. Сей час происходит заменяется а хотелось бы чтоб происходило плавное появление (эффект растворения такой же как на стороннем сайте)

#7 Сake

Сake

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

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

Отправлено 16 Январь 2014 - 00:50

Изменить скорость смены изображения можно путем изменения значения 3000 (в вставленном коде), данное значение обозначает три секунды интервала. В качестве простого эффекта смены изображений можно использовать код

MainImage.fadeOut('fast', function() {
   $(this).attr('src',MediumImageUrl).fadeIn('fast');
});

Для применения данного кода - замените в вставленном коде ранее строку

MainImage.attr('src',MediumImageUrl);

В результате должно получиться

$(function() {
if($('.zoomicon a').length) {
var jnzoom = 0;
setInterval(function() {
		 var img = $('.zoomicon:eq(' + jnzoom + ') a');
		 var MediumImageUrl = $(img).find('img').attr('rel'),
		 MainImage = $('.fullimg img'),
		 MainImageIdObject = $('.fullimg input'),
		 GoodsImageIconId = $(img).parent().find('input').attr("rel");
		 MainImage.fadeOut('fast', function() {
			$(this).attr('src',MediumImageUrl).fadeIn('fast');
		 });
		 MainImageIdObject.attr("rel",GoodsImageIconId);
		 jnzoom = $('.zoomicon:eq(' + (jnzoom + 1) + ') a').length ? ++jnzoom : 0;
}, 3000);
}
});


#8 igor-repsol

igor-repsol

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

  • Пользователи
  • PipPipPip
  • 152 сообщений
  • ГородОмск

Отправлено 16 Январь 2014 - 10:59

Просмотр сообщенияСake (16 Январь 2014 - 00:50) писал:

Изменить скорость смены изображения можно путем изменения значения 3000 (в вставленном коде), данное значение обозначает три секунды интервала. В качестве простого эффекта смены изображений можно использовать код

MainImage.fadeOut('fast', function() {
$(this).attr('src',MediumImageUrl).fadeIn('fast');
});

Для применения данного кода - замените в вставленном коде ранее строку

MainImage.attr('src',MediumImageUrl);

В результате должно получиться

$(function() {
if($('.zoomicon a').length) {
var jnzoom = 0;
setInterval(function() {
		 var img = $('.zoomicon:eq(' + jnzoom + ') a');
		 var MediumImageUrl = $(img).find('img').attr('rel'),
		 MainImage = $('.fullimg img'),
		 MainImageIdObject = $('.fullimg input'),
		 GoodsImageIconId = $(img).parent().find('input').attr("rel");
		 MainImage.fadeOut('fast', function() {
		 $(this).attr('src',MediumImageUrl).fadeIn('fast');
		 });
		 MainImageIdObject.attr("rel",GoodsImageIconId);
		 jnzoom = $('.zoomicon:eq(' + (jnzoom + 1) + ') a').length ? ++jnzoom : 0;
}, 3000);
}
});


Спасибо получилось как и хотел.

#9 p-alex1990

p-alex1990

    Новичок

  • Пользователи
  • Pip
  • 2 сообщений
  • ГородКрасноярск

Отправлено 08 Март 2014 - 17:24

Сделал подобное, плавная смена картинок тоже получалась, но возникла другая проблема. Картинки разного размера, из-за этого поле "описание" дергается. Если ли возможность его зафиксировать?

#10 Alexey11

Alexey11

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

  • Модератоpы
  • 1 057 сообщений
  • ГородНижний новгород

Отправлено 09 Март 2014 - 09:35

Если зафиксировать данное поле то картинки будут отображаться в разных углах в зависимости от размера и это также будет смотреться не красиво. Лучший вариант решения данной проблемы подогнать картинки под один размер.

#11 p-alex1990

p-alex1990

    Новичок

  • Пользователи
  • Pip
  • 2 сообщений
  • ГородКрасноярск

Отправлено 09 Март 2014 - 14:30

Просмотр сообщенияAlexey11 (09 Март 2014 - 09:35) писал:

Если зафиксировать данное поле то картинки будут отображаться в разных углах в зависимости от размера и это также будет смотреться не красиво. Лучший вариант решения данной проблемы подогнать картинки под один размер.

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





Темы с аналогичным тегами Динамическая, смена, изображения, товара

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

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