Увеличение картинок при нажатии плагином Easy FancyBox

Блог Владимира Шишкова

Как создать, раскрутить и зарабатывать на своем блоге

Работа с блогом

Увеличение картинок при нажатии плагином Easy FancyBox

Увеличение картинок при нажатии плагином Easy FancyBox
5 (100%) 109 голос[ов]

Увеличение картинок при нажатии плагином Easy FancyBox

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

Плагин Easy FancyBox

Для того, чтобы при нажатии на любую из картинок увеличивать их размер, установим плагин Easy FansyBox (скачать). После, чего его нужно установить и активировать.

Установленный плагин Easy FansyBox

Рис. 1

Теперь, после установки и активации плагина, переходим  в его настройки (Рис.1-п.2).

Внимание ! Читайте статьи:
 Консоль WordPress и изменение ее внешнего вида для удобства
• Боковая панель WordPress и ее настройка для удобства пользования
 ●  В браузере Google Chrome ссылки не открываются в новой вкладке. Решение!

 

Размеры изображений

Настройки плагина Easy FansyBox

Рис. 2

Настроек в плагине довольно много и все можно настроить под свои желания. На (Рис.2) показаны стандартные размеры изображений. В принципе их можно так и оставить.

Сам плагин, частично переведен на русский язык. Но для удобства его использования, лучше перевести его полностью.

Перевод на русский язык

Перевод плагина на русский язык

Рис. 3

Для перевода воспользуемся Google переводчиком. В любом месте, щелкаем правой кнопкой мыши и в появившемся окне выбираем “Перевести на русский” (Рис.3-п.1).

Загрузка файлов

Загрузка файлов по месяцу и году

Рис. 4

Далее, в пункте “Загрузка файлов” галку “Помещать загруженные мной файлы в папки по месяцу и году” лучше оставить (Рис.4-п.1). Это даст возможность в будущем, находить нужные изображения, которые будут распределены по месяцам и годам.

Включение плагина для изображений и видео

Включение плагина для изображений и видео

Рис. 5

В следующем, блоке “Средства массовой информации” (Рис.5-п.1), мы можем включить плагин Easy FansyBox для различных изображений, документов и видео.

Как видно на (Рис.5), плагин работает с различными форматами файлов. Например, если Вам нужно чтобы увеличивались при нажатии загруженные на блог документы в формате .PDF, нужно только поставить галочку перед нужным форматом.

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

Данная функция будет очень удобна для читателя, так как ему не нужно будет переходить в YouTube или Vimeo, чтобы посмотреть видео-ролик в большом формате. Все это он сможет посмотреть непосредственно с блога. Что очень удобно. При этом, просмотрев видео он останется на блоге и не уйдет в YouTube или Vimeo. Согласитесь очень полезная функция.

Также, для плагина существует и платная расширенная версия Pro, которую можно приобрести перейдя по ссылке (п.2). Но из моей практики, бесплатной версии вполне достаточно.

Для того, чтобы создать красивую увеличивающуюся картинку существует блок “Наложение”, который дает интересные возможности:

  1. Показать наложение вокруг контента, открытого в FancyBox (затемняет пространство вокруг увеличенной картинки после нажатия на нее) (п.3)
  2. Закройте FancyBox при нажатии на оверлей (при нажатии в любом месте кнопкой мыши, кроме картинки, возвращает ее в исходное положение) (п.4)
  3. Непрозрачность и цвет (можно ввести значение непрозрачности и цвет вокруг увеличенной картинки) (п.5)
  4. Эффект прожектора (создает красивый эффект вокруг увеличенной картинки, возможен только в Pro-версии) (п.6)

Настройки параметров всплывающего изображения

Настройки параметров всплывающего изображения

Рис. 6

Всплывающей картинке можно придать различный внешний вид. Все эти настройки находятся блоке “Окно” (Рис.6):

  1. Показать (Х) кнопку закрытия (в всплывающем окне-картинки ставит крестик в правом верхнем углу для его закрытия) (п.1)
  2. Цвет текста и границы (можно выставить нужный цвет текста и рамки окна) (п.2)
  3. Размеры (настройка размера рамки и отступы от окна-картинки) (п.2)
  4. Поведение (установка галки для закрытия окна при нажатии клавиши Esc и скорость открытия и  закрытия окна) (п.3)

Соответственно все параметры можно менять под себя. И всегда можно вернуться к параметрам по умолчанию, которые записаны в плагине.

Совместимость браузера и устройства

Совместимость браузера и устройства

Рис. 7

Смотрим настройки дальше, они дают следующие возможности (Рис.7):

  1. Авто всплывающее окно (при открытии страницы появляется всплывающее окно с нужной Вам информацией или подпиской, доступна в Pro-версии) (п.1)
  2. Совместимость браузера и устройства (включает правила совместимости с браузером IE 8) (п.2)
  3. Приоритет сценария FancyBox (лучше оставить по умолчанию) (п.3)
  4. Продвинутый (используется только в  Pro-версии) (п.4)

Настройка всплывающих изображений

Настройка всплывающих изображений

Рис. 8

Следующий блок “Изображения”, где можно выставить (Рис.8):

  1. Автоматическое распознавание (можно вписать форматы используемых изображений) (п.1)
  2. Поведение (создает эффекты появления всплывающего окна-картинки) (п.2)
  3. Прозрачность исчезает (исчезает прозрачность области вокруг всплывающего окна-картинки) (п.3)
  4. Закрыть FancyBox когда содержание щелкнул (когда щелкаешь на всплывающей картинке, она возвращается в исходный вид) (п.4)

Оформление всплывающего окна

Оформление всплывающего окна

Рис. 9

Следующие настройки дают возможность (п.9):

  1. Показать заголовок (показывает заголовок картинки, который берет из атрибутов) (п.1)
  2. Скрыть/показать название (дает возможность скрывать название заголовка при наведении мыши, только в Pro-версии) (п.2)
  3. Автогалерея (дает возможность создавать галерею из фотографий и картинок) (п.3)
  4. Показать стрелки навигации по галерее (п.4)
  5. Стрелки клавишами просматривать галерею (п.5)
  6. Сделать галереи циклическими (перелистывание кнопками) (п.6)
  7. Слайд-шоу (создание слайд-шоу из фотографий и картинок, только Pro-версия) (п.7)

Замечательно. Когда мы внесли все необходимые изменения. Обязательно нажмите на кнопку “Сохранить изменения”, чтобы все параметры вступили в силу.

Теперь, когда все готово. Смотрим, что у нас получилось.

Готовое всплывающее окно-картинка

Готовое всплывающее окно-картинка

Рис. 10

Как мы видим на (Рис.10), вокруг всплывающего окна-картинки мы видим затемнение. В правом верхнем углу окна стоит (Х) (п.1). Внизу окна, название картинки (п.2). Если мы кликаем мышью в пустом пространстве (п.3), окно закрывается.

Прекрасно. Это и требовалось доказать. Тем самым, мы добились того, что читателям блога будет будет удобнее пользоваться блогом и получать полезную информацию.

Буду рад Вашим вопросам и комментариям

Успехов Вам
С уважением Владимир Шишков

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Увеличение картинок при нажатии плагином Easy FancyBox
5 (100%) 109 голос[ов]

Работа с блогом

Рекомендую статьи

Добавить комментарий

Войти с помощью: 

Ваш e-mail не будет опубликован.



Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: