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


Добавление Функции Увеличения Изображения При Клике

Автор Koderhan, 26 дек. 2013 17:59
клик js css html осень

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

#21 senia

senia

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

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

Отправлено 02 Декабрь 2014 - 00:22

Есть кто живой, не?

#22 senia

senia

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

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

Отправлено 07 Декабрь 2014 - 23:50

Модераторы, обозначьте сроки, когда можно ожидать получить ответ на свой вопрос? К лету подготовите?

#23 Vaccina

Vaccina

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

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

Отправлено 09 Декабрь 2014 - 06:54

подобный вопрос обсуждался на форуме имеет инструкцию для шаблона осень:
http://forum.storela...ко/#entry132964

#24 senia

senia

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

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

Отправлено 09 Декабрь 2014 - 14:19

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

Я сделал всё как там написано. Карточки товаров вообще превратились в чистый белый лист. Буквально. Я не утрирую.
Если не выполнять последнее действие по замене кода, то увеличение перестаёт работать вообще, а маленькие фотки открываются в отдельном окне...

Думаете я от скуки или лени здесь пишу о помощи? Просто я изначально уже знаю, что всё в каждом случае индивидуально и не работает у всех одно и тоже. Горький опыт работы со СторЛендом научил.

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

#25 Vaccina

Vaccina

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

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

Отправлено 10 Декабрь 2014 - 01:23

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

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

  $("#left-column ul#preview_images li a").click(function() {
		var $src = $(this).attr('src'); var $href = $(this).attr('href');
		$("#wrap a").attr('href', $href.replace('mini', 'main'));
		return false;
  });

#26 senia

senia

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

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

Отправлено 10 Декабрь 2014 - 01:48

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

#27 Vaccina

Vaccina

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

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

Отправлено 10 Декабрь 2014 - 02:19

В main.js удалите:
  // На странице товара при наведении на маленькое изображение - изменяем большое изображение
  $("#left-column ul#preview_images li img").click(function() {
				var $src = $(this).attr('src');
				$("#wrap img").attr('src', $src.replace('mini', 'main'));
				return false;
  });
  $("#left-column ul#preview_images li a").click(function() {
				var $src = $(this).attr('src'); var $href = $(this).attr('href');
				$("#wrap a").attr('href', $href.replace('mini', 'main'));
				return false;
  });

а в конец шаблона Товар вставьте:
<script>
  // На странице товара при наведении на маленькое изображение - изменяем большое изображение
  $("#left-column ul#preview_images li img").click(function() {
				var $src = $(this).attr('src');
				$("#wrap img").attr('src', $src.replace('mini', 'main'));
				return false;
  });
  $("#left-column ul#preview_images li a").click(function() {
				var $src = $(this).attr('src'); var $href = $(this).attr('href');
				$("#wrap a").attr('href', $href.replace('mini', 'main'));
				return false;
  });
</script>

#28 senia

senia

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

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

Отправлено 10 Декабрь 2014 - 14:34

Мы уже на пол пути к цели. :)
Маленькие картинки при клике вставляются в основное окошко - спасибо!

Но вот зум при нажатии на большую картинку всё ещё не работает.

#29 Vaccina

Vaccina

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

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

Отправлено 11 Декабрь 2014 - 04:13

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

{% IFNOT goods_images_empty %}
<div style="display: none;" id="thumbs_list_frame">
  {% FOR goods_images %}
	<span style="display: none;">
	   <a href="{goods_images.LARGE}" title="{goods_images.NAME}" rel="group"></a>
	   <input type="hidden" rel="{goods_images.ID}" />
	</span>
  {% ENDFOR %}
</div>
{% ENDIF %}

данный код можно вставить перед строкой

<!-- Другие изображения товара. Отображаются если есть изображения товара -->

#30 senia

senia

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

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

Отправлено 11 Декабрь 2014 - 04:24

Получилось! Зум заработал.

Мне уже неудобно вас мучать, но всё же ещё осталась одна проблема. Теперь при клике на окошко с большим фото, открывается зум не текущей фотографии, а всегда открывается фото, назначенное "Основным".

