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


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


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

#21 livem1.

livem1.

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

  • Пользователи
  • PipPipPipPip
  • 441 сообщений
  • ГородКиев

Отправлено 02 Декабрь 2012 - 18:42

Я пробовал поставить увеличение картинки, всё по пунктам, но всё равно не получается, помогите разобраться, у меня шаблон пластик, опишите в подробностях, как сделать.

#22 ALEXp

ALEXp

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

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

Отправлено 03 Декабрь 2012 - 08:20

и для мокко

#23 Vaccina

Vaccina

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

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

Отправлено 04 Декабрь 2012 - 05:47

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

#24 ALEXp

ALEXp

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

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

Отправлено 04 Декабрь 2012 - 22:15

Для МОККО поставить не составляет труда, просто НАДО включить соображалку.
Всё же делаем интернет-магазин, чтобы извлекать ПРИБЫЛЬ

#25 ALEXp

ALEXp

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

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

Отправлено 05 Декабрь 2012 - 07:28

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

#26 Koderhan

Koderhan

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

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

Отправлено 05 Декабрь 2012 - 13:23

Для этого вы можете изменить настройки плагина.
В файле "Товар" найти код:
<a href="{GOODS_IMAGE_LARGE}" class="cloud-zoom" id='zoom1' target="_blank" title="Увеличить {GOODS_NAME}" rel="position: 'right', adjustX: 8, adjustY: 0, zoomWidth:250px">
<img class="cornerAll withBorder goods-image-medium " src="{GOODS_IMAGE_MEDIUM}" alt="{GOODS_NAME}"/>
</a>
И заменить его на:
<a href="{GOODS_IMAGE_LARGE}" class="cloud-zoom" id='zoom1' target="_blank" title="Увеличить {GOODS_NAME}" rel="tint: &#39;#485f10&#39;, tintOpacity: 0.7, position: 'right', adjustX: 8, adjustY: 0, zoomWidth:250px">
<img class="cornerAll withBorder goods-image-medium " src="{GOODS_IMAGE_MEDIUM}" alt="{GOODS_NAME}"/>
</a>
Важную роль тут играет строка:
rel="tint: &#39;#485f10&#39;, tintOpacity: 0.7, position: 'right', adjustX: 8, adjustY: 0, zoomWidth:250px"
#485f10 - цвет.
0.7 - прозрачность

#27 ALEXp

ALEXp

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

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

Отправлено 05 Декабрь 2012 - 20:06

Просмотр сообщенияKoderhan (05 Декабрь 2012 - 13:23) писал:

Для этого вы можете изменить настройки плагина.
В файле "Товар" найти код:
<a href="{GOODS_IMAGE_LARGE}" class="cloud-zoom" id='zoom1' target="_blank" title="Увеличить {GOODS_NAME}" rel="position: 'right', adjustX: 8, adjustY: 0, zoomWidth:250px">
<img class="cornerAll withBorder goods-image-medium " src="{GOODS_IMAGE_MEDIUM}" alt="{GOODS_NAME}"/>
</a>
И заменить его на:
<a href="{GOODS_IMAGE_LARGE}" class="cloud-zoom" id='zoom1' target="_blank" title="Увеличить {GOODS_NAME}" rel="tint: &#39;#485f10&#39;, tintOpacity: 0.7, position: 'right', adjustX: 8, adjustY: 0, zoomWidth:250px">
<img class="cornerAll withBorder goods-image-medium " src="{GOODS_IMAGE_MEDIUM}" alt="{GOODS_NAME}"/>
</a>
Важную роль тут играет строка:
rel="tint: &#39;#485f10&#39;, tintOpacity: 0.7, position: 'right', adjustX: 8, adjustY: 0, zoomWidth:250px"
#485f10 - цвет.
0.7 - прозрачность
Спасибо. Всё классно

#28 Kalina

Kalina

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

  • Пользователи
  • PipPip
  • 46 сообщений
  • ГородБалашиха

Отправлено 10 Январь 2013 - 15:13

День добрый!

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

вот ссылка на страницу товара
http://домовенок.com...Marks-s-Spenser

#29 Koderhan

Koderhan

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

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

Отправлено 10 Январь 2013 - 15:33

Просмотр сообщенияKalina (10 Январь 2013 - 15:13) писал:

День добрый!

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

вот ссылка на страницу товара
http://домовенок.com...Marks-s-Spenser
Попробуйте удалить настройки плагина.
Это код:
rel="tint: '#485f10', tintOpacity: 0.7, position: 'right', adjustX: 8, adjustY: 0, zoomWidth:250px"
В файле "Товар".

#30 Kalina

Kalina

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

  • Пользователи
  • PipPip
  • 46 сообщений
  • ГородБалашиха

Отправлено 10 Январь 2013 - 15:50

Отменила, ничего не изменилось

#31 Koderhan

Koderhan

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

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

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

Просмотр сообщенияKalina (10 Январь 2013 - 15:50) писал:

Отменила, ничего не изменилось
Сам атрибут  
rel
тоже удалить.

#32 Kalina

Kalina

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

  • Пользователи
  • PipPip
  • 46 сообщений
  • ГородБалашиха

Отправлено 10 Январь 2013 - 17:06

Удалила, ничего не изменилось к сожалению.(((

#33 Vaccina

Vaccina

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

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

Отправлено 10 Январь 2013 - 22:50

Вам необходимо переместить ваши подключения

<script type="text/javascript" src="/web/upload/assets/js/155/154376/cloud-zoom.1.0.2.js"></script>
<link rel="stylesheet" href="/web/upload/assets/styles/155/154376/cloud-zoom.css" type="text/css" />

ниже, например после строки

<script type="text/javascript" src="{FORALL_JS_PATH}jquery-1.4.2_nyroModal-1.6.2_validate_capslock_jquery-ui-1.8.4.custom.version2.min.js">

Ваш код в шаблоне "HTML" должен выглядеть в подобном виде.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
  <title>{PAGE_TITLE}</title>
  <meta name="keywords" content="{PAGE_META_KEYWORDS}" />
  <meta name="description" content="{PAGE_META_DESCRIPTION}" />
  <meta http-equiv="X-UA-Compatible" content="IE=7" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="Content-Language" content="ru" />
  <link rel="icon" href="{ASSETS_IMAGES_PATH}favicon.ico" type="image/x-icon" />
  <link rel="shortcut icon" href="{ASSETS_IMAGES_PATH}favicon.ico" type="image/x-icon" />
 
  <!-- SEO параметр определяющий главную страницу для фильтрации её дублей -->
  {% IF PAGE_CANONICAL %}
	<link rel="canonical" href="{PAGE_CANONICAL}" />
  {% ENDIF %}
 
  <!-- Стили которые не нужно менять, грузятся из папки общих файлов -->
  <link rel="stylesheet" href="{FORALL_STYLES_PATH}reset_01.css" type="text/css" />
  <link rel="stylesheet" href="{FORALL_STYLES_PATH}nyroModal/nyroModal.full.css" type="text/css" />
  <link rel="stylesheet" href="{FORALL_STYLES_PATH}jquery-ui/jquery.ui.all.min.css" type="text/css" />
  <!-- Если в тарифном плане подключен модуль отзывов о товаре -->
  {% IF TARIFF_FEATURE_GOODS_OPINION %}
	<!-- Если не выключен модуль отзывов о товаре, то загружаем css для рейтинга -->
	{% IFNOT SETTINGS_OPINION_DISABLE %}
	  <link rel="stylesheet" href="{FORALL_STYLES_PATH}jquery-ui-stars/jquery.ui.stars.min.css" type="text/css" />
	{% ENDIF %}
  {% ENDIF %}
  <!-- Стили магазина -->
  <link rel="stylesheet" href="{ASSETS_STYLES_PATH}main.css" type="text/css" />
  <!-- В случае их возникновения JS ошибок, отображаем их владельцу магазина для возможности отладки. Покупатели сообщений о JS ошибках не видят -->
  {% IF JAVASCRIPT_BUG_HUNTING_URL %}
	<script type="text/javascript" src="{JAVASCRIPT_BUG_HUNTING_URL}"></script>
  {% ENDIF %}
  <!-- Скрипты которые не нужно менять, грузятся из папки общих файлов -->
  <!-- Это собранные в один файл скрипты из файлов:
	{FORALL_JS_PATH}jquery-1.4.2.min.js
	{FORALL_JS_PATH}jquery.nyroModal-1.6.2.min.js
	{FORALL_JS_PATH}jquery-ui-1.8.4.custom.min.js
	{FORALL_JS_PATH}jquery.validate.min.js
	{FORALL_JS_PATH}jquery.capslock.min.js
  -->
  <script type="text/javascript" src="{FORALL_JS_PATH}jquery-1.4.2_nyroModal-1.6.2_validate_capslock_jquery-ui-1.8.4.custom.version2.min.js"></script>
  <!-- Если в тарифном плане подключен модуль отзывов о товаре -->
  {% IF TARIFF_FEATURE_GOODS_OPINION %}
	<!-- Если не выключен модуль отзывов о товаре, то загружаем css для рейтинга -->
	{% IFNOT SETTINGS_OPINION_DISABLE %}
	  <script type="text/javascript" src="{FORALL_JS_PATH}jquery.ui.stars.min.js"></script>
	{% ENDIF %}
  {% ENDIF %}
  <!-- Скрипты магазина -->
  <script type="text/javascript" src="{ASSETS_JS_PATH}main.js"></script>
</head>

Так же у вас отсутствует подключение файла

<script type="text/javascript" src="{ASSETS_JS_PATH}main.js"></script>

Проверьте ваш шаблон "HTML", а именно содержимое <head>, и приведите его в состояние как в коде выше.

#34 Kalina

Kalina

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

  • Пользователи
  • PipPip
  • 46 сообщений
  • ГородБалашиха

Отправлено 10 Январь 2013 - 23:07

Спасибо большое, все получилось :)  Только как теперь сделать окно просмотра побольше  чтобы оно открывалось не вплотную к исходному изображению, а там где блок купить и добавить к сравнению?

#35 Kalina

Kalina

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

  • Пользователи
  • PipPip
  • 46 сообщений
  • ГородБалашиха

Отправлено 11 Январь 2013 - 00:24

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

http://www.mix7ya.ru...hand-kofty.html

#36 miyako

miyako

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

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

Отправлено 11 Январь 2013 - 09:42

Просмотр сообщенияKalina (10 Январь 2013 - 23:07) писал:

Спасибо большое, все получилось :)  Только как теперь сделать окно просмотра побольше  чтобы оно открывалось не вплотную к исходному изображению, а там где блок купить и добавить к сравнению?

В шаблоне Товар найдите примерно следующий код:

<a href="{GOODS_IMAGE_LARGE}" class="cloud-zoom" id='zoom1' target="_blank" title="Увеличить {GOODS_NAME}" rel="tint: '#485f10', tintOpacity: 0.7, position: 'right', adjustX: 8, adjustY: 0,zoomWidth:250px">
<img class="cornerAll withBorder goods-image-medium " src="{GOODS_IMAGE_MEDIUM}" alt="{GOODS_NAME}"/>
</a>

и замените его на:
<a href="{GOODS_IMAGE_LARGE}" class="cloud-zoom" id='zoom1' target="_blank" title="Увеличить {GOODS_NAME}" rel="tint: '#485f10', tintOpacity: 0.7, position: 'right', adjustX: 310/*перемещение вправо на 310*/, adjustY: 0,zoomWidth:250/*ширина окна увеличенного изображения*/, zoomHeight:250/*длина окна увеличенного изображения*/">
<img class="cornerAll withBorder goods-image-medium " src="{GOODS_IMAGE_MEDIUM}" alt="{GOODS_NAME}"/>
</a>


#37 Kalina

Kalina

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

  • Пользователи
  • PipPip
  • 46 сообщений
  • ГородБалашиха

Отправлено 11 Январь 2013 - 09:45

Спасибо , сейчас попробую сделать)))

#38 Kalina

Kalina

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

  • Пользователи
  • PipPip
  • 46 сообщений
  • ГородБалашиха

Отправлено 11 Январь 2013 - 10:26

Ура! Все получилось! Чуть настройки поменяла и стало все идеально :)  А вот такой вопрос: как цвет затемнения фото поменять на серо-голубой? Заранее спасибо :)

#39 miyako

miyako

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

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

Отправлено 11 Январь 2013 - 10:34

Просмотр сообщенияKalina (11 Январь 2013 - 10:26) писал:

Ура! Все получилось! Чуть настройки поменяла и стало все идеально :)  А вот такой вопрос: как цвет затемнения фото поменять на серо-голубой? Заранее спасибо :)
rel="tint: '#485f10'/*цвет*/, tintOpacity: 0.7/*прозрачность*/, position: 'right', adjustX: 310/*перемещение вправо на 310*/, adjustY: 0,zoomWidth:250/*ширина окна увеличенного изображения*/, zoomHeight:250/*длина окна увеличенного изображения*/


#40 Kalina

Kalina

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

  • Пользователи
  • PipPip
  • 46 сообщений
  • ГородБалашиха

Отправлено 11 Январь 2013 - 18:53

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

http://домовенок.com.../Куртка-женская

Помогите пожалуйста.




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

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