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


Публикации Сake

1000 публикаций создано Сake (учитываются публикации только с 08-Июль 23)


По типу контента

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


Сортировать                 Порядок  

#117615 Увеличение Фото В Каталоге При Наведении

Отправлено от Сake в 25 Январь 2014 - 02:36 в Каталог товаров

При поверхностном тестировании ошибок обнаружить не удалось, но сейчас на вашем сайте действительно наблюдается проблема, которая проявляется не всегда а лишь с какой-то периодичностью - изображение не пропадает при отводе курсора. Данная проблема по всей вероятности возникает из-за ошибки отработки  удаления интервала. В данном случае можно еще попробовать заменить код на

$(function() {
$('.goods_images_list').mouseleave(function(event) {
		 $('.goods_images_list').removeClass('active').find('div').hide();
		 window.prd_hover = false;
		 clearInterval(window.prd_interval);
});
$('.prd-image a img').hover(function() {
		 $('.goods_images_list div').hide();
		 clearInterval(window.prd_interval);
		 window.prd_hover = this;
		 $(this).parent().removeAttr('title');
		 setTimeout($.proxy(function() {
				 var goods_images_list = $(this).closest('.prd-image').find('.goods_images_list');
				 var size = goods_images_list.addClass('active').find('img').size();
				 if(size && window.prd_hover === this) {
					 goods_images_list.find('div:eq(0)').show();
					 if(size > 1) {
						 window.prd_interval = setInterval($.proxy(function() {
					 if(!$(this).hasClass('active')) {
					 $('.goods_images_list').removeClass('active')
					 .find('div').hide();
						 window.prd_hover = false;
						 clearInterval(window.prd_interval);
					 return(false);
				 }
					 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), 1800);
			 }
			 }
	 }, this), 500);
}, function(event) {
	  if(this === event.target) return;
	  $('.goods_images_list').removeClass('active').find('div').hide();
	  window.prd_hover = false;
	  clearInterval(window.prd_interval);
});
});

Если этот вариант все же не поможет - попробуем изменить увеличение изображения на клик.


#107114 Увеличение Фото В Каталоге При Наведении

Отправлено от Сake в 28 Ноябрь 2013 - 23:48 в Каталог товаров

Измените значения свойств top и left в классе .goods_images_list > div изначально класс выглядит так 

.goods_images_list > div {
		display: none;
		position: absolute;
		z-index: 100;
		background: #FFFFFF;
		border: 3px solid #CCCCCC;
		border-radius: 4px;
		left: 118px;
		padding: 2px;
		top: 11px;
		max-height: 359px;
		max-width: 512px;
}

на данный момент у вас задано так 

.goods_images_list > div {
  background: none repeat scroll 0 0 #FFFFFF;
  border: 3px solid #CCCCCC;
  border-radius: 4px;
  display: none;
  left: -100px;
  max-height: 500px;
  max-width: 512px;
  padding: 2px;
  position: absolute;
  top: -160px;
  z-index: 100;
}

проблема возникает из-за того что положение мыши находится на всплывающем окне при его появлении, тем самым автоматически скрывая его.


#106849 Увеличение Фото В Каталоге При Наведении

Отправлено от Сake в 28 Ноябрь 2013 - 05:46 в Каталог товаров

Цитата

IE - по-прежнему с наложением (фото правого товара из каталога поверх увеличноного фото)

Пожалуйста, сообщите версию вашего браузера IE.

Цитата

И ещё, как сделать, чтоб изображение всплывало быстрее?

В вставленном коде javascript найдите 

}, this), 2000);

значение 2000 это 2 секунды через которые и отобразиться изображение. Уменьшите это значение. В строке 

}, goods_images_list), 3000));

3000 это 3 секунды после которых изображение смениться на другое.


#117394 Увеличение Фото В Каталоге При Наведении

Отправлено от Сake в 24 Январь 2014 - 01:23 в Каталог товаров

Попробуйте теперь добавить в ваш файл main.js следующий код

$(function() {
   $('.goods_images_list').mouseleave(function(event) {
		$('.goods_images_list div').hide();
		window.prd_hover = false;
		clearInterval(window.prd_interval);
   });
   $('.prd-image a img').hover(function() {
				 $('.goods_images_list div').hide();
				 clearInterval(window.prd_interval);
				 window.prd_hover = this;
				 $(this).parent().removeAttr('title');
				 setTimeout($.proxy(function() {
								var goods_images_list = $(this).closest('.prd-image').find('.goods_images_list');
								var size = goods_images_list.find('img').size();
								if(size && window.prd_hover === this) {
								   goods_images_list.find('div:eq(0)').show();
								   if(size > 1) {
												  window.prd_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), 1800);
								   }
								}
				 }, this), 500);
   }, function(event) {
				 if(this === event.target) return;
				 $('.goods_images_list div').hide();
				 window.prd_hover = false;
				 clearInterval(window.prd_interval);
   });
});


#117177 Увеличение Фото В Каталоге При Наведении

Отправлено от Сake в 23 Январь 2014 - 02:15 в Каталог товаров

Так как у вас на данный момент код из сообщения http://forum.storela..._80#entry108767 так и не заменен - попробуйте удалить временно данную реализацию, в плане удалите в файле main.js следующий код

$(function() {
   $('.prd-image a img').hover(function() {
		 window.prd_hover = this;
		 $(this).parent().removeAttr('title');
		 setTimeout($.proxy(function() {
				var goods_images_list = $(this).closest('.prd-image').find('.goods_images_list');
				var size = goods_images_list.find('img').size();
				if(size && window.prd_hover === this) {
				   goods_images_list.find('div:eq(0)').show();
				   if(size > 1) {
						  window.prd_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), 1800);
				   }
				}
		 }, this), 500);
   }, function() {
		 $('.goods_images_list div').hide();
		 window.prd_hover = false;
		 clearInterval(window.prd_interval);
   });
});

Это необходимо сделать для того чтобы протестировать новый код (ранее сообщенный). Если этого не сделать будет конфликт, и корректно провести тестирование не получиться.


#108490 Увеличение Фото В Каталоге При Наведении

Отправлено от Сake в 05 Декабрь 2013 - 02:38 в Каталог товаров

Вы пробовали очистить кэш в проверяемых вами браузерах? Описываемую вами проблему выявить не удалось. Относительно изображений: все изображения ограничиваются размером заданном в файле стилей main.css

.goods_images_list img {
  max-height: 412px;
  max-width: 412px;
  width: 412px;
}

а так же в общем ограничении блока 

.goods_images_list > div {
  background: none repeat scroll 0 0 #FFFFFF;
  border: 3px solid #CCCCCC;
  border-radius: 4px;
  display: none;
  left: 170px;
  max-height: 412px;
  max-width: 412px;
  overflow: hidden;
  padding: 2px;
  position: absolute;
  top: -190px;
  z-index: 100;
}

в данном случае можно попробовать покрутить размеры выставленные в свойствах max-height, max-width, width чтобы допиться желаемого результата в отображении. Так же можно попробовать убрать одно из ограничений например max-height или max-width тогда изображение будет подгоняться пропорционально в зависимости от высоты или ширины изображения.


#109751 Увеличение Фото В Каталоге При Наведении

Отправлено от Сake в 11 Декабрь 2013 - 02:28 в Каталог товаров

Проблема наблюдалась во всех браузерах или же в каком-то одном? Пробовали очистить кэш в браузере? При тестировании кода проблем обнаружено не было по крайне мере в firefox. Посоветовал бы вам создать дополнительный тестовый магазин и перенести туда дизайн и немного товаров. Тестового периода вам должно хватить для отладки и корректировки вашего дизайна и функционала в целом. После этого можно будет не опоясаться за покупателей.


#124363 Увеличение Фото В Каталоге При Наведении

Отправлено от Сake в 01 Март 2014 - 01:37 в Каталог товаров

