Привет уважаемым читателям. Данная статья будет посвящена одному из самых популярных плагинов для вывода изображений — Fancybox for WordPress. Вообще говоря, подобных плагинов существует целое семейство. FancyBox, Easy FancyBox, Lightbox Plus ColorBox, Lightbox Evolution и прочие, как премиум так и бесплатные. Мы наверняка, еще в будущем, подробно рассмотрим некоторые из них.
Итак, разговор пойдет о бесплатном, очень популярном, достаточно хорошо и понятно настраиваемым плагине для эффектного вывода изображений на страницах вашего сайта. Плагин использует jQuery и не требует вставки никаких дополнительных кодов, а начинает работать автоматически сразу после активации. То есть вам будет достаточно кликнуть на любое изображение вставленное вами на странице и увидеть как плагин тут же эффектно его увеличит и откроет в новом окне. Текущая версия плагина на момент обзора — 3.0.2.
Установка и активация ничем не отличаются от большинства прочих плагинов загружаемых wordpress.org. После активации плагина ищем в админке — Параметры — Fancybox for WordPress. Попадаем на страницу настроек, имеющую десять вкладок в верхней части первой страницы. Не пугайтесь их количества. Важных для вас — всего три.
Настройки плагина
Для большинства настроек предусмотрены стандартные чекбоксы типа default: on/off. В некоторых случаях они по умолчанию включены или выключены.
Info
Информация о разработчиках и общие рекомендации по плагину Fancybox for WordPress.
Appearance
Border — настройка цвета и включение (по умолчанию выключена) рамки выводимых изображений. Close Button — настройка кнопки закрывания окна с изображением, ее положения (верху, внизу, слева, справа) и цвет для внутреннего отступа. Overlay Options — настройка (цвет и прозрачность) затемняющего, заднего фона во время вывода изображения. Title — заголовок и настройка его цвета и места вывода относительно картинки. Navigation Arrows — показ стрелок навигации (перелистывания).
Animation
Zoom Options — настройка скорости анимации и прозрачности выводимых картинок. Transition Type — тип (затухание или растягивание) используемых эффектов при закрытии и открытии изображения. Easing — подробный выбор одного из множества типов шаблонов для эффектов.
Behavior
Auto Resize to Fit — автоматически растягивать изображение под размер экрана. Center on Scroll — центрировать картинку в центре экрана. Close on Content Click — закрытие картинки кликом в любом месте на ней. Close on Overlay Click — закрытие картинки кликом по фону. Close with «Esc» — закрывать картинку нажатием соответствующей клавиши на клавиатуре. Cyclic Galleries — зациклить показ картинок по кругу в рамках одной галереи. Mouse Wheel Navigation — листать картинки в галерее колесиком мыши.
Gallery
Gallery Type — выбираем один из способов показа галерей. По умолчанию выбран первый — прокрутка галереи всех изображений в одном посте. То есть, если у вас в одной записи присутствуют несколько изображений, то открыв любой из них вы можете листая, просмотреть и все остальные. Другие три пункта — для более тонкой настройки вывода изображений в галереях. Рекомендую оставить первый пункт.
Miscellaneuos
Dimensions — Автоопределение размеров и ручная настройка размера для выводимых изображений. Load JavaScript in Footer — дополнительная настройка для использования с плагином Parallel Load. Callbacks — включение функции обратного вызова.
Extra Calls
Здесь вы можете добавить вызовы FancyBox, с дополнительными настройками. Для получения информации используйте API FancyBox.
Troubleshooting
[wp-pic type=»plugin» slug=»fancybox-for-wordpress» align=»right» ]
Рекомендации автора плагина по возможным проблемам. Суть сводится к известному методу поочередного отключения прочих плагинов для выявления причин конфликта.
Support
Поддержка плагина. Автор отсылает всех к FAQ на официальной странице плагина. Или просит отправлять ему сообщения о проблемах с указанием сайта и подробным описанием.
Uninstall
Для полного удаления всех следов плагина из таблиц данных WordPress используйте чекбокс на этой странице.
Самые необходимые настройки плагина Fancybox for WordPress как видите, собраны во вкладках Appearance, Animation и Behavior. Кстати, именно с помощью них можно добиться соответствия визуального оформления изображений с общим дизайном вашего сайта.
Остальные настройки автор рекомендует еще на странице Info, не трогать без особой необходимости и хорошего понимания своих действий.
Статья взята из открытых источников: http://wpnice.ru/fancybox-for-wordpress-krasivo-vyvodim-izobrazheniya/
Дополнение
Плагин создан для создания и управления галереями, но очень хорошо справляется и с увеличением картинок в постах.
Установить плагин можно из админ-панели, загрузить из компьютера, закачать через 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 закончены, остальные опции относятся только к галереям, а у нас была другая цель — настроить плагин для увеличения картинок в постах.
Вот так всегда, хотел в одной статье про три плагина рассказать, а видимо придётся делать серию постов про плагины для увеличения изображения кликом мыши. До встречи в следующих постах.
Статья взята из открытых источников: http://myvirtualput.ru/plaginy-dlya-uvelicheniya-kartinok.html
И на напоследок видеоролик: FancyBox для WordPress
Поделиться статьей с друзьями: