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


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


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

#1 hamer750

hamer750

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

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

Отправлено 05 Ноябрь 2012 - 08:05

Приветствую.возможно ли организовать такую штуку-при наведении курсора на картинку товара,картинка автоматически увеличивается? как на http://www.lamoda.ru

#2 551

551

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

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

Отправлено 05 Ноябрь 2012 - 15:00

Поддерживаю.

#3 Vaccina

Vaccina

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

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

Отправлено 06 Ноябрь 2012 - 15:09

Существует множество jquery плагинов для реализации данного эффекта.
Например
http://www.xiper.net...cloud-zoom.html
http://www.tripwirem...om-effects.html

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

#4 Victor Slimer

Victor Slimer

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

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

Отправлено 17 Ноябрь 2012 - 20:31

Попробовал сделать скрипт из первой ссылки (xiper), работает, но есть проблема. Увеличивает только первую фотографию, а у меня к каждой фотографии их минимум 3 штуки. Нажимаешь на другое фото, оно меняется в главном окне, но зум всё равно только главное фото показывает.
Есть решение?

#5 Koderhan

Koderhan

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

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

Отправлено 19 Ноябрь 2012 - 08:30

 Victor Slimer (17 Ноябрь 2012 - 20:31) писал:

Попробовал сделать скрипт из первой ссылки (xiper), работает, но есть проблема. Увеличивает только первую фотографию, а у меня к каждой фотографии их минимум 3 штуки. Нажимаешь на другое фото, оно меняется в главном окне, но зум всё равно только главное фото показывает.
Есть решение?
Здравствуйте. Скрипт берет ссылки на картинки из страницы. Остальные картинки загружаются как миниатюры с сайта. В нормальном режиме при нажатие на миниатюру идет ajax запрос серверу и картинка загружаются.

#6 Victor Slimer

Victor Slimer

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

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

Отправлено 19 Ноябрь 2012 - 09:37

 Koderhan (19 Ноябрь 2012 - 08:30) писал:

Здравствуйте. Скрипт берет ссылки на картинки из страницы. Остальные картинки загружаются как миниатюры с сайта. В нормальном режиме при нажатие на миниатюру идет ajax запрос серверу и картинка загружаются.

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

#7 Koderhan

Koderhan

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

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

Отправлено 19 Ноябрь 2012 - 10:44

Здравствуйте. Рассмотрим установку плагина который описан здесь http://jquerylist.ru...cloud-zoom.html
Первое что нужно это скачать архив с css и js кодом себе на компьютер и распаковать в любую папку.
Затем переходим Сайт-> Редактор тем.
Загружаем на сайт файлы.
ScreenShot 86.jpg
Нажимаем кнопку "Добавить файлы"
Нам нужно два файла "cloud-zoom.1.0.2.js" и "cloud-zoom.css"
ScreenShot 87.jpg
Жмем сохранить.
Теперь нужно подключить эти файлы к сайту. Делается это в файле HTML.
Откроем его для редактирования и вставим код перед </head>.
<!-- Подключение 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" />

Плагин подключен и доступен для остальных файлов.
Теперь его нужно подключить для определенного изображения на сайте. В нашем случаее это страниц "Товара".
(Внимание. Ваш код может отличаться если у вас шаблон не "Сияние")
Открываем файл "Товар".
Найти код:
<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>
Заменить на:
<a href="{GOODS_IMAGE_LARGE}" class="cloud-zoom" id='zoom1' target="_blank" title="Увеличить {GOODS_NAME}" rel="position: 'right', adjustX: 8, adjustY: 0, zoomWidth:250">
<img class="cornerAll withBorder goods-image-medium " src="{GOODS_IMAGE_MEDIUM}" alt="{GOODS_NAME}"/>
</a>

Теперь для первого изображения все будет грузится нормально но если выбрать остальные изображения то появится в увеличение все равно первое. Чтобы это исправить нужно сделать следующее.
Найти код:
<a href="{goods_images.LARGE}" rel="gallery" target="_blank" title="{goods_images.NAME}"><img class="cornerAll withBorder goods-image-icon" rel="{goods_images.MEDIUM}" src="{goods_images.ICON}" alt="{goods_images.NAME}" /></a>
Заменить на:
<a href="{goods_images.LARGE}" rel="useZoom: 'zoom1'" class="cloud-zoom-gallery" target="_blank" title="{goods_images.NAME}"><img class="cornerAll withBorder goods-image-icon" rel="{goods_images.MEDIUM}" src="{goods_images.ICON}" alt="{goods_images.NAME}" /></a>

На этом изменения закончены. Не забудьте сохранить файл перед просмотром результата.
И делать бекапы шаблонов.

Примечание.
1. Ширина и высота указываются без 'px'. Пример: zoomWidth:250

Для того чтобы добавить увеличение лупой в каталог товаров .
Код актуален для шаблона сияние.
В файле "Товары".
Для "Списка".

Найти код:
<div class="imagem"><a href="{goods.URL}" title="Перейти на страницу &laquo;{goods.NAME}&raquo;"><img class="goods-image-small" {% 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>
Заменить:
<div class="imagem">
<a href="{goods.IMAGE_LARGE}" class="cloud-zoom" id='zoom1' rel="zoomImage: '{goods.IMAGE_SMALL}', position: 'right', adjustX: 8, adjustY: 20, zoomWidth:250">
		 <img title="Перейти на страницу &laquo;{goods.NAME}&raquo;" class="goods-image-small" {% 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>
Для "Таблица".
Найти код:
<a href="{goods.URL}" title="Перейти на страницу &laquo;{goods.NAME}&raquo;"><img class="goods-image-other" src="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-other.png{% ELSE %}{goods.IMAGE_OTHER}{% ENDIF %}" alt="{goods.NAME}" /></a>
Заменить:
<a href="{goods.IMAGE_LARGE}" class="cloud-zoom" id='zoom1' rel="zoomImage: '{goods.IMAGE_SMALL}', position: 'right', adjustX: 8, adjustY: 20, zoomWidth:250" title="Перейти на страницу &laquo;{goods.NAME}&raquo;"><img class="goods-image-other" src="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-other.png{% ELSE %}{goods.IMAGE_OTHER}{% ENDIF %}" alt="{goods.NAME}" /></a>
На этом все.
Страница товара не будет открываться по клику на изображение.

Для того чтобы добавить увеличение изображение в шаблоне Мокко.
Нужно проделать тоже самое что написано выше. Будут отличаться только изменения в файле "Товар".
Файлы библиотек мы подключили теперь немного изменим код в файле Товар.
Код:
<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" class="cloud-zoom" id='zoom1' rel="position: 'right', adjustX: 8, adjustY: 0, zoomWidth:250" 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 href="{goods_images.LARGE}" rel="gallery" target="_blank" title="{goods_images.NAME}"><img class="cornerAll withBorder goods-image-icon" rel="{goods_images.MEDIUM}" src="{goods_images.ICON}" alt="{goods_images.NAME}" /></a>
Заменить:
<a href="{goods_images.LARGE}" rel="useZoom: 'zoom1'" class="cloud-zoom-gallery" target="_blank" title="{goods_images.NAME}"><img class="cornerAll withBorder goods-image-icon" rel="{goods_images.MEDIUM}" src="{goods_images.ICON}" alt="{goods_images.NAME}" /></a>

Теперь лупа должна работать.
Есть небольшая ошибка которая появляется по нажатию на кнопку увеличить изображение.
Исправили тут http://forum.storela...ора/#entry32110

Прикрепленные файлы



#8 Victor Slimer

Victor Slimer

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

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

Отправлено 19 Ноябрь 2012 - 11:14

Огромное спасибо!
Это надо в FAQ занести обязательно.

#9 Victor Slimer

Victor Slimer

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

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

Отправлено 19 Ноябрь 2012 - 12:22

Поставил сейчас на сайт, работает, но не заработали настройки зума (rel="position: 'right', adjustX: 8, adjustY: 0, zoomWidth:250px")
Где-то в них ошибка, пока не нашел где.

И есть ещё серьёзный баг. Если нажать на кнопку "Увеличить изображение", то маленькое изображение товара будет перекрывать большое

вот например: http://ideal-buket.r...lybka?from=NDU1

#10 Koderhan

Koderhan

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

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

Отправлено 19 Ноябрь 2012 - 12:46

 Victor Slimer (19 Ноябрь 2012 - 12:22) писал:

Поставил сейчас на сайт, работает, но не заработали настройки зума (rel="position: 'right', adjustX: 8, adjustY: 0, zoomWidth:250px")
Где-то в них ошибка, пока не нашел где.

И есть ещё серьёзный баг. Если нажать на кнопку "Увеличить изображение", то маленькое изображение товара будет перекрывать большое

вот например: http://ideal-buket.r...lybka?from=NDU1
1. ширина и высота указываются без 'px'. zoomWidth:250
2.Да действительно такое присутствует.
Вы можете это исправить заменив код в файле Товар.
Найти код:
<div id="wrap" style="top:0px;z-index:9999;position:relative;">
Заменить на:
<div id="wrap" style="top:0px;position:relative;">


#11 Victor Slimer

Victor Slimer

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

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

Отправлено 19 Ноябрь 2012 - 13:50

Первая конструкция заработала. В моем случае имело смысл поставить такие настройки
rel="position: 'right', adjustX: 17, adjustY: 77, zoomWidth:350"
чтобы зуум не закрывал цену и кнопку купить.

А вот второй код никак не находится в файле Товары. Он точно там? И точно такой? Шаблон Сияние.

#12 Koderhan

Koderhan

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

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

Отправлено 19 Ноябрь 2012 - 14:48

 Victor Slimer (19 Ноябрь 2012 - 13:50) писал:

Первая конструкция заработала. В моем случае имело смысл поставить такие настройки
rel="position: 'right', adjustX: 17, adjustY: 77, zoomWidth:350"
чтобы зуум не закрывал цену и кнопку купить.

А вот второй код никак не находится в файле Товары. Он точно там? И точно такой? Шаблон Сияние.
Да, верно. Этот код выводится через js.
Попробуйте вставить отредактировать файл HTML.
Вставить код до кода </head>.

<script type="text/javascript">
$('#wrap').attr('style', 'top:0px;position:relative;');
</script>


#13 Victor Slimer

Victor Slimer

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

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

Отправлено 19 Ноябрь 2012 - 14:56

 Koderhan (19 Ноябрь 2012 - 14:48) писал:

Да, верно. Этот код выводится через js.
Попробуйте вставить отредактировать файл HTML.
Вставить код до кода </head>.

<script type="text/javascript">
$('#wrap').attr('style', 'top:0px;position:relative;');
</script>

Вставил в файл HTML этот код до </head>

Пока что положительного результата нет :(

Попробовал добавить этот код в main.js
Скрипт стал работать некорректно.

#14 Koderhan

Koderhan

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

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

Отправлено 19 Ноябрь 2012 - 15:19

Попробуйте теперь такой js-код.
В файл HTML.
Найти код:
<script type="text/javascript">
$('#wrap').attr('style', 'top:0px;position:relative;');
</script>
Заменить на:
<script type="text/javascript">
$('goodsDataMainImageZoom').click($('#wrap').attr('style', 'top:0px;position:relative;'));
</script>
Если вы вставляете код в main.js то теги <script></script> прописывать нельзя.

#15 Victor Slimer

Victor Slimer

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

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

Отправлено 19 Ноябрь 2012 - 15:29

 Koderhan (19 Ноябрь 2012 - 15:19) писал:

Попробуйте теперь такой js-код.
В файл HTML.
Найти код:
<script type="text/javascript">
$('#wrap').attr('style', 'top:0px;position:relative;');
</script>
Заменить на:
<script type="text/javascript">
$('goodsDataMainImageZoom').click($('#wrap').attr('style', 'top:0px;position:relative;'));
</script>
Если вы вставляете код в main.js то теги <script></script> прописывать нельзя.

Да, я знаю, но скрипт не работает.

Картинку открывает не аяксом, а просто в окошке и не работает переключение миниатюр.

#16 Koderhan

Koderhan

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

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

Отправлено 19 Ноябрь 2012 - 16:05

Как мне известно вы не вставляли код в файл HTML.
Пожалуйста вставьте код
<script type="text/javascript">
$('goodsDataMainImageZoom').click($('#wrap').attr('style', 'top:0px;position:relative;'));
</script>
В файл HTML до кода </head>

#17 Victor Slimer

Victor Slimer

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

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

Отправлено 19 Ноябрь 2012 - 16:23

Сорри, не заметил что Вы написали другой код, поставил, но и он к сожалению не дал результата в HTML
А при добавлении в js работает так же некорректно как и прошлый.

#18 Vaccina

Vaccina

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

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

Отправлено 19 Ноябрь 2012 - 16:54

Попробуйте сделать следующее: В файл стилей main.css добавить в самый конец этого файла следующий класс

div#nyroModalFull {
  z-index: 9999 !important;
}


#19 Victor Slimer

Victor Slimer

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

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

Отправлено 19 Ноябрь 2012 - 17:39

Работает!
Спасибо!

#20 ALEXp

ALEXp

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

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

Отправлено 30 Ноябрь 2012 - 12:45

НАВЕРНОЕ, это классная штука. попробую себе поставить




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

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