Сообщение отредактировал senia: 11 Декабрь 2014 - 04:33

#31 Эл Мороз

Эл Мороз

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

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

Отправлено 23 Май 2015 - 16:34

 Koderhan (26 Декабрь 2013 - 17:59) писал:

На форуме часто спрашивали как добавить функцию увеличения при клике на главное изображение.
Перед внесением изменений лучше создать резервную копию шаблона.
ScreenShot 1040.png
В файле "Товар" изменить код изображений:
<div id="thumbs_list">
<ul id="thumbs_list_frame" style="width: 100000px;">
{% ENDIF %}
<li>
<a href="{goods_images.LARGE}" title="{goods_images.NAME}" class="cloud-zoom-gallery" rel="useZoom: 'zoom1', smallImage: '{goods_images.MEDIUM}' ">
<img src="{goods_images.ICON}" alt="{goods_images.NAME}" />
</a>
</li>
{% IF goods_images.last %}
</ul>
</div>
На код:
<div id="thumbs_list">
			 <ul id="thumbs_list_frame" style="width: 100000px;">
			 {% ENDIF %}
				 <li>
				 <a href="{goods_images.LARGE}" title="{goods_images.NAME}" class="pict_gallery" rel="group" target="_blank">
					 <img src="{goods_images.ICON}" alt="{goods_images.NAME}" rel="{goods_images.MEDIUM}" />
				 </a>
				 <!-- Идентификатор изображения товара, используется для галереи изображений -->
				 <input type="hidden" rel="{goods_images.ID}" />
				 </li>
			 {% IF goods_images.last %}
			 </ul>
		 </div>

Код:
<!-- Большое изображение -->
<div class="image">
	 <div id="wrap" style="top:0px;z-index:9999;position:relative;background: #fff;margin: 0 auto;text-align: center;">
	 {% IF GOODS_IMAGE_EMPTY %}
		 <img src="{ASSETS_IMAGES_PATH}no-photo-medium.png" alt="{GOODS_NAME}" title="Увеличить {GOODS_NAME}" class="thumbnail"/>
	 {% ELSE %}
		 <a itemprop="image" href="{GOODS_IMAGE_LARGE}" title="Увеличить {GOODS_NAME}" class="cloud-zoom" id="zoom1" rel="position: 'inside', zoomPosition: '3', showTitle: false, adjustX:-4, adjustY:-4">
		 <img src="{GOODS_IMAGE_MEDIUM}" title="{GOODS_NAME}" alt="{GOODS_NAME}" id="image">
		 </a>
	 {% ENDIF %}		
	 </div>			
</div>
Заменить:
<!-- Большое изображение -->
<div class="image">
	 <div id="wrap" >
	 {% IF GOODS_IMAGE_EMPTY %}
		 <img src="{ASSETS_IMAGES_PATH}no-photo-medium.png" alt="{GOODS_NAME}" title="Увеличить {GOODS_NAME}" class="thumbnail"/>
	 {% ELSE %}
		 <a itemprop="image" href="{GOODS_IMAGE_LARGE}" title="Увеличить {GOODS_NAME}" class="fullimg" target="_blank">
		 <img src="{GOODS_IMAGE_MEDIUM}" title="{GOODS_NAME}" alt="{GOODS_NAME}" id="image">
		 </a>
		 <!-- Идентификатор изображения товара, используется для галереи изображений -->
		 <input type="hidden" rel="{GOODS_IMAGE_ID}" />
	 {% ENDIF %}		
	 </div>			
</div>


В конец файла "main.js" добавить код:
Скрытый текст

И в файле "forall.js".
Удалить код плагина "Cloud Zoom".
Скрытый текст


Все исправил как написано - все получилось!! Просто супер!! Огромное спасибо!!

#32 polak

polak

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

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

Отправлено 08 Сентябрь 2015 - 20:35

 Koderhan (26 Декабрь 2013 - 17:59) писал:

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

Шаблон Осень. Как то же самое реализовать в каталоге и на главной странице?
Обратно в Страница товара



Темы с аналогичным тегами клик, js, css, html, осень

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

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

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