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


Эффект Лупы

Автор Agaron, 27 июня 2013 15:10

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

#1 Agaron

Agaron

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

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

Отправлено 27 Июнь 2013 - 15:10

Возможно ли сделать эффект лупы? видел решения для шаблона мокко. для данного шаблона не могу сделать. помогите пожалуйста!

#2 Rekbes

Rekbes

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

  • Заблокированные
  • PipPipPip
  • 131 сообщений
  • ГородNew York

Отправлено 27 Июнь 2013 - 15:14

В смысле  при наведении на фото товара? Тогда меня тоже интересует,если это возможно сделать.

#3 support 2.0

support 2.0

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

  • Модераторы
  • 4 950 сообщений

Отправлено 27 Июнь 2013 - 15:29

Просмотр сообщенияAgaron (27 Июнь 2013 - 15:10) писал:

Возможно ли сделать эффект лупы? видел решения для шаблона мокко. для данного шаблона не могу сделать. помогите пожалуйста!

Вам поможет эта тема форума

#4 Agaron

Agaron

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

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

Отправлено 27 Июнь 2013 - 17:30

не совсем помогла...дошел вот до этого момента
Открываем файл "Товар".
Найти код:
<a href="{GOODS_IMAGE_LARGE}" target="_blank" title="Увеличить {GOODS_NAME}"><img class="cornerAll withBorder goods-image-medium" src="{GOODS_IMAGE_MEDIUM}" alt="{GOODS_NAME}" /></a>
Вот этого куска нет. можете расписать этот момент?если несложно конечно!

#5 Koderhan

Koderhan

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

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

Отправлено 27 Июнь 2013 - 18:13

Попробуйте в файле "Товар" заменить код:
<a itemprop="image" href="{GOODS_IMAGE_LARGE}" target="_blank" title="Увеличить {GOODS_NAME}" class="thumbnail">
			  <div class="goods-image-medium product-image" style="background: url({GOODS_IMAGE_MEDIUM}) no-repeat center center; background-size: contain;"></div>
			</a>
На код:
<a itemprop="image" href="{GOODS_IMAGE_LARGE}" target="_blank" title="Увеличить {GOODS_NAME}" class="thumbnail" class="cloud-zoom" id='zoom1' rel="position: 'right', adjustX: 8, adjustY: 0, zoomWidth:250px">
			  <div class="goods-image-medium product-image" style="background: url({GOODS_IMAGE_MEDIUM}) no-repeat center center; background-size: contain;"></div>
			</a>

#6 Agaron

Agaron

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

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

Отправлено 27 Июнь 2013 - 19:22

мммм....к сожалению не помогает. очень полезная вещь. было бы отлично если бы расписали гайд как это сделать грамотно для данного шаблона)

#7 Сake

Сake

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

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

Отправлено 28 Июнь 2013 - 03:13

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

#8 Agaron

Agaron

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

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

Отправлено 28 Июнь 2013 - 19:25

мой аккаунт SL-193042
единственное что сделал это установил эти два скрипта и прописал html код. и все) а вот что дальше не знаю делать(

#9 Сake

Сake

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

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

Отправлено 29 Июнь 2013 - 02:36

У вас нет изменений в шаблоне "Товар", а именно изменений из сообщения выше http://forum.storela...упы/#entry76100

Пожалуйста, вставьте данные изменений.

#10 Agaron

Agaron

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

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

Отправлено 01 Июль 2013 - 08:22

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

#11 miyako

miyako

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

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

Отправлено 01 Июль 2013 - 08:40

Просмотр сообщенияAgaron (01 Июль 2013 - 08:22) писал:

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

Вы добавляли к товару основное изображение? Например у товара "Женская брендовая сумка OPPO" изображения не нашла.

#12 nadezda

nadezda

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

  • Пользователи
  • PipPipPip
  • 95 сообщений

Отправлено 03 Август 2013 - 19:33

У меня тот же вопрос не могу найти блок


<a href="{GOODS_IMAGE_LARGE}" target="_blank" title="Увеличить {GOODS_NAME}"><img class="cornerAll withBorder goods-image-medium" src="{GOODS_IMAGE_MEDIUM}" alt="{GOODS_NAME}" /></a>


Что делать, то что написано в теме выполнить не могу т.к. не могу найти эти блоки

#13 miyako

miyako

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

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

Отправлено 04 Август 2013 - 08:36

Просмотр сообщенияnadezda (03 Август 2013 - 19:33) писал:

У меня тот же вопрос не могу найти блок


<a href="{GOODS_IMAGE_LARGE}" target="_blank" title="Увеличить {GOODS_NAME}"><img class="cornerAll withBorder goods-image-medium" src="{GOODS_IMAGE_MEDIUM}" alt="{GOODS_NAME}" /></a>


Что делать, то что написано в теме выполнить не могу т.к. не могу найти эти блоки

Код нужно искать в шаблоне Товар - 
  <table class="goodsDataMain">
		<tr>
		  <td class="goodsDataMainImageBlock">
			<!-- Большое изображение -->
			<div class="goodsDataMainImage">
			  {% IF GOODS_IMAGE_EMPTY %}
				<img src="{ASSETS_IMAGES_PATH}no-photo-medium.png" alt="{GOODS_NAME}" title="Увеличить {GOODS_NAME}" />
			  {% ELSE %}
				<a itemprop="image" href="{GOODS_IMAGE_LARGE}" target="_blank" title="Увеличить {GOODS_NAME}"><img class="cornerAll withBorder goods-image-medium" src="{GOODS_IMAGE_MEDIUM}" alt="{GOODS_NAME}" /></a>
			  {% ENDIF %}
Замените строку - 
<a itemprop="image" href="{GOODS_IMAGE_LARGE}" target="_blank" title="Увеличить {GOODS_NAME}"><img class="cornerAll withBorder goods-image-medium" src="{GOODS_IMAGE_MEDIUM}" alt="{GOODS_NAME}" /></a>
на - 
<a itemprop="image" href="{GOODS_IMAGE_LARGE}" target="_blank" title="Увеличить {GOODS_NAME}" class="cloud-zoom" id='zoom1' rel="position: 'right', adjustX: 8, adjustY: 0, zoomWidth:250px">
<img class="cornerAll withBorder goods-image-medium" src="{GOODS_IMAGE_MEDIUM}" alt="{GOODS_NAME}" />
</a>

#14 Lamer

Lamer

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

  • Пользователи
  • PipPipPipPip
  • 248 сообщений

Отправлено 07 Апрель 2014 - 13:13

У меня нет таких кодов в шаблоне товар

#15 Castiel

Castiel

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

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

Отправлено 08 Апрель 2014 - 07:35

Просмотр сообщенияspytime (07 Апрель 2014 - 13:13) писал:

У меня нет таких кодов в шаблоне товар


Здравствуйте, уточните пожалуйста более детально что именно вы хотите сделать и что не получается.

#16 Lamer

Lamer

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

  • Пользователи
  • PipPipPipPip
  • 248 сообщений

Отправлено 08 Апрель 2014 - 07:49

У меня нет кодов не из 5 го, не из 13 го сообщения.

#17 Сake

Сake

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

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

Отправлено 09 Апрель 2014 - 02:37

Пожалуйста, уточните для какой темы оформления вы хотите реализовать подобный эффект? У вас в профиле задано 2 разных аккаунта, по данным аккаунтам доступны темы "Пластик" и "Вечность". Пожалуйста, в дальнейшем уточняйте к какому номеру аккаунта относиться тот или иной вопрос. Спасибо!

#18 Lamer

Lamer

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

  • Пользователи
  • PipPipPipPip
  • 248 сообщений

Отправлено 09 Апрель 2014 - 05:53

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

#19 yvn

yvn

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

  • Пользователи
  • PipPipPip
  • 94 сообщений

Отправлено 17 Июнь 2016 - 00:45

Здравствуйте, пытаюсь наладить лупу на страницу товара. Успел установить скрипты и сделать изменение в html.
Помогите продолжить. Шаблон Вечность.

#20 Ирина345

Ирина345

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

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

Отправлено 17 Июнь 2016 - 17:35

Просмотр сообщенияyvn (17 Июнь 2016 - 00:45) писал:

Здравствуйте, пытаюсь наладить лупу на страницу товара. Успел установить скрипты и сделать изменение в html.
Помогите продолжить. Шаблон Вечность.
Здравствуйте,
Найдите в шаблоне HTML
<!-- Подключение Js плагина -->
<script type="text/javascript" src="{ASSETS_JS_PATH}cloud-zoom.1.0.2.js"></script>
<!-- Подключение css файла плагина -->
<link rel="stylesheet" href="{ASSETS_STYLES_PATH}cloud-zoom.css" type="text/css" />
и удалите
найдите в шаблоне Товар код
<figure class="main-image" style="width:100%;float:none;margin-bottom: 20px;z-index:50">
		   <div>
				<table><tr>
				<td>
								 {% IFNOT goods_images_empty %}
								  {% FOR goods_images %}
												{% IF goods_images.first %}
																								  <ul class="preview_images" data-role="preview-images">
												{% ENDIF %}
																<li>
																  <a  rel="group" href="{goods_images.LARGE}" class="mini"><img src="{goods_images.LARGE}" alt="{goods_images.NAME}" class="mini"/></a>
																</li>
												
												{% IF goods_images.last %}
												  </ul>
												{% ENDIF %}					   
								  {% ENDFOR %}
								{% ENDIF %}
				 </td>
		  <td cosplan="2">
		  {% IF GOODS_IMAGE_EMPTY %}
						<img src="{ASSETS_IMAGES_PATH}no-photo-medium.png" alt="{GOODS_NAME}" />
				  {% ELSE %}			  
						<a  itemprop="image" rel="group" href="{GOODS_IMAGE_LARGE}"  class="main"><img src="{GOODS_IMAGE_LARGE}" alt="{GOODS_NAME}"  class="main"/></a>
				  {% ENDIF %}
		</td><td></td>
		   </tr></table>
				  </div></figure>
замените на
	 
<figure class="main-image" style="width:100%;float:none;margin-bottom: 20px;z-index:50">
		   <div>
				<table><tr>
				<td>
								 {% IFNOT goods_images_empty %}
								  {% FOR goods_images %}
												{% IF goods_images.first %}
																								  <ul class="preview_images" data-role="preview-images">
												{% ENDIF %}
																<li>
																  <a   href="{goods_images.LARGE}" data="{goods_images.MEDIUM}" class="cloud-zoom-gallery mini" rel="useZoom: 'zoom1', smallImage: '{goods_images.MEDIUM}' "><img src="{goods_images.MEDIUM}" alt="{goods_images.NAME}" class="mini"/></a>
																</li>
												
												{% IF goods_images.last %}
												  </ul>
												{% ENDIF %}					   
								  {% ENDFOR %}
								{% ENDIF %}
				 </td>
			   
		  <td cosplan="2">
		   
		  {% IF GOODS_IMAGE_EMPTY %}
						<img src="{ASSETS_IMAGES_PATH}no-photo-medium.png" alt="{GOODS_NAME}" />
				  {% ELSE %}			  
						<a  itemprop="image" href="{GOODS_IMAGE_LARGE}"  class="cloud-zoom main" id="zoom1" rel="position: 'inside', showTitle: false, adjustX:-4, adjustY:-4" style="position: relative; display: block;" >
						  <img src="{GOODS_IMAGE_MEDIUM}" alt="{GOODS_NAME}"  class="goods-image-medium main"/></a>
				  {% ENDIF %}
		</td><td></td>
		   </tr></table>
				  </div></figure>

далее найдите в файле main.js
//Увеличение изображения товара
$(document).ready(function() {
$("a[rel=group]").fancybox({
  'transitionIn'  : 'none',
  'transitionOut'  : 'none',
  'titlePosition'  : 'over',
  'titleFormat'  : function(title, currentArray, currentIndex, currentOpts) {
   return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
  }
});
});
замените на
//Увеличение изображения товара
$(document).ready(function() {
$("a[rel=group]").fancybox({
  'transitionIn'  : 'none',
  'transitionOut'  : 'none',
  'titlePosition'  : 'over',
  'titleFormat'  : function(title, currentArray, currentIndex, currentOpts) {
   return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
  }
});
  $('a[rel="gallery"]').fancybox();
$('.cloud-zoom.main').fancybox({
  'transitionIn'  : 'none',
  'transitionOut'  : 'none',
  'titlePosition'  : 'over',
  'titleFormat'  : function(title, currentArray, currentIndex, currentOpts) {
   return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
  }
});
});

далее найдите 
// На странице товара при наведении на маленькое изображение - изменяем большое изображение
$("ul.preview_images li a").hover(function() {
		 var $src = $(this).attr('href');
		 $("figure img.main").attr('src', $src.replace('mini', 'main'));
});
$("ul.preview_images li a").hover(function() {
		 var $src = $(this).attr('src'); var $href = $(this).attr('href');
		 $("figure a.main").attr('href', $href.replace('mini', 'main'));
});
замените на
// На странице товара при наведении на маленькое изображение - изменяем большое изображение
$("ul.preview_images li a").click(function() {
		 var $src = $(this).attr('data');
		 $("figure img.main").attr('src', $src.replace('mini', 'main'));
});
$("ul.preview_images li a").click(function() {
		 var $src = $(this).attr('src'); var $href = $(this).attr('data');
		 $("figure a.main").attr('href', $href.replace('mini', 'main'));
});

Обратно в Страница товара


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

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

  1. Форум владельцев интернет-магазинов
  2. → Вопросы работы сервиса StoreLand
  3. → Дизайн
  4. → Шаблон Вечность
  5. → Страница товара
  6. Privacy Policy