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


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

клик js css html осень

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

#1 Koderhan

Koderhan

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

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

Отправлено 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".
Скрытый текст
ScreenShot 1039.png

#2 desbest

desbest

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

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

Отправлено 26 Декабрь 2013 - 20:49

В итоге получится?

#3 Сake

Сake

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

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

Отправлено 27 Декабрь 2013 - 03:27

Не понятен ваш вопрос. Вы пробовали выполнить инструкцию? Приведенная выше реализация предполагает необходимость внесения небольших изменений для последующей возможности увеличения изображения товара по клику - в теме оформления "Осень". Если у вас не получается выполнить инструкцию или же возникают какие-то ошибки - сообщите о них подробнее и приведите пример страницы товара.

#4 Anasti

Anasti

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

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

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

У меня все отлично получилось, давно так хотела сделать.
Единственное, у меня в файле "forall.js" ничего не было и так :)

#5 Наталья11111

Наталья11111

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

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

Отправлено 25 Июнь 2014 - 16:05

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

В файле "Товар" изменить код изображений:
<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>


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

#6 support 2.0

support 2.0

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

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

Отправлено 25 Июнь 2014 - 20:56

Просмотр сообщенияНаталья11111 (25 Июнь 2014 - 16:05) писал:

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

В файле "Товар" изменить код изображений:
<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>


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

#7 Наталья11111

Наталья11111

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

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

Отправлено 25 Июнь 2014 - 21:08

Спасибо, все сделала))) вылезла другая проблема  - как можно убрать зум?

#8 Vaccina

Vaccina

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

  • Модераторы
  • 23 915 сообщений

Отправлено 26 Июнь 2014 - 00:55

В шаблоне Товар найдите:
<a itemprop="image" href="{GOODS_IMAGE_LARGE}" title="Увеличить {GOODS_NAME}" class="cloud-zoom" id="zoom1" rel="position: 'inside', showTitle: false, adjustX:-4, adjustY:-4" style="position: relative; display: block;">
												 <img src="{GOODS_IMAGE_MEDIUM}" title="{GOODS_NAME}" alt="{GOODS_NAME}" id="image" style="display: block;" class=".goods-image-medium" />
										 </a>
замените на:
<a itemprop="image" href="{GOODS_IMAGE_LARGE}" title="Увеличить {GOODS_NAME}">
												 <img src="{GOODS_IMAGE_MEDIUM}" title="{GOODS_NAME}" alt="{GOODS_NAME}" id="image" style="display: block;" class=".goods-image-medium" />
										 </a>


#9 Наталья11111

Наталья11111

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

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

Отправлено 26 Июнь 2014 - 10:08

спасибо, все получилось)))

#10 DeeM

DeeM

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

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

Отправлено 11 Октябрь 2014 - 21:00

Просмотр сообщения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".
Скрытый текст
ScreenShot 1039.png

В хроме не работает, в остальных браузерах все ок, как исправить в хроме?

#11 MikDark

MikDark

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

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

Отправлено 11 Октябрь 2014 - 21:05

Просмотр сообщенияDeeM (11 Октябрь 2014 - 21:00) писал:

В хроме не работает, в остальных браузерах все ок, как исправить в хроме?

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

#12 DeeM

DeeM

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

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

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

Просмотр сообщенияMikDark (11 Октябрь 2014 - 21:05) писал:

На Вашем сайте в хроме все отображается нормально, картинки увеличиваются в сплывающем окне.
а у меня нет, открывается как новая фотография http://valstap.ru/go...ty-FP?from=Nzk2
переходит по адресу картинки http://i2.valstap.ru...mgp6237-jpg.jpg

#13 MikDark

MikDark

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

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

Отправлено 11 Октябрь 2014 - 21:17

Просмотр сообщенияDeeM (11 Октябрь 2014 - 21:13) писал:

а у меня нет, открывается как новая фотография http://valstap.ru/go...ty-FP?from=Nzk2
переходит по адресу картинки http://i2.valstap.ru...mgp6237-jpg.jpg

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

#14 DeeM

DeeM

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

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

Отправлено 11 Октябрь 2014 - 21:37

Просмотр сообщенияMikDark (11 Октябрь 2014 - 21:17) писал:

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

#15 Vaccina

Vaccina

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

  • Модераторы
  • 23 915 сообщений

Отправлено 16 Октябрь 2014 - 01:49

попробуйте почистить кэш в вашем браузере

#16 Гузель

Гузель

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

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

Отправлено 10 Ноябрь 2014 - 17:47

Просмотр сообщения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".
Скрытый текст
ScreenShot 1039.png

Все сделала, фото товара открывается в том же окне на весь экран. Но не никакой кнопочки, чтобы закрыть изображение. Может я что-то не так сделала? Аккаунт SL-313392

#17 Vaccina

Vaccina

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

  • Модераторы
  • 23 915 сообщений

Отправлено 20 Ноябрь 2014 - 06:54

Попробуйте очистить кэш в вашем браузере, так как кнопка закрытия изображения присутствует.

screenshot-09-53-23.png

#18 Гузель

Гузель

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

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

Отправлено 26 Ноябрь 2014 - 16:38

Добрый день!
В продолжение темы фото товара в карточке товара.
Сейчас дополнительные фотографии при нажатии на них отображаются сразу во всплывающем окне. Как можно сделать, чтобы они при нажатии на дополнительное фото товара это фото показывалось на месте главного фото.

А всплывающее окно отображалось только при нажатии на главное фото

Спасибо

#19 Гузель

Гузель

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

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

Отправлено 27 Ноябрь 2014 - 17:37

Добрый день!
В продолжение темы фото товара в карточке товара.
Сейчас дополнительные фотографии при нажатии на них отображаются сразу во всплывающем окне. Как можно сделать, чтобы они при нажатии на дополнительное фото товара это фото показывалось на месте главного фото.

А всплывающее окно должно отображаться только при нажатии на главное фото

Спасибо

#20 senia

senia

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

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

Отправлено 29 Ноябрь 2014 - 21:53

Поддерживаю вопрос. Хотелось бы, чтобы дополнительные фото открывались не во всплывающем окне, а на месте главного.





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

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

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