В данном случае проблема уже связана исключительно с стилями. Необходимо их немного изменить. Найдите в вашем файле стилей main.css

.prd-image {
   position: relative;
}
.goods_images_list > div {
   background: #FFFFFF;
   border: 3px solid #CCCCCC;
   border-radius: 4px;
   display: none;
   left: 170px;
   max-height: 412px;
   max-width: 412px;
   overflow: hidden;
   padding: 2px;
   position: absolute;
   top: -190px;
   z-index: 100;
}
.goods_images_list img {
   max-height: 412px;
   max-width: 412px;
   width: 412px;
}

и замените на

.prd-image {
   position: relative;
}
.goods_images_list > div {
   background: #FFFFFF;
   border: 3px solid #CCCCCC;
   border-radius: 4px;
   display: none;
   left: 170px;
   max-height: 412px;
   max-width: 412px;
   overflow: hidden;
   padding: 2px;
   position: absolute;
   top: 0;
   z-index: 100;
}
.goods_images_list img {
   max-height: 412px !important;
   max-width: 412px !important;
}

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

#hr {
  clear: both;
}
#content .goodsListBlock .goodlist,
#content .goodlist .goodlistmain {
  overflow: visible;
}

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


#118153 Увеличение Фото В Каталоге При Наведении

Отправлено от Сake в 28 Январь 2014 - 05:10 в Каталог товаров

Для реализации подобного механизма необходимо время. Пожалуйста, подождите. Так как ваши сообщения пришлись на выходные - ответить на ваше сообщение не было возможности. В данный момент вам необходимо удалить добавленный код из файла main.js, это необходимо для тестирования реализуемого кода. Пожалуйста, отпишитесь в данной теме как удалите код из файла main.js


#123997 Увеличение Фото В Каталоге При Наведении

Отправлено от Сake в 27 Февраль 2014 - 02:05 в Каталог товаров

В вашем шаблоне "Товары" для отображения товаров в виде списка - ссылка на изображение немного визуально изменена. Найдите в шаблоне "Товары"

<a href="{goods.URL}">
				<img {% IF goods.IMAGE_EMPTY %}src="{ASSETS_IMAGES_PATH}no-photo-medium.png" width="220"{% ELSE %}src="{goods.IMAGE_SMALL}"{% ENDIF %} alt="{goods.NAME}" />   
			  </a>

и замените на

<div class="prd-image">
<a href="{goods.URL}"><img {% IF goods.IMAGE_EMPTY %}src="{ASSETS_IMAGES_PATH}no-photo-medium.png" width="220"{% ELSE %}src="{goods.IMAGE_SMALL}"{% ENDIF %} alt="{goods.NAME}" /></a>
<div class="goods_images_list">
{% FOR images %}
<div style="display: none;"><img src="{goods.images.LARGE}" alt="{goods.images.NAME}" /></div>
{% ENDFOR %}
</div>
</div>


#124189 Увеличение Фото В Каталоге При Наведении

Отправлено от Сake в 28 Февраль 2014 - 00:57 в Каталог товаров

В шаблоне "Товары" необходимо найти

<a href="{goods.URL}"><img src="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-other.png{% ELSE %}{goods.IMAGE_OTHER}{% ENDIF %}" alt="{goods.NAME}" /></a>

и заменить на

<div class="prd-image">
  <a href="{goods.URL}"><img src="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-other.png{% ELSE %}{goods.IMAGE_OTHER}{% ENDIF %}" alt="{goods.NAME}" /></a>
<div class="goods_images_list">
{% FOR images %}
  <div style="display: none;"><img src="{goods.images.LARGE}" alt="{goods.images.NAME}" /></div>
{% ENDFOR %}
</div>
</div>

далее найти

<a href="{goods.URL}">
								<img {% IF goods.IMAGE_EMPTY %}src="{ASSETS_IMAGES_PATH}no-photo-medium.png" width="220"{% ELSE %}src="{goods.IMAGE_SMALL}"{% ENDIF %} alt="{goods.NAME}" />  
						  </a>

и заменить на

<div class="prd-image">
<a href="{goods.URL}"><img {% IF goods.IMAGE_EMPTY %}src="{ASSETS_IMAGES_PATH}no-photo-medium.png" width="220"{% ELSE %}src="{goods.IMAGE_SMALL}"{% ENDIF %} alt="{goods.NAME}" /></a>
<div class="goods_images_list">
{% FOR images %}
<div style="display: none;"><img src="{goods.images.LARGE}" alt="{goods.images.NAME}" /></div>
{% ENDFOR %}
</div>
</div>

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

.prd-image {
   position: relative;
}
.goods_images_list > div {
   background: #FFFFFF;
   border: 3px solid #CCCCCC;
   border-radius: 4px;
   display: none;
   left: 170px;
   max-height: 412px;
   max-width: 412px;
   overflow: hidden;
   padding: 2px;
   position: absolute;
   top: -190px;
   z-index: 100;
}
.goods_images_list img {
   max-height: 412px;
   max-width: 412px;
   width: 412px;
}

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

$(function() {
  $('.goods_images_list').click(function() {
				$('.goods_images_list').removeClass('active').find('div').hide();
				clearInterval(window.prd_interval);
				window.prd_click = null;
  });
  $('.prd-image a').click(function() {
				$('.goods_images_list').removeClass('active').find('div').hide();
				clearInterval(window.prd_interval);
				if(window.prd_click !== this) {
				  window.prd_click = this;
				  $(this).removeAttr('title');
				  var goods_images_list = $(this).closest('.prd-image').find('.goods_images_list');
				  var size = goods_images_list.addClass('active').find('img').size();
				  if(size) {
								goods_images_list.find('div:eq(0)').show();
								if(size > 1) {
								  window.prd_interval = setInterval($.proxy(function() {
												if(!$(this).hasClass('active')) {
												  $('.goods_images_list').removeClass('active')
																.find('div').hide();
																window.prd_click = false;
																clearInterval(window.prd_interval);
																return(false);
												}
												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), 1800);
								}
				  }
				}
				return(false);
  });
});


#118431 Увеличение Фото В Каталоге При Наведении

Отправлено от Сake в 29 Январь 2014 - 03:43 в Каталог товаров

Попробуйте использовать следующий код

$(function() {
  $('.goods_images_list').click(function() {
	$('.goods_images_list').removeClass('active').find('div').hide();
	clearInterval(window.prd_interval);
	window.prd_click = null;
  });
  $('.prd-image a').click(function() {
	$('.goods_images_list').removeClass('active').find('div').hide();
	clearInterval(window.prd_interval);
	if(window.prd_click !== this) {
	  window.prd_click = this;
	  $(this).removeAttr('title');
	  var goods_images_list = $(this).closest('.prd-image').find('.goods_images_list');
	  var size = goods_images_list.addClass('active').find('img').size();
	  if(size) {
		goods_images_list.find('div:eq(0)').show();
		if(size > 1) {
		  window.prd_interval = setInterval($.proxy(function() {
			if(!$(this).hasClass('active')) {
			  $('.goods_images_list').removeClass('active')
				.find('div').hide();
				window.prd_click = false;
				clearInterval(window.prd_interval);
				return(false);
			}
			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), 1800);
		}
	  }
	}
	return(false);
  });
});

увеличение изображения происходит по клику на область изображения. Если необходимо заменить событие клика (на иконку лупы), то добавьте такую иконку в виде изображения в ваш шаблон "Товары" после строки

<div class="prd-image">

например

<div class="zoom-ico"></div>

после в main.js необходимо будет только заменить строку

$('.prd-image a').click

на

$('.prd-image .zoom-ico').click

Саму же иконку можете простилизовать как вам удобнее. Добавьте класс в main.css вида

.zoom-ico {
  background: url({ASSETS_IMAGES_PATH}zoom-ico.png) no-repeat center center;
  width: 24px;
  height: 24px;
}


#122206 Увеличение Фото В Каталоге При Наведении

Отправлено от Сake в 18 Февраль 2014 - 01:17 в Страница товара

Подобный вопрос ранее рассматривался в следующей теме форума http://forum.storela...ора/#entry32048 данная инструкция подойдет и для вашего шаблона. Дублировать инструкцию в данном случае смысла нет. Если у вас что-то не получиться, то вы можете уже в данной теме задать вопрос.


#122521 Увеличение Фото В Каталоге При Наведении

Отправлено от Сake в 19 Февраль 2014 - 02:40 в Страница товара

Параметры окна увеличения изображения задаются в теге

rel="position: 'right', adjustX: 8, adjustY: 0, zoomWidth:500"

Доступны и другие дополнительные опции

zoomWidth: 'auto',
zoomHeight: 'auto',
position: 'right',
tint: false,
tintOpacity: 0.5,
lensOpacity: 0.5,
softFocus: false,
smoothMove: 3,
showTitle: true,
titleOpacity: 0.5,
adjustX: 0,
adjustY: 0

Цитата

Как удалить "увеличить изображение" которая находится под фотографией (на скринах видно)

Найдите и удалите в шаблоне "Товар" следующий код

<!-- Ссылка на увеличение среднего изображения товара до большого. Появляется если у товара указано изображение -->
{% IFNOT GOODS_IMAGE_EMPTY %}
   <div class="goodsDataMainImageZoom">
	   <a href="{GOODS_IMAGE_LARGE}" target="_blank">Увеличить изображение</a>
   </div>
{% ENDIF %}


#122737 Увеличение Фото В Каталоге При Наведении

Отправлено от Сake в 20 Февраль 2014 - 04:18 в Страница товара

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

position: 'right',

где можно задать вместо right значение bottom


#123528 Увеличение Фото В Каталоге При Наведении

Отправлено от Сake в 25 Февраль 2014 - 03:35 в Каталог товаров

Аналогично. В шаблоне "Товары" найдите строку

<a href="{goods.URL}"><img src="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-other.png{% ELSE %}{goods.IMAGE_OTHER}{% ENDIF %}" alt="{goods.NAME}" /></a>

и замените её на

<div class="prd-image">
  <a href="{goods.URL}"><img src="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-other.png{% ELSE %}{goods.IMAGE_OTHER}{% ENDIF %}" alt="{goods.NAME}" /></a>
<div class="goods_images_list">
{% FOR images %}
  <div style="display: none;"><img src="{goods.images.LARGE}" alt="{goods.images.NAME}" /></div>
{% ENDFOR %}
</div>
</div>

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

.prd-image {
   position: relative;
}

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

$(function() {
  $('.goods_images_list').click(function() {
		$('.goods_images_list').removeClass('active').find('div').hide();
		clearInterval(window.prd_interval);
		window.prd_click = null;
  });
  $('.prd-image a').click(function() {
		$('.goods_images_list').removeClass('active').find('div').hide();
		clearInterval(window.prd_interval);
		if(window.prd_click !== this) {
		  window.prd_click = this;
		  $(this).removeAttr('title');
		  var goods_images_list = $(this).closest('.prd-image').find('.goods_images_list');
		  var size = goods_images_list.addClass('active').find('img').size();
		  if(size) {
				goods_images_list.find('div:eq(0)').show();
				if(size > 1) {
				  window.prd_interval = setInterval($.proxy(function() {
						if(!$(this).hasClass('active')) {
						  $('.goods_images_list').removeClass('active')
								.find('div').hide();
								window.prd_click = false;
								clearInterval(window.prd_interval);
								return(false);
						}
						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), 1800);
				}
		  }
		}
		return(false);
  });
});


#123717 Увеличение Фото В Каталоге При Наведении

Отправлено от Сake в 26 Февраль 2014 - 01:16 в Каталог товаров

В ваш файл стилей main.css необходимо еще добавить (стили визуального отображения изображения)

.goods_images_list > div {
background: #FFFFFF;
border: 3px solid #CCCCCC;
border-radius: 4px;
display: none;
left: 170px;
max-height: 412px;
max-width: 412px;
overflow: hidden;
padding: 2px;
position: absolute;
top: -190px;
z-index: 100;
}
.goods_images_list img {
max-height: 412px;
max-width: 412px;
width: 412px;
}

Так же обратите внимание на то, что изменение вы сделали только для отображения товаров таблицей, а проверяете вероятно при списке. Для аналогичного изменения для списка найдите дубликат строки

<a href="{goods.URL}"><img src="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-other.png{% ELSE %}{goods.IMAGE_OTHER}{% ENDIF %}" alt="{goods.NAME}" /></a>

обычно таких строк в шаблоне две, и замените её так же на

<div class="prd-image">
<a href="{goods.URL}"><img src="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-other.png{% ELSE %}{goods.IMAGE_OTHER}{% ENDIF %}" alt="{goods.NAME}" /></a>
<div class="goods_images_list">
{% FOR images %}
<div style="display: none;"><img src="{goods.images.LARGE}" alt="{goods.images.NAME}" /></div>
{% ENDFOR %}
</div>
</div>

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


#107442 Увеличение Картинки При Наведении Курсора

Отправлено от Сake в 30 Ноябрь 2013 - 04:47 в Страница товара

Тег a2 не является ссылкой, так как он записан не правильно. Выполните изменение указанное модератором ранее http://forum.storela...160#entry107253


#117392 Увеличение Картинки При Наведении Курсора

Отправлено от Сake в 24 Январь 2014 - 00:26 в Страница товара

У вас в файле main.js присутствует нестандартный код для темы "Техника". Попробуйте сделать следующее - найдите код

// Изменение главного изображения товара при нажатии на миниатюру
  $('.goodsDataMainImages a').click(function(){
	/* Не будем менять главное изображение, юзеру врядли понравится что тут все меняется при его кликах
	// Путь к среднему изображению
	var MediumImageUrl = $(this).find('img').attr('rel'),
	   
		// Главное изображение, в которое будем вставлять новое изображение
		MainImage = $('.goodsDataMainImage img'),
	   
		// В этом объекте хранится идентификатор картинки главного изображения для коректной работы галереи изображений
		MainImageIdObject = $('.goodsDataMainImage input'),
	   
		// Получаем идентификатор этого изображения из соседнего input поля
		GoodsImageIconId = $(this).parent().find('input').val();
   
	// Изменяем главное изображение
	MainImage.attr('src', MediumImageUrl);
   
	// Изменяем идентификатор главного изображения
	MainImageIdObject.val(GoodsImageIconId);
	*/
	// Для иконки изображения запустим галерею 
	$(this).nyroModalManual();
	return false;
  });

и замените его на

// Главное товарное изображение
  $('.goodsDataMainImages a')
		// При наведении на маленькое изображение изменяем среднее
		.click(function(){
		  var
				// Путь к среднему изображению
				MediumImageUrl = $(this).find('img').attr('rel')
				// Объект в котором расположено среднее изображение товара
				,MainImageObj = $('div.goodsDataMainImage')
				// Главное изображение, в которое будем вставлять новое изображение
				,MainImageImg = MainImageObj.find('img')
				// Вариант главного изображения отображаемого через свойство background
				,MainImageBlockWithBg = MainImageObj.find('a div')
				// В этом объекте хранится идентификатор картинки главного изображения для коректной работы галереи изображений
				,MainImageIdObject = MainImageObj.find('input')
				// Получаем идентификатор этого изображения из соседнего input поля
				,GoodsImageIconId = $(this).parent().find('input').val()
		  ;
		  // Изменяем главное изображение
		  if(0 < MainImageImg.length) {
				MainImageImg.attr('src', MediumImageUrl);
		  } else {
				MainImageBlockWithBg.css({'background': 'url("' + MediumImageUrl + '") no-repeat center center', 'background-size' : 'contain'});
		  }
		  // Изменяем идентификатор главного изображения
		  MainImageIdObject.val(GoodsImageIconId);
   return(false);
		});


#117200 Увеличение Картинки При Наведении Курсора

Отправлено от Сake в 23 Январь 2014 - 06:30 в Страница товара

Найдите в файле main.js код

// В форме оформления заказа при клике на кнопку назад просто переходим на предыдущую страницу
  $('.order form input:submit[name="toprev"]').click(function(){
	var act = this.form.action;
	this.form.action = act + ( act.indexOf( '\?' ) > -1 ? '&' : '?' ) + 'toprev=1';
	this.form.submit();
	return false;
  });

и замените его на

// В форме оформления заказа при клике на кнопку назад просто переходим на предыдущую страницу
  $('.order form input:submit[name="toprev"]').click(function(){
	var act = this.form.action;
	this.form.action = act + ( act.indexOf( '\?' ) > -1 ? '&' : '?' ) + 'toprev=1';
	this.form.submit();
	return false;
  });
 
  // Настройки галереи изображений
  $.nyroModalSettings({
	// из всех элементов с атрибут rel="gallery" будем создавать галерею
	gallery: 'gallery',
	// Включаем прокрутку с последнего изображения на первое
	galleryLoop: true
  });
  
  // Увеличение изображение при клике на него и открытие галереи изображений
  $('.goodsDataMainImage a').click(function(){
	   
		// Идентификатор главной картинки
	var goodsImageId = $('.goodsDataMainImage input').val(),
	   
		// Маленькое изображение, по которому на самом деле будем кликать
		goodsImageIconElement = $('.goodsDataMainImages input[value="'+goodsImageId+'"]').parent().find('a');
	// Для иконки изображения запустим галерею 
	goodsImageIconElement.nyroModalManual();
	return false;
  });

далее найдите

// Главное товарное изображение
  $('.goodsDataMainImages a')
	// При наведении на маленькое изображение изменяем среднее
	.mouseover(function(){
	  var
		// Путь к среднему изображению
		MediumImageUrl = $(this).find('img').attr('rel')
		// Объект в котором расположено среднее изображение товара
		,MainImageObj = $('div.goodsDataMainImage')
		// Главное изображение, в которое будем вставлять новое изображение
		,MainImageImg = MainImageObj.find('img')
		// Вариант главного изображения отображаемого через свойство background
		,MainImageBlockWithBg = MainImageObj.find('a div')
		// В этом объекте хранится идентификатор картинки главного изображения для коректной работы галереи изображений
		,MainImageIdObject = MainImageObj.find('input')
		// Получаем идентификатор этого изображения из соседнего input поля
		,GoodsImageIconId = $(this).parent().find('input').val()
	  ;
	  // Изменяем главное изображение
	  if(0 < MainImageImg.length) {
		MainImageImg.attr('src', MediumImageUrl);
	  } else {
		MainImageBlockWithBg.css({'background': 'url("' + MediumImageUrl + '") no-repeat center center', 'background-size' : 'contain'});
	  }
	  // Изменяем идентификатор главного изображения
	  MainImageIdObject.val(GoodsImageIconId);
	})
	// Изменение главного изображения товара при нажатии на миниатюру
	.click(function(){
	  // Для иконки изображения запустим галерею
	  $(this).nyroModalManual();
	  return false;
	});

и замените на

// Главное товарное изображение
  $('.goodsDataMainImages a')
	// При наведении на маленькое изображение изменяем среднее
	.click(function(){
	  var
		// Путь к среднему изображению
		MediumImageUrl = $(this).find('img').attr('rel')
		// Объект в котором расположено среднее изображение товара
		,MainImageObj = $('div.goodsDataMainImage')
		// Главное изображение, в которое будем вставлять новое изображение
		,MainImageImg = MainImageObj.find('img')
		// Вариант главного изображения отображаемого через свойство background
		,MainImageBlockWithBg = MainImageObj.find('a div')
		// В этом объекте хранится идентификатор картинки главного изображения для коректной работы галереи изображений
		,MainImageIdObject = MainImageObj.find('input')
		// Получаем идентификатор этого изображения из соседнего input поля
		,GoodsImageIconId = $(this).parent().find('input').val()
	  ;
	  // Изменяем главное изображение
	  if(0 < MainImageImg.length) {
		MainImageImg.attr('src', MediumImageUrl);
	  } else {
		MainImageBlockWithBg.css({'background': 'url("' + MediumImageUrl + '") no-repeat center center', 'background-size' : 'contain'});
	  }
	  // Изменяем идентификатор главного изображения
	  MainImageIdObject.val(GoodsImageIconId);
   return(false);
	});


#106506 Увеличение Картинки При Наведении Курсора

Отправлено от Сake в 27 Ноябрь 2013 - 03:59 в Страница товара

Добавьте в файл main.js код

$(function() {
  setTimeout(function() {
				$(document).on('click', '#left-column .mousetrap', function() {
								var link = $(this).parent().children('a').clone();
								$('<body>').append(link.hide().fancybox({
												'onClosed': $.proxy(function() {
																$(this).remove();
												}, link)
								}).click());
				});
  }, 800);
});


#145673 Увеличение Картинки При Наведении Курсора

Отправлено от Сake в 02 Июль 2014 - 06:09 в Страница товара

Добавьте в конец вашего файла main.js следующий код

$(function() {
  // Увеличение изображение при клике на него и открытие галереи изображений
  $('.goodsDataMainImage').live('click', function(){
   
		// Идентификатор главной картинки
	var goodsImageId = $('.goodsDataMainImage input').val();
	   
		// Маленькое изображение, по которому на самом деле будем кликать
	var goodsImageIconElement = $('.goodsDataMainImages input[value="'+goodsImageId+'"]').parent().find('a');
	// Для иконки изображения запустим галерею 
	goodsImageIconElement.nyroModalManual();
	return false;
  });
});


#117612 Увеличение Картинки При Наведении Курсора

Отправлено от Сake в 25 Январь 2014 - 01:54 в Страница товара

Просмотр сообщенияdemon408 (24 Январь 2014 - 11:42) писал:

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

Прикрепленный файл Безымянный.png

Попробуйте в ваш файл стилей main.css добавить

.cloud-zoom img {
  margin: 0 auto;
}


#106203 Увеличение Картинки При Наведении Курсора

Отправлено от Сake в 26 Ноябрь 2013 - 03:52 в Страница товара

Вы можете использовать код

$(function() {
$('.htmlDataBlock a img').each(function(index) {
		 var link = $(this).parent('a');
		 if(!$(link).attr('rel')) {
			 $(link).attr('rel', 'gallery' + index);
		 }
		 $(link).click(function() {
			 $(this).nyroModalManual({
					 resizable: true,
					 autoSizable: true
			 });
			 return(false);
		 });
});
});

данный код необходимо разместить в файле main.js В дополнении почитайте сообщение http://forum.storela...__20#entry94443


#155144 Увеличение Картинки При Наведении Курсора

Отправлено от Сake в 26 Август 2014 - 23:27 в Страница товара

Добавьте в конец вашего файла main.js следующий код

$(function() {
  $('a[rel="gallery"], .zooming').fancybox();
});

Обратите внимание на то, что все ваши изображения в таблице должны иметь вид

<a target="_blank" rel="gallery" href="Адрес большого изображения">
  <img src="Адрес маленького изображения" alt="">
</a>

т.е изображение (тег <img>) должно быть обвернуто в ссылку (тег <a>) с атрибутом rel="gallery" или классом zooming

<a target="_blank" class="zooming"  href="Адрес большого изображения">
  <img src="Адрес маленького изображения" alt="">
</a>



  1. Форум владельцев интернет-магазинов
  2. → Публикации Сake
  3. Privacy Policy