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


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

Автор hamer750, 05 нояб. 2012 08:05

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

#281 Ирина345

Ирина345

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

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

Отправлено 11 Сентябрь 2014 - 18:31

Просмотр сообщенияunicum (11 Сентябрь 2014 - 18:27) писал:

Подскажите пожалуйста как сделать чтоб при наведении курсора на товар картинка увеличивалась и в режиме слайд-шоу показывались другие фотографии( если имеются) так же в увеличенном режиме.
Здравствуйте, если речь идет о аккаунте

SL-307663

 ,то  на данном шаблоне уже присутствует данная функция.

#282 tolikkansk

tolikkansk

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

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

Отправлено 30 Октябрь 2014 - 22:51

Подскажите и объясните, пожалуйста, как в файле cloud-zoom.1.0.2.js задаются размеры облака, которым мы водим по картинке.
Нужно просто изменить размер на более-менее нормальный.

#283 Vaccina

Vaccina

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

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

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

В файле cloud-zoom.css найдите:
.cloud-zoom-big {
border: 4px solid #ccc;
overflow: hidden;
}
и добавьте ширину с необходимым параметром, например:
.cloud-zoom-big {
border: 4px solid #ccc;
overflow: hidden;
width: 300px !important;
}

#284 tolikkansk

tolikkansk

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

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

Отправлено 05 Февраль 2015 - 22:19

Есть инструкция для нефрита, вроде все установил, окно бегает по картинке, но не увеличивает? Аккаунт SL-319026

#285 Vaccina

Vaccina

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

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

Отправлено 06 Февраль 2015 - 03:39

В main.css найдите:
.cloud-zoom-big {
  border: 4px solid #ccc;
  overflow: hidden;
}
попробуйте заменить на:
.cloud-zoom-big {
  border: 4px solid #ccc;
  overflow: hidden;
  z-index: 99;
  left: 43px !important;
}

#286 tolikkansk

tolikkansk

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

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

Отправлено 06 Февраль 2015 - 05:52

Просмотр сообщенияVaccina (06 Февраль 2015 - 03:39) писал:

В main.css найдите:
.cloud-zoom-big {
border: 4px solid #ccc;
overflow: hidden;
}
попробуйте заменить на:
.cloud-zoom-big {
border: 4px solid #ccc;
overflow: hidden;
z-index: 99;
left: 43px !important;
}

Установил, но все равно не косячит.

#287 Vaccina

Vaccina

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

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

Отправлено 06 Февраль 2015 - 06:31

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

#288 tolikkansk

tolikkansk

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

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

Отправлено 06 Февраль 2015 - 07:31

А да,все отлично работает, но есть кое-что: 1)вылезает на верхнюю панель

И второе : 2) картинка по ходу съехала и там в углу должно быть ещё NEW (т.к. в категориях новинки )

Прикрепленные изображения

  • 06022015.png
  • 6022015.png

#289 Vaccina

Vaccina

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

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

Отправлено 07 Февраль 2015 - 02:10

В main.css найдите:
.new {
line-height: 22px;
border-top: 56px solid #c10841;
border-right: 56px solid transparent;
display: block;
height: 0;
position: absolute;
width: 0;
z-index: 1;
}
замените на:
.new {
line-height: 22px;
border-top: 56px solid #c10841;
border-right: 56px solid transparent;
display: block;
height: 0;
position: absolute;
width: 0;
z-index: 99;
}

далее в шаблоне Товар найдите:
<div id="wrap" style="top:0px;z-index:800;position:relative;">
замените значение z-index на 90

#290 tolikkansk

tolikkansk

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

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

Отправлено 07 Февраль 2015 - 08:20

Как это можно исправить????????????????

Прикрепленные изображения

  • 07022014-2.png

#291 Vaccina

Vaccina

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

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

Отправлено 10 Февраль 2015 - 06:44

Попробуйте следующее, в main.css найдите:
.cloud-zoom-big {
  left: 0 !important;
  overflow: hidden;
  z-index: 99;
}
замените на:
.cloud-zoom-big {
  overflow: hidden;
  z-index: 99;
  left: 20% !important;
  position: absolute !important;
}

#292 yvn

yvn

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

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

Отправлено 23 Сентябрь 2015 - 21:30

Просмотр сообщенияKoderhan (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

Здравствуйте!
Какие изменения нужно сделать в файле "Товар" для шаблона Вечность?

#293 Vaccina

Vaccina

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

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

Отправлено 24 Сентябрь 2015 - 01:48

Инструкция по реализации увеличения фото в каталоге для шаблоне Вечность:
http://forum.storela...-при-наведении/

#294 luckmann92

luckmann92

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

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

Отправлено 18 Февраль 2016 - 12:14

Просмотр сообщенияKoderhan (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

Добрый день, не подскажите а как реализовать данную функцию на шаблоне Шоколад?

#295 MikDark

MikDark

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

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

Отправлено 18 Февраль 2016 - 12:34

Просмотр сообщенияluckmann92 (18 Февраль 2016 - 12:14) писал:

Добрый день, не подскажите а как реализовать данную функцию на шаблоне Шоколад?

Здравствуйте. Первый часть, до изменений в шаблоне Товар делаете из основной инструкции.
Далее в шаблоне Товар ищите код:
<a itemprop="image" href="{GOODS_IMAGE_OTHER}" title="{GOODS_NAME}">
	   <img src='{GOODS_IMAGE_LARGE}' class="goods-image-other"/>
		</a>

и заменяете на:
<a itemprop="image" href="{GOODS_IMAGE_OTHER}" title="{GOODS_NAME}"  class="cloud-zoom" id='zoom1' rel="position: 'right', adjustX: 8, adjustY: 0, zoomWidth:250">
	   <img src='{GOODS_IMAGE_LARGE}' class="goods-image-other"/>
		</a>

#296 luckmann92

luckmann92

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

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

Отправлено 19 Февраль 2016 - 09:13

Просмотр сообщенияMikDark (18 Февраль 2016 - 12:34) писал:

Здравствуйте. Первый часть, до изменений в шаблоне Товар делаете из основной инструкции.
Далее в шаблоне Товар ищите код:
<a itemprop="image" href="{GOODS_IMAGE_OTHER}" title="{GOODS_NAME}">
	 <img src='{GOODS_IMAGE_LARGE}' class="goods-image-other"/>
	 </a>

и заменяете на:
<a itemprop="image" href="{GOODS_IMAGE_OTHER}" title="{GOODS_NAME}" class="cloud-zoom" id='zoom1' rel="position: 'right', adjustX: 8, adjustY: 0, zoomWidth:250">
	 <img src='{GOODS_IMAGE_LARGE}' class="goods-image-other"/>
	 </a>
Сделал все по инструкции но не помогло, в чем возможна проблема?

#297 MikDark

MikDark

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

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

Отправлено 19 Февраль 2016 - 09:36

Просмотр сообщенияluckmann92 (19 Февраль 2016 - 09:13) писал:

Сделал все по инструкции но не помогло, в чем возможна проблема?

Изменения Вам произвели, посмотрите.

#298 Store-rondell

Store-rondell

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

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

Отправлено 26 Февраль 2018 - 17:10

Добрый вечер.
Хочу сделать так, чтобы при увеличенном изображении (когда водишь "лупой/крестиком" по картинке), была возможность, при помощи клика, открыть картинку в полный размер.
Применял данный код:

Цитата

$(function() {
  $('.mousetrap').live('click', function() {
var link = $(this).closest('#wrap').find('a');
var image = new Image();
image.src = link.attr('href');
var width = image.width;
var height = image.height;
window.open(link.attr('href'),"Image","width=" + width + ",height=" + height);
  });
});

Но меня не устроило, что создается новое окно (в моем же окне) для открытия картинки... И я убрал этот код.
Можно ли сделать так, чтобы картинка открывалась на сером фоне, к примеру как здесь:
Изображение

P.S. Завтра произведу оплату магазина, пожалуйста, помогите мне сейчас. Спасибо!)))
Обратно в Страница товара


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

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

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