Урок 73. Плавное увеличение картинки в WordPress – плагин Image Zoom. Image zoom wordpress


WP Image Zoom | WordPress.org

Awesome image zoom for images in posts/pages and for WooCommerce products

WP Image Zoom is a robust, modern and very configurable image zoom plugin. It allows you to easily create a magnifying glass on your images, all from a very intuitive WP admin interface.

Your visitors will be able to see the beautiful details of your images. This will improve your users’ experience and hopefully also your revenue.

Features
Why should you upgrade to WP Image Zoom Pro?
Примечания

ru.wordpress.org

Zoom в WordPress для изображений с помощью плагина

Zoom – это эффект для изображения. Он проявляется в том, что при наведении мышки на картинку, её фрагмент увеличивается. Это позволяет пользователю лучше рассмотреть детали изображения. Такой эффект особенно применим в интернет-магазинах. Благодаря ему можно увидеть все мелочи покупаемого продукта. Например, zoom встречается на знаменитом Aliexpress.

В этой статье я расскажу о плагине, который позволяет создать zoom в WordPress. Покажу, какие есть возможности у этого дополнения, и как его использовать.

Zoom в WordPress для изображений с помощью плагина

Zoom в WordPress с плагином WP Image Zoom

Для начала скачайте плагин WP Image Zoom по ссылке ниже, установите его на свой сайт и активируйте. Это дополнение условно-бесплатное, то есть часть функций можно получить только в платной премиум-версии. Однако, большинству вебмастеров хватит бесплатных возможностей.

Для начала покажу, как сделать zoom в WordPress, а потом расскажу о настройках плагина. Итак, опубликуйте в редакторе какое-либо изображение, кликните на него мышкой и нажмите на эту кнопку в панели инструментов (кнопку, которую я показываю на скриншоте ниже).

Zoom в WordPress для изображений с помощью плагина

Сохраните изменения и просмотрите, как работает zoom.

Zoom в WordPress для изображений с помощью плагина

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

Вот так всё легко. Теперь посмотрим, какие есть настройки. Все опции собраны в пункте консоли «WP Image Zoom». Есть две вкладки.

Во вкладке «General settings» главные настройки, среди которых интеграция zoom в плагин интернет-магазина Woocomerce и управление эффектом на мобильных устройствах. Большая часть опций здесь доступна только в премиум-версии.

Вкладка «Zoom settings» более интересна. Здесь настройки внешнего вида zoom в WordPress. Опции разбиты на четыре шага:

После внесения соответствующих настроек, можно проверить, как zoom в WordPress выглядит на сайте. Все изменения должны там отобразиться. При необходимости можно снова подправить нужные опции. Если же возможностей требуется больше, то придётся приобрести этот плагин.

wp-system.ru

Изображения WordPress с эффектом zoom при наведении

Изображения WordPress в данный момент не достаточно хорошо отработаны. Конечно же, в CMS есть все необходимые инструменты для того, чтобы поработать с картинками, загрузить их, назначить нужные атрибуты. Однако чего-то большего там нет.

Для того чтобы изображения WordPress имели какие-то особые интересные дизайнерские эффекты, придётся использовать дополнительные плагины. В этой статье мы расскажем о дополнении, которое позволяет сделать zoom картинки при наведении мышки.

Zoom картинки с плагином WP Image Zoom

Плагин WP Image Zoom позволяет создать zoom изображения при наведении мышки на неё. То есть, если навести курсор мышки на картинку, то можно будет увидеть какую-то увеличенную её область. Такой эффект вы часто могли видеть в интернет-магазинах. И этот плагин отлично подойдёт для интернет-магазинов на WordPress.

Такой подход к публикации картинок будет удобен, когда требуется сохранить пространство на странице, и не растягивать картинку на весь экран, и при этом позволить посетителю рассмотреть все мелкие детали фото.

Для того чтобы начать работать с плагином, скачайте WP Image Zoom, установите его на своём сайте и активируйте. После этого в консоли появится новый пункт «WP Image Zoom». Перейдите в него, чтобы настроить плагин.

Во вкладке «General settings» есть основные опции плагина:

Во вкладке «Zoom settings» собраны настройки внешнего вида эффекта изображения WordPress.

Когда вы создали все настройки, можно применить эффект к изображению WordPress. Для этого загрузите в редакторе страниц или записей картинку обычным способом, выделите её мышкой и нажмите на панели инструментов на кнопку «Image zoom».

Возможно, вам также будет интересен этот плагин, который создаёт другой эффект изображения WordPress при наведении мышки.

Если вы нашли ошибку, то выделите её и нажмите клавиши Shift + Enter или нажмите сюда, чтобы проинформировать нас.

Также по этой теме:

wpuroki.ru

Урок 73. Плавное увеличение картинки в Wordpress - плагин Image Zoom

Плагин Image Zoom - плавное увеличение картинок WordPress

Приветствую! Давненько я ничего не писал в блог. Сегодня я расскажу, как сделать, чтобы при щелчке по картинке, она плавно увеличивалась. В уроке 70 я обещал, что напишу урок на эту тему. Плавное увеличение картинки можно осуществить с помощью плагина Image Zoom.Плагин Image Zoom позволяет динамически увеличивать изображение, как в комментариях, так и на страницах блога.

Следующие возможности плагина:

  1. Плагин позволяет настраивать ширину и высоту изображения
  2. Изменять время при переходе на другое изображение
  3. Менять положение кнопок
  4. Функция автоматического запуска слайд-шоу
  5. Настройка непрозрачного фона.

Существует еще плагин Lightbox Plus для WordPress, но  Image Zoom мне нравится больше, потому что в нем предусмотрены настройки для изображения, а тот плагин не имеет настроек вообще.

Плавное увеличение картинки в WordPress - плагин Image Zoom

Скачайте плагин по этой ссылке: http://wordpress.org/extend/plugins/image-zoom/, установите его и активируйте. Как устанавливать плагин, Вы можете прочитать в уроке 10, поэтому установку пропустим. Перейдите "SL Plugins" -> "Image Zoom" -> "Параметры".

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

Урок 73. Плавное увеличение картинки в WordPress - плагин Image Zoom

  1. "Выбери тему - выбор темы. Каждая тема имеет свои особенности, поэтому подбирайте ту. которая Вам больше нравится. Всего на выбор три темы.
  2. "Время перелистывания слайд шоу" - Этот параметр задает время перелистывания слайд шоу, т. е. время задержки при переходе на другую картинку.
  3. "Автозапуск слайд-шоу" - если установлена галочка в чекбоксе, то при клике на изображение автоматически запустится слайд шоу.

На этом все. Плагин прост в настройке, да еще на русском языке.

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

До встречи в следующем уроке.

_________________________________К Урок 74. Корректировка шаблона WordPress

dvpress.ru

Плагин Image Zoom для кликабельности изображений на блоге — Тестируем шаблон

ekran-izobrazhenie-babochkiДоброго времени суток, уважаемый читатель. Рада новой встрече на блоге. Сегодня я хочу продолжить рассмотрение плагинов, а конкретно тех, которые могут помочь на сайте сделать кликабельность картинок в постах и на страницах. Дело в том, что в некоторых шаблонах, где на главную выводятся миниатюры, а в статьях они тоже не кликабельны, т.е. не открываются в новом окне, такой проблемы и не возникает, а вот в шаблонах, где картинка к статье открывается в новом  окне, тогда такой плагин как Image Zoom просто необходим, тем более, если на Вашем блоге не только одна картинка в каждой статье, а несколько…

Кажется, что плагинов с подобными функциями великое множество, но у меня (так уж случилось) на сайте есть статья только про плагин Fancy Gallery Lite, который помимо кликабельности может оформить еще несколько галерей…

На нескольких  моих экспериментальных блогах в настоящее время работает для кликабельности плагин Auto Highslide. Самое интересное (но неприятное), что данный плагин я не могу найти в админке  и в интернете вообще, чтобы использовать. Дело в том, что плагин удобен в использовании, настроек в нем нет, устанавливаете и всё… (Пишу  о плагине на всякий случай- возможно через какое-то время всё измениться и плагин можно будет найти для загрузки в админке.)

Еще один плагин из данной группы  Auto ThickBox Plus, некоторое время назад работал исправно, но стал давать сбой, и открывать картинку в новом окне, вместо кликабельности на странице установки. Теперь в админке находится только плагин  Auto Thickbox, который не выдержал проверки и просто завис при работе на блоге…

Таким образом, оказалось, что работающих корректно, плагинов такого эффекта действия раз-два  и обчёлся… Самый понятный в настройках, так как их не много, плагин  Image Zoom. Просто находите его в админке, устанавливаете и активируете. После активации в админке появляется новый раздел настроек SL Plugins. Первая страница называется «О программе», где находится сводная информация для плагинов разработанных на основе фреймфорка SL. (Для тех кто забыл что это означает: Фреймворк (неологизм от англ. framework — каркас, структура) — программная платформа, определяющая структуру программной системы; программное обеспечение, облегчающее разработку и объединение разных компонентов большого программного проекта.) На первой странице я ничего не меняла, просто посмотрела Smile

Image Zoom

А вот вторая страница как раз для редактирования. В ней имеется несколько вкладок.  В первой вкладке «Параметры» можно поменять текст для интерфейса (кнопок), далее

Image Zoom1

необходимо выбрать тему отображения изображений на блоге из четырёх имеющихся.

Image Zoom2

В принципе следующие настройки можно отметить, если Вы хотите сделать слайдшоу или отключить кнопки навигации и кнопки управления слайдером… А можно всё оставить по умолчанию.

Image Zoom3

На второй вкладке меня заинтересовала только информация «Плагин не работает», поэтому я и сделала скрин для просмотра. Остальные вкладки я просто просмотрела, ничего не изменяла, так как мне было вполне достаточно настроек для работы плагина Image Zoom на блоге. Кстати, последняя вкладка-это перечень плагинов со ссылками на сайт Wordpress, где можно скачать выбранный из списка плагин, ну и получить, естественно, о нём информацию.

Image Zoom4

Вот пожалуй и всё о плагине Image Zoom. На своем сайте я его использую, выбрав 3 тему для просмотра, слайдшоу не использую по понятной причине (если человеку нужен перевод скрина, а он вдруг будет постоянно сменяться другим изображением, то такое вряд ли кому-то понравиться.. :negative: ). О другом плагине с аналогичной функцией я постараюсь рассказать в следующей статье рубрики. Всем удачи! С Вами была Юлия, пока, пока.

:heart: Расскажи другу, пусть тоже дизайном займется :good:

Ещё статьи по теме...

Об авторе Юлия

Меня зовут Юлия. Этот сайт я начала из-за моей проснувшейся и непонятной любви к рассмотрению настроек шаблонов. Сама я пока создавать темы на Вордпресс не умею, но надеюсь, что это когда-нибудь случится. Пишите в комментариях свои вопросы: я обязательно отвечу. Ну и замечания тоже приветствуются-))

test-shablon.ru

WP Image Zoom | WordPress.org

Awesome image zoom for images in posts/pages and for WooCommerce products

WP Image Zoom is a robust, modern and very configurable image zoom plugin. It allows you to easily create a magnifying glass on your images, all from a very intuitive WP admin interface.

Your visitors will be able to see the beautiful details of your images. This will improve your users’ experience and hopefully also your revenue.

Features
Why should you upgrade to WP Image Zoom Pro?
Примітки

uk.wordpress.org

Featured Image Zoom | WordPress.org

Add the [zoom] shortcode to a page, post or custom post-type post. If the post has a featured image it will displayed on the page, and when you move the cursor over the image, the image will be magnified with the image viewport remains constrained to the dimensions of the original image.

on a mobile/touch device the image will also be zoomable, but as there is no hover state this is achieved by means of a pinch & zoom action.

On my site you can see a demo of the plugin.

Usage:

Ensure that your post/page has a featured image defined.

Use a [zoom] shortcode to your page.

Some optional shortcode parameters can also be used.

=size=The large image is used by default for the unzoomed image. Use the size parameter to use a different defined image size.

eg ‘[zoom size=thumbnail]’

=zoomsize=The full image is used for the zoomed overlay. This can be changed using the zoomsize shortcode parameter.

eg ‘[zoom zoomsize=large]’

The image size definitions used for the the unzoomed and zoomed images should have the same aspect ratio and cropping.

=zoomin=This can be used to tweak the level of zoom. The value must be a postitive integer. The default is 6 so if the zoom level results in too much magnification on hover, try a lower value.

eg ‘[zoom zoomin=2]’

  1. Upload the plugin folder to your ‘/wp-content/plugins/’ directory
  2. Активируйте плагин используя меню ‘Плагины’ в WordPress.
Installation Instructions
  1. Upload the plugin folder to your ‘/wp-content/plugins/’ di

ru.wordpress.org


Смотрите также

Prostoy-Site | Все права защищены © 2018 | Карта сайта