Сообщений в теме: 297

[hamer750]

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

[551]

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

[Vaccina]

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

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

[Victor Slimer]

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

[Koderhan]

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

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

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

[Victor Slimer]

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

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

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

[Koderhan]

Здравствуйте. Рассмотрим установку плагина который описан здесь http://jquerylist.ru...cloud-zoom.html
Первое что нужно это скачать архив с css и js кодом себе на компьютер и распаковать в любую папку.
Затем переходим Сайт-> Редактор тем.
Загружаем на сайт файлы.

Нажимаем кнопку "Добавить файлы"
Нам нужно два файла "cloud-zoom.1.0.2.js" и "cloud-zoom.css"

Жмем сохранить.
Теперь нужно подключить эти файлы к сайту. Делается это в файле 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

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

•  cloud-zoom.1.0.2.zip   7,04К   318 Количество загрузок:

[Victor Slimer]

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

[Victor Slimer]

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

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

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

[Koderhan]

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;">

[Victor Slimer]

Первая конструкция заработала. В моем случае имело смысл поставить такие настройки

rel="position: 'right', adjustX: 17, adjustY: 77, zoomWidth:350"

чтобы зуум не закрывал цену и кнопку купить.

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

[Koderhan]

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>

[Victor Slimer]

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

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

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

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

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

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

[Koderhan]

Попробуйте теперь такой 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> прописывать нельзя.

[Victor Slimer]

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> прописывать нельзя.

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

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

[Koderhan]

Как мне известно вы не вставляли код в файл HTML.
Пожалуйста вставьте код

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

В файл HTML до кода </head>

[Victor Slimer]

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

[Vaccina]

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

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

[Victor Slimer]

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

[ALEXp]

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