miki2Здравствуйте друзья! Пожалуй, каждый начинающий блоггер сталкивается с вопросом, как увеличивать картинки в постах, кликнув по ним мышкой. В данной статье, а возможно и в серии статей, я опишу три плагина, которые с успехом справляются с подобной задачей. Начнём с первого, который довольно продолжительное время был установлен на моих блогах.

Fancybox for WordPress

Плагин создан для создания и управления галереями, но очень хорошо справляется и с увеличением картинок в постах.

Установить плагин можно из админ-панели, загрузить из компьютера, закачать через FTP-клиент. Рассмотрим первый способ, самый лёгкий и быстрый. Откройте в админ-панели: Плагины/Добавить новый (стрелка 1). В строке поиска впишите: Fancybox for WordPress и нажмите клавишу "Enter" (стрелка 2). Кликнуть по кнопке "Установить" (стрелка 3).

Стрелкой 4 обозначена кнопка "Загрузить плагин" - это, если вы захотите воспользоваться вторым способом, т.е. загрузить плагин с компьютера.

Картинка кликабельна

Настройки плагина FancyBox for WordPress

В админ-панели откройте Настройки/Fancybox for WP. В открывшемся окне плагина, в горизонтальном меню, откройте "Apperance" (появление). В этом окне производятся настройки внешнего вида открывающегося, увеличенного изображения. На скриншотах я разместил переводы почти всех строк, но всё же давайте рассмотрим подробнее каждую настройку. Напоминаю: Картинки кликабельны.

Apperance

Border (граница) - Граница имеет толщину 1px, цвет HTML устанавливается любой, по желанию. Показ границы отключён по умолчанию.

Close Button (кнопка закрытия) - активируя радиокнопки в разных вариациях, можно разместить кнопку закрытия в любом углу изображения, а можно совсем убрать, сняв галочку в чекбоксе "Показывать кнопку закрытия". По умолчанию кнопка включена и расположена в верхнем правом углу.

Padding (набивка) - это поле вокруг картинки в виде рамки. Толщина и цвет заполнения этого поля по умолчанию: 10px и имеет белый цвет. Если поставить нулевое значение, заполнение слева, справа и сверху исчезнет. В этом случае может пригодиться включение показа границы.

Картинка кликабельна

 

Смотрим далее, в этом же окне.

Overlay Options (настройка затемнения фона) - полезная функция, с помощью которой есть возможность затенить задний план и  акцентировать внимание на изображение.

Title (название картинки) - Активируя ту или иную радиокнопку, настраивается внешний вид и позиция расположения названия картинки. Эта функция удобна для галерей и слайд-шоу. На блоге, подобном этому, где много технических картинок, такая функция практически не нужна. Когда этот плагин был установлен на блоге, функция "название снимка" была отключена.

Navigation Arrows (стрелки навигации) - Опять же, очень удобная функция при последовательном просмотре картинок, для фото-галерей и слайд-шоу.

Произведя все настройки в этом окне не забудьте нажать на кнопку "Save Changes" (сохранить изменения).  

Картинка кликабельна

Animations

Откройте окно "Animations" (Анимации). В этом окне три секции настроек, рассмотрим их.

Секция №1. Zoom Options (Опции увеличения) - по умолчанию эта опция включена и установлено время открытия, закрытия и открытия следующего или предыдущего изображения в миллисекундах.

Как видно из снимка, галочка в чекбоксе "Изменение прозрачности во время масштабирования" - снята. Особой разницы при открытии-закрытии картинки с выключенной и со включённой функцией я не заметил, а дополнительные скрипты подключаются. Мне эта функция не показалась полезной, поэтому я её отключил.

Секция №2. Transition Type (тип перехода) - интересная функция, для каждого действия предлагается по два эффекта: fade (увядающий) и elastic (эластичный). Поэкспериментируйте с этими эффектами, может вам понравится, кстати, по умолчанию установлен эффект: Увядающий. Первое время именно этот эффект был установлен в моих настройках, но потом, всё по той же причине с подключающимися скриптами, я установил значения: none. Галерейные эффекты в постах, считаю неуместными, хотя, о вкусах...

Секция №3. Easing (ослабление) - предлагается 30 эффектов смягчения, но даже автор плагина предупреждает о подключении дополнительного скрипта при активации этой функции. Можете так же, поэкспериментировать с предложенными эффектами, не забывайте только сохранять настройки и обновлять страницу каждый раз после очередного изменения настроек. 

Картинка кликабельна

Behavior

Откройте окно Behavior (поведение). В этом окне можно настроить поведение открывшейся, увеличенной картинки. Рассмотрим.

1. Auto Resize to Fit (автоподгонка по размеру). Дословный перевод: (Масштабирование изображения, чтобы поместиться в окне просмотра (по умолчанию: Вкючено). Отключая и подключая эту функцию - различий не заметил, может из-за небольшого размера испытуемой картинки, но всё же, решил оставить галочку на месте.

2. Center on Scroll ( центр при прокрутке). Перевод: (Держите образ в центре окна браузера при прокрутке (по умолчанию: Включено). При активированной функции увеличенная картинка всегда будет находиться в центре окна браузера, даже при прокрутке страницы колёсиком мыши. При деактивации - картинка при прокрутке вверх или вниз - уплывёт вместе со страницей.

3. Close on Content Click (Закрывать при нажатии на контент). Перевод: (Закрыть FancyBox, нажав на изображение (по умолчанию: выключено). Если навигационные стрелки присутствуют на картинке, то эту функцию можно не включать. У меня стрелки были отключены, поэтому эта функция всегда была включена. Картинка закрывалась после клика по ней. Поэкспериментируйте, как вам больше будет нравиться.

Картинка кликабельна

4. Close on Overlay Click ( закрывать кликнув на наложение). Перевод: (Закрыть FancyBox, нажав на наложение (затемнение) окружающее картинку (по умолчанию: Включено). 

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

5. Close with "Esc" (Закрыть с "Esc"). Перевод: (Закрыть FancyBox, когда клавиша "Esc" нажата (по умолчанию: Включено). Особой пользы не вижу, хотя, и вреда тоже.

6. Cyclic Galleries (Циклические галереи). Перевод: (Это сделает галереи циклический, что позволяет сохранить нажатием вперёд / назад (по умолчанию выключено). Объяснить не могу, поскольку не вдавался в подробности создания и настроек галерей.

7. Mouse Wheel Navigation (Колесо мыши навигация). Перевод: (Позволяет посетителям перемещаться в галерее с помощью колесика мыши (по умолчанию выключено).

Картинка кликабельна

На этом настройки FancyBox закончены, остальные опции относятся только к галереям, а у нас была другая цель - настроить плагин для увеличения картинок в постах.

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

 

Удачи Вам!

 

©mkoven