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

[borisovd]

Помогите поставить это слайдер http://bxslider.com/ Нужно поставить его вместо изображений в каталоге товаров. Что бы фотографии листались из каталога.

[borisovd]

Ну или какой нибудь похожий слайдер. Нужно как здесь http://www.butik.ru/...odezhda/brjuki/

[Сake]

На данный момент у вас уже имеется переключение изображений в сплывающем окне. Вы хотите отключить эту возможность и добавить ту которую приводите в качестве примера по ссылке?

[borisovd]

Сake (21 Ноябрь 2013 - 02:54) писал:

На данный момент у вас уже имеется переключение изображений в сплывающем окне. Вы хотите отключить эту возможность и добавить ту которую приводите в качестве примера по ссылке?

Так хотелось изначально. Но ответили что не получиться http://forum.storela...отр/#entry97107 Хотя по идеи можно засунуть слайдер в место картинки товара а фотографии во внутрь слайдера то же реально сделать, вот написал еще раз. Вдруг решение кто придумает И вроде как Вы знаете)

[Сake]

В подобной реализации слайдер лучше не использовать, так как это очень сильно будет влиять на скорость отрисовки страницы каталога в зависимости от числа товаров в категории. Реализовать подобное с учетом уже существующей реализации не проблематично, достаточно будет добавить кнопки и дополнительные события, а старые события убрать. В самом шаблоне "Товары" останется только заменить строку

<img src="{goods.images.LARGE}" alt="{goods.images.NAME}" />

на

<img src="{goods.images.IMAGE_SMALL}" alt="{goods.images.NAME}" />

Как выполните данное изменение - сообщите.

[borisovd]

А если все таки слайдер делать? просто фотографии минимального размера будут. Подскажи сделать слайдером это.

[borisovd]

Если получиться сделать вот это http://forum.storela..._20#entry104158 но слайдер фотографий отпадает.

[Сake]

Именно об этой реализации я и писал вам ранее. Для начала вам необходимо удалить код из файла main.js по активной реализации

$(function() {
$('.prd-image a img').live('mouseenter', function () {
		 $(this).data('hover', true).parent().removeAttr('title');
		 setTimeout($.proxy(function() {
				var goods_images_list = $(this).closest('.prd-image').find('.goods_images_list');
var offset = goods_images_list.width() + goods_images_list.children('div').width()
				  + goods_images_list.offset().left;
if($(window).width() < offset) {
  goods_images_list.addClass('view-right');
}
				 var size = goods_images_list.find('img').size();
				 if(size && $(this).data('hover')) {
						 goods_images_list.find('div:eq(0)').show();
						 if(size > 1) {
								 goods_images_list.data('interval', setInterval($.proxy(function() {
										 var next = $(this).find('div:visible').next();
										 if(!next.length) {
												 next = $(this).find('div:eq(0)');
										 }
										 $(this).find('div').hide();
										 next.show();
								 }, goods_images_list), 1500));
						 }
				 }
		 }, this), 500);
});
$('.prd-image a img').live('mouseleave', function () {
		 var goods_images_list = $(this).closest('.prd-image').find('.goods_images_list');
		 goods_images_list.find('div').hide();
		 $(this).removeData('hover');
		 if(goods_images_list.data('interval')) {
				 clearInterval(goods_images_list.data('interval'));
				 goods_images_list.removeData('interval');
		 }
});
});

так как данный код попросту мешает при отладке. Как удалите данный код - сообщите.

[borisovd]

удалил код

Сake (23 Ноябрь 2013 - 01:14) писал:

Именно об этой реализации я и писал вам ранее. Для начала вам необходимо удалить код из файла main.js по активной реализации

$(function() {
$('.prd-image a img').live('mouseenter', function () {
		 $(this).data('hover', true).parent().removeAttr('title');
		 setTimeout($.proxy(function() {
			 var goods_images_list = $(this).closest('.prd-image').find('.goods_images_list');
var offset = goods_images_list.width() + goods_images_list.children('div').width()
				 + goods_images_list.offset().left;
if($(window).width() < offset) {
goods_images_list.addClass('view-right');
}
				 var size = goods_images_list.find('img').size();
				 if(size && $(this).data('hover')) {
						 goods_images_list.find('div:eq(0)').show();
						 if(size > 1) {
								 goods_images_list.data('interval', setInterval($.proxy(function() {
										 var next = $(this).find('div:visible').next();
										 if(!next.length) {
												 next = $(this).find('div:eq(0)');
										 }
										 $(this).find('div').hide();
										 next.show();
								 }, goods_images_list), 1500));
						 }
				 }
		 }, this), 500);
});
$('.prd-image a img').live('mouseleave', function () {
		 var goods_images_list = $(this).closest('.prd-image').find('.goods_images_list');
		 goods_images_list.find('div').hide();
		 $(this).removeData('hover');
		 if(goods_images_list.data('interval')) {
				 clearInterval(goods_images_list.data('interval'));
				 goods_images_list.removeData('interval');
		 }
});
});

так как данный код попросту мешает при отладке. Как удалите данный код - сообщите.

Удалил. что дальше?

[Сake]

Далее найдите в файле стилей main.css

.goodsListItemImage {
	height: 100px;
	margin-top: 1em;
}

и замените на

.goodsListItemImage {
	height: 150px;
	margin-top: 1em;
	overflow: hidden;
	position: relative;
}

далее добавьте

.goodsListItemBlockSlidePrev,
.goodsListItemBlockSlideNext {
  background: #FFFFFF;
  border: 1px solid;
  border-radius: 0 20px 20px 0;
  content: "12";
  cursor: pointer;
  font-size: 20px;
  font-weight: bold;
  height: 40px;
  left: 0;
  line-height: 40px;
  margin-top: -20px;
  padding-left: 2px;
  position: absolute;
  text-align: left;
  top: 50%;
  width: 24px;
  display: none;
}
.goodsListItemBlockSlideNext {
	border-radius: 20px 0 0 20px;
	left: inherit;
	right: 0;
}
.goodsListItemImage:hover .goodsListItemBlockSlidePrev,
.goodsListItemImage:hover .goodsListItemBlockSlideNext {
	display: block;
}

далее в шаблоне "Товары" найдите и удалите множественные переносы

<br><br><br><br>

после в файл main.js добавьте

function goodsListItemBlockSlide() {
  $('.goodsListItemBlock .goodsListItemImage:not(.slide)').each(function() {
	 var image = $(this).find('.goods_images_list > div:eq(0)')
	 .addClass('active').find('img').attr('src');
	 $(this).find('.prd-image > a img').attr('src', image);
	 $(this).addClass('slide')
	 .append($('<div class="goodsListItemBlockSlidePrev">').html('&#9668;')
	 .click(function() {
	   var active = $(this).parent().find('.goods_images_list > div.active').removeClass('active');
	   if(active.prev().length) {
		 var slide = active.prev().addClass('active').find('img');
		 $(this).parent().find('.prd-image > a img').attr('src', slide.attr('src'));
	   }
	   else {
		 var slide = $(this).parent().find('.goods_images_list > div:last').addClass('active').find('img');
		 $(this).parent().find('.prd-image > a img').attr('src', slide.attr('src'));
	   }
	 }))
	 .append($('<div class="goodsListItemBlockSlideNext">').html('&#9658;')
	 .click(function() {
	   var active = $(this).parent().find('.goods_images_list > div.active').removeClass('active');
	   if(active.next().length) {
		 var slide = active.next().addClass('active').find('img');
		 $(this).parent().find('.prd-image > a img').attr('src', slide.attr('src'));
	   }
	   else {
		 var slide = $(this).parent().find('.goods_images_list > div:first').addClass('active').find('img');
		 $(this).parent().find('.prd-image > a img').attr('src', slide.attr('src'));
	   }
	 }));
  });
}
$(function() {
  if($('.goodsListItemBlock .goods_images_list img').length) {
	 goodsListItemBlockSlide();
  }
});

[borisovd]

Все супер!) Спасибо вам огромное!)

[borisovd]

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

document.body.onmousedown = function() {return false};

но не помогло...

[borisovd]

и еще проблема что при нажатие на кнопку показать еще, то перестает раьотать функция на другой станнице

[Сake]

Добавьте в файл стилей main.css

.goodsListItemBlockSlideNext::selection {
  background: transparent;
}
.goodsListItemBlockSlideNext::-moz-selection {
  background: transparent;
}

далее в файле main.js найдите

$(nav).html($(html).find(nav).first().html());

и замените на

$(nav).html($(html).find(nav).first().html());
goodsListItemBlockSlide();

[borisovd]

Все супер, только все равно выделяет уже по краям) если можно это убрать будет замечательно

[Сake]

Совсем забыл по левую стрелку. Добавьте в файл стилей дополнительный класс

.goodsListItemBlockSlidePrev::selection {
  background: transparent;
}
.goodsListItemBlockSlidePrev::-moz-selection {
  background: transparent;
}

[borisovd]

а вертикальные полосы по краям можно тоже убрать? а то их выделяет и не очень смотрится(

[Сake]

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

[borisovd]

Вот эти полосы

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

• 

[Koderhan]

borisovd (28 Ноябрь 2013 - 11:15) писал:

Вот эти полосы

Панель администратора, "Сайт"->"Редактор шаблонов".
В файле "main.css".
Найти код:

.prd-image {
position: relative;
}

Заменить:

.prd-image {
position: relative;
background: white;
}