GreyCardinal

Увеличение изображения при наведении

Рекомендуемые сообщения

Здравствуйте! Недавно увидел подобный эффект в магазине и очень озадачился тем, как это сделать. Вот примеры http://angl.p.ht/   и  http://maxyshop.shopuniversal.pusku.com/   Как такое можно реализовать? Заранее благодарен!

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
templater    85

В stylesheet.css нужно дополнить стиль картинки событием по наведению, т.е. img:hover {}

А в нем уже прописать, что душе угодно (конкретный размер, рамку, transform и т.д.).

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти


  • Похожий контент

    • От sitecreator

      1 290.00 руб
      Скачать/Купить дополнение


      Image Compressor & Watermark (Супер-сжатие картинок JPEG, PNG и "водяной знак")
      Оптимизация (сжатие) изображений - Гугл PageSpeed одобряет.
      "Компрессор" (Image Compressor) обеспечит максимальное сжатие  на обычном хостинге (при наличии функции exec php)  и всегда на VDS.
      Установка софта (mozjpeg и  optiPNG) в два клика на обычный хостинг и VDS (не требует знаний Linux).
      Вся магия здесь:
       

       
      Демо 2 (клиентская часть): http://watermark.sitecreator.pro
      Демо 2 (админка): http://watermark.sitecreator.pro/admin/index.php?route=extension/module/watermark_by_sitecreator
       
      Демо 1.5 (клиентская часть): http://watermark15.sitecreator.pro
      Демо 1.5 (админка): http://watermark15.sitecreator.pro/admin/index.php?route=module/watermark_by_sitecreator
       
      пользователь: DEMO
      пароль: DEMO
       
      совместим со всеми сборками версий движков 1.5 и 2+
       

       
      Модуль по максимуму использует возможности imagick (если установлен), что уже позволяет получить лучшие по качеству и размеру изображения.  Кроме того, в отличие от дефолтного GD использование imagick позволяет уменьшить размер файла за счет очистки изображения от ненужной информации.
       
       
      Максимум настроек водяного знака (watermark): его позиция, поворот, прозрачность и т. д.
      Можно настроить ограничение (запретить применять) для водяного знака как по имени файла/папок, так и по  размерам.
      Адаптивный ресайз (resize, обрезка) изображения.
       

       
      Основной функционал модуля - это добавление водяного знака на изображения.  Как бонус - это использование автоматического  супер-сжатия картинок.
      С версии 1.1.0 получаете максимальное сжатие для JPEG, PNG благодаря еще поддержке WebP.
      Использование WebP задумывалось как компромиссное решение когда нет возможности использовать mozjpeg.  А mozjpeg сейчас удалось установить практически везде.
       
      Немного о возможности использования WebP на обычном хостинге:
       
       
       
      Проверенные хостеры, которые поддерживают mozjpeg, OptiPNG,  WebP , т. е. возможно суперсжатие в полной мере.
      Это не означает, что другие не поддерживают, просто тут устанавливали уже  модуль и мне о названии хостера  сообщил заказчик.
       
       
      Совместим с Opencart, Ocstore, opencart.pro и сборок версии 1.5.* и 2+ (2.0, 2.1, 2.2, 2.3)
      требования: php 5.5+ (5.5, 5.6, 7.0)  Версию php у хостера вы можете изменить самостоятельно через панель управления. 
      Ioncube Loader v5.0+
      Модуль совместим с ускорителями/кешерами Jet Cache и Turbo и, скорее всего, с остальными.
      Модуль не заменяет файлы движка, используется ocmod.
      Модуль работоспособен и без ioncube, т. е. сайт будет работать, но не будут работать все дополнительные возможности.
       
       
      Пожалуйста, лицензию запрашивайте, написав мне на почту или в личку.
       
      Супер-сжатие выполняется согласно рекомендациям Гугла PageSpeed Insights и позволяет добиться снижения размера файлов изображений и, как следствие, уменьшения трафика.
      Google  PageSpeed Insights благодаря этому дает более высокую оценку вашему сайту в баллах.
       
      mozjpeg, optipng необязателен к установке, это лишь рекомендация для достижения максимального сжатия.
      Процесс установки этого софта сводится к нажатию двух кнопок в модуле.
      Это работает как на обычном хостинге, так и на VDS.
       
      Инструкция для самостоятельной сборки серверного софта оставлена для любознательных. Не нужно ее пугаться и не нужно повторять все эти действия.
      Модуль Компрессор уже содержит средства диагностики и вывода информации.  Пользуйтесь ими (вкладка "сервис").
       
       
      Инструкция по установке дополнительного софта для WINDOWS :
      (для локальной машины разработчика, например. ).
       
       
       
      Установку модуля осуществляет покупатель самостоятельно или его доверенное лицо.
       

       
       

       

       
       
      Модуль не может пока автоматически сжимать все изображения, которые вы добавляете как ссылки, т. е. которые не попадают в кеш.  Это будет учтено в будущих версиях. Для SEO CMS это уже сделано.
       
      Модуль не трогает элементы оформления вашего шаблона. Пожалуйста, не нужно мне говорить, что они не сжаты.. Эти элементы даже не находятся в папке image.   Вы можете самостоятельно один раз скачать и установить оптимизированные элементы оформления вашего шаблона.
       

       
      Для SEO CMS сделано решение, позволяющее также использовать супер-сжатие по максимуму и водяной знак в этом модуле.  Сделано как отдельное дополнение к модулям "Компрессор" (Image Compressor) и SEO CMS.  Такое решение обусловлено тем, что указанный модуль использует свою библиотеку  и модели для работы с изображениями.
      Сжаты будут даже отображаемые оригиналы, вставленные по прямым ссылкам в статьях.  И на оригиналы можно накладывать водяной знак и защищать их от кражи.
      Любые изменения с оригиналами обратимы. Например, можно менять водяной знак.
       
      Решение здесь: SEO CMS mod for Image Compressor & Watermark
       
       
       
      Совместимость со специфическими модулями и модификаторами,
      (затрагивающими системную библиотеку и модель image.php)
       
       
      ================
      История версий
      ==============
       
       
       
       
       
      Добавил sitecreator Добавлено 26.08.2017 Категория Кэширование, сжатие, ускорение Системные требования php 5.5+, Ioncube Loader 5+ Сайт разработчика https://sitecreator.ru/ Старая цена 1650 Метод активации По запросу в ЛС
      По запросу на почту Ioncube Loader Требуется OpenCart 2.3
      2.2
      2.1
      2.0
      1.5.6.4
      1.5.6.3
      1.5.6.2
      1.5.6.1
      1.5.6
      1.5.5.1
      1.5.5
      1.5.4.1
      1.5.3.1 ocStore 2.3
      2.2
      2.1
      1.5.5.1.2
      1.5.5.1.1
      1.5.5.1
      1.5.4.1.2
      1.5.4.1.1
      1.5.4.1
      1.5.3.1
      1.5.2.1
      1.5.1.3 OpenCart.Pro, ocShop Opencart.pro 2.3
      Opencart.pro 2.1
      OcShop 2.0.3.х
      OcShop 1.5.6.4.х  
    • От sitecreator
      Оптимизация (сжатие) изображений - Гугл PageSpeed одобряет.
      "Компрессор" (Image Compressor) обеспечит максимальное сжатие  на обычном хостинге (при наличии функции exec php)  и всегда на VDS.
      Установка софта (mozjpeg и  optiPNG) в два клика на обычный хостинг и VDS (не требует знаний Linux).
      Вся магия здесь:
       

       
      Демо 2 (клиентская часть): http://watermark.sitecreator.pro
      Демо 2 (админка): http://watermark.sitecreator.pro/admin/index.php?route=extension/module/watermark_by_sitecreator
       
      Демо 1.5 (клиентская часть): http://watermark15.sitecreator.pro
      Демо 1.5 (админка): http://watermark15.sitecreator.pro/admin/index.php?route=module/watermark_by_sitecreator
       
      пользователь: DEMO
      пароль: DEMO
       
      совместим со всеми сборками версий движков 1.5 и 2+
       

       
      Модуль по максимуму использует возможности imagick (если установлен), что уже позволяет получить лучшие по качеству и размеру изображения.  Кроме того, в отличие от дефолтного GD использование imagick позволяет уменьшить размер файла за счет очистки изображения от ненужной информации.
       
       
      Максимум настроек водяного знака (watermark): его позиция, поворот, прозрачность и т. д.
      Можно настроить ограничение (запретить применять) для водяного знака как по имени файла/папок, так и по  размерам.
      Адаптивный ресайз (resize, обрезка) изображения.
       

       
      Основной функционал модуля - это добавление водяного знака на изображения.  Как бонус - это использование автоматического  супер-сжатия картинок.
      С версии 1.1.0 получаете максимальное сжатие для JPEG, PNG благодаря еще поддержке WebP.
      Использование WebP задумывалось как компромиссное решение когда нет возможности использовать mozjpeg.  А mozjpeg сейчас удалось установить практически везде.
       
      Немного о возможности использования WebP на обычном хостинге:
       
       
       
      Проверенные хостеры, которые поддерживают mozjpeg, OptiPNG,  WebP , т. е. возможно суперсжатие в полной мере.
      Это не означает, что другие не поддерживают, просто тут устанавливали уже  модуль и мне о названии хостера  сообщил заказчик.
       
       
      Совместим с Opencart, Ocstore, opencart.pro и сборок версии 1.5.* и 2+ (2.0, 2.1, 2.2, 2.3)
      требования: php 5.5+ (5.5, 5.6, 7.0)  Версию php у хостера вы можете изменить самостоятельно через панель управления. 
      Ioncube Loader v5.0+
      Модуль совместим с ускорителями/кешерами Jet Cache и Turbo и, скорее всего, с остальными.
      Модуль не заменяет файлы движка, используется ocmod.
      Модуль работоспособен и без ioncube, т. е. сайт будет работать, но не будут работать все дополнительные возможности.
       
       
      Пожалуйста, лицензию запрашивайте, написав мне на почту или в личку.
       
      Супер-сжатие выполняется согласно рекомендациям Гугла PageSpeed Insights и позволяет добиться снижения размера файлов изображений и, как следствие, уменьшения трафика.
      Google  PageSpeed Insights благодаря этому дает более высокую оценку вашему сайту в баллах.
       
      mozjpeg, optipng необязателен к установке, это лишь рекомендация для достижения максимального сжатия.
      Процесс установки этого софта сводится к нажатию двух кнопок в модуле.
      Это работает как на обычном хостинге, так и на VDS.
       
      Инструкция для самостоятельной сборки серверного софта оставлена для любознательных. Не нужно ее пугаться и не нужно повторять все эти действия.
      Модуль Компрессор уже содержит средства диагностики и вывода информации.  Пользуйтесь ими (вкладка "сервис").
       
       
      Инструкция по установке дополнительного софта для WINDOWS :
      (для локальной машины разработчика, например. ).
       
       
       
      Установку модуля осуществляет покупатель самостоятельно или его доверенное лицо.
       

       
       

       

       
       
      Модуль не может пока автоматически сжимать все изображения, которые вы добавляете как ссылки, т. е. которые не попадают в кеш.  Это будет учтено в будущих версиях. Для SEO CMS это уже сделано.
       
      Модуль не трогает элементы оформления вашего шаблона. Пожалуйста, не нужно мне говорить, что они не сжаты.. Эти элементы даже не находятся в папке image.   Вы можете самостоятельно один раз скачать и установить оптимизированные элементы оформления вашего шаблона.
       

       
      Для SEO CMS сделано решение, позволяющее также использовать супер-сжатие по максимуму и водяной знак в этом модуле.  Сделано как отдельное дополнение к модулям "Компрессор" (Image Compressor) и SEO CMS.  Такое решение обусловлено тем, что указанный модуль использует свою библиотеку  и модели для работы с изображениями.
      Сжаты будут даже отображаемые оригиналы, вставленные по прямым ссылкам в статьях.  И на оригиналы можно накладывать водяной знак и защищать их от кражи.
      Любые изменения с оригиналами обратимы. Например, можно менять водяной знак.
       
      Решение здесь: SEO CMS mod for Image Compressor & Watermark
       
       
       
      Совместимость со специфическими модулями и модификаторами,
      (затрагивающими системную библиотеку и модель image.php)
       
       
      ================
      История версий
      ==============
       
       
       
       
       
    • От DenKP
      Доброго времени суток! Бьюсь 2-й день с проблемой быстрого просмотра увеличенного изображения товара.
      Пробовал установить, прописать плагин zoom плагин. Не реагирует, вообще ни разу. Версия ocStore 2.3.0.2.3
      Исходники:
      <div class="<?php echo $class; ?>"> <?php if ($thumb || $images) { ?> <ul class="thumbnails"> <?php if ($thumb) { ?> <li><a class="thumbnail" href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>"><img src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li> <?php } ?> <span id="karusel"> <?php if ($images) { ?> <?php foreach ($images as $image) { ?> <li class="image-additional"><a class="thumbnail" href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>"> <img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li> Пробовал с этим js jquery.elevatezoom.min.js
    • От legioner26

      400.00 руб
      Скачать/Купить дополнение


      Модификатор автозаполнения картинок категорий
      Разработан модификатор автозаполнения картинок категорий из первой найденной картинки товара категории, а так же проставляются картинки для главных категорий и под категорий
      версии OpenCart 2.0, 2.1, 2.2, 2.3, 3.x  
      Просто заливаете товары с картинками, а картинки на категории проставятся сами.
      Устанавливаете модификатор как указано на картинке, чистим в модификациях кеш и обновляем. 
       
       
      Добавил legioner26 Добавлено 31.08.2017 Категория Модули Системные требования Сайт разработчика Старая цена 400 Метод активации Без активации Ioncube Loader Нет OpenCart 3.0
      2.3
      2.2
      2.1
      2.0 ocStore 2.3
      2.2
      2.1 OpenCart.Pro, ocShop  
    • От legioner26
      Разработан модификатор автозаполнения картинок категорий из первой найденной картинки товара категории, а так же проставляются картинки для главных категорий и под категорий
      версии OpenCart 2.0, 2.1, 2.2, 2.3, 3.x  
      Просто заливаете товары с картинками, а картинки на категории проставятся сами.
      Устанавливаете модификатор как указано на картинке, чистим в модификациях кеш и обновляем. 
       
       
  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу