Плавное увеличение изображений в WordPress. Плагин WP Highslide

Logo
Плавное увеличение изображений в Wordpress. Плагин WP Highslide

Здравствуйте уважаемые читатели блога dmitriydenisov.com. В этой статье я хотел бы рассказать вам об очень интересном расширении для WordPress под названием  WP Highslide. Этот плагин позволяет реализовать красивое плавное увеличение изображений на сайте, что создает впечатление, как будто изображения плавно выезжают. Данный способ намного лучше стандартного, в котором при нажатии по картинке она просто открывается в оригинальном размере. Если у вас блог соответствующей тематики и на нем имеется множество картинок, то данное решение для создания красивого плавного увеличения изображений на сайте WordPress именно для вас.

Плавное увеличение изображений в Wordpees

Как я уже говорил, реализовать эффект выезжающих изображений на своем сайте WordPress мы будем при помощи специального плагина WP Highslide. Первым делом вам нужно скачать последнюю версию WP Highslide с официального сайта Wordrpess либо воспользоваться моей версией плагина. Затем как обычно распаковываем архив и копируем содержимое в папку с WP плагинами:

/wp-content/plugins/

Далее нам нужно активировать плагин. Для этого переходим в Административную панель – Плагины, находим там наш плагин для плавного увеличения изображений под названием WP Highslide и активируем его. После этого у вас в административной панели сайта во вкладке «Параметры» появится новый пункт под названием WP-Highslide, в котором вы сможете произвести некоторые настройки эффекта выезжающих изображений. Но прежде чем перейти к настройкам, давайте рассмотрим, как добавить изображение на свой сайт WordPress и реализовать для него эффект плавного увеличения.

Реализация плавного увеличения изображений на сайте WordPress

После установки и активации плагина WP Highslide вы сразу можете начать его использовать на своем сайте с настройками, установленными в нем по умолчанию. Первым делом нам нужно подготовить два изображения. Одно большое, которое будет показываться после приближения, и одно чуть поменьше, которое будет отображаться на сайте изначально. Далее копируем эти изображения к себе на сайт.  Рекомендую создать вам отдельную папку в корне сайта и сохранять свои изображения там. После этого создаем новую статью или открываем на редактирование уже существующую, переходим в редакторе в режим HTML, ищем там новую кнопку под названием Highslide и жмем по ней. В результате у вас появится окно примерно следующего вида:

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

http://dmitriydenisov.com/images/1.jpg

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

http://dmitriydenisov.com/images/2.jpg

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

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

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

<highslide image="http://dmitriydenisov.com/images/1.jpg" thumbnail="http://dmitriydenisov.com/images/2.jpg" altdesc="Альтернативный текст" captiontext="Заголовок для изображения" />

Теперь давайте перейдем в Административную панель – Параметры – WP-Highslide и рассмотрим настройки данного плагина.

Глобальные настройки плагина WP Highslide

Настроек данный плагин для плавного увеличения изображений имеет не очень много. В моей версии их всего 4.

  • Use Quicktag to insert HIGHSLIDE tag and parameters – одним словом активация данного пункта добавляет кнопку Highslide в редактор в режиме HTML.
  • Display Highslide Caption Box (Override tag: show_caption=»n|y») – Отвечает за отображение заголовка под увеличенным изображением. Если вам это не нужно, то смело отключаем данную функцию.
  • Display CLOSE Link in Caption Box(Override tag: show_close=»n|y») – Отображение кнопки «CLOSE». Если отключить данный пункт, то уменьшение изображения к исходному размеру производится простым нажатием на большую картинку.
  • Display NEXT/PREVIOUS Links in Caption Box(Override tag: show_prv_next=»n|y») – Отображение кнопок «Следующее» и «Предыдущее». Если вам данные кнопки не нужны, то смело оставляем все как есть, так как по умолчанию данная функция WP Highslide отключена.

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

К примеру, мы хотим, чтобы плавное увеличение изображения на сайте WordPress происходило без кнопки «CLOSE». Для этого открываем нужную нам статью, переходим в режим HTML, ищем код нужного нам изображения и перед закрывающим тегом добавляем код:

show_close="n"

На практике это будет выглядеть примерно так:

<highslide image="http://dmitriydenisov.com/images/1.jpg" thumbnail="http://dmitriydenisov.com/images/2.jpg" altdesc="Пробное изображение" captiontext="Заголовок для изображения" show_close="n" />

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

Надеюсь, вы поняли всю суть изложенного материала и я перехожу к завершению статьи. Сразу хочу напомнить, что данный плагин добавляет Java скрипты на ваш сайт, что может немного замедлить его работу. Но учитывая эффект, который дает данное расширение, можно немного пожертвовать скоростью сайта. Но можно сделать проще и ни от чего не отказываться. Для этого просто оптимизируйте свой сайт WordPress. Подробнее об этом вы можете прочитать в статье «Оптимизация и ускорение сайта WordPress» и «Ускорение загрузки сайта».

На этом все. Удачи вам и до скорых встреч на страницах блога dmitriydenisov.com

Обнаружили ошибку? Выделите ее и нажмите Ctrl+Enter

Комментарии 32

  • ar2r

    Прекрасная статья. единственное не хватает живого примера. кнопочки Демо например =)

  • golubevod

    Все хорошо расписано!

  • gunsvd

    Автор, Вы достойны уважения!

  • Дмитрий

    Спасибо!
    Стараюсь быть на уровне и писать максимально качественно и понятно.

  • Elena

    Здравствуйте Дмитрий.Вы действительно достойны уважения!У меня к Вам небольшая просьба.Я новичок,помогите разобраться почему у меня не прикрепляется картинка на сайте,мучаюсь третий день,все остальное получилось:ваш урок » Плавное увеличение изображений в Wordpres».Очень жду ответа.

  • Дмитрий

    Вам нужно проверить пути к изображению. Возможно на изображение ведет некорректная ссылка.
    Для проверки просто зайдите в редактор и перейдите в режим HTML. Для верности скопируйте ссылку на изображение и введите ее в адресную строку браузера. В результате у вас должна открыться соответствующая картинка.
    Если ничего не получится — пишите на e-mail. Не забудьте указать адрес сайта.

  • Андрей

    Уважаемый автор.По Вашей статье все установил,но увы работает не так ,как хотелось бы.Вместо того ,чтоб происходило плавное увеличение картинки,картинка открывается в другом окне(при этом ,она конечно увеличивается),но назад ее можно возвратить ,только ,путем отмены действия(то есть нажать стрелку назад) .Как сделать чтоб происходило плавное увеличение без перехода на другую страницу?
    Спасибо.

  • Дмитрий

    Андрей, стоит перепроверить настройки плагина и правильность кода для всплывающего изображения.
    Причиной проблемы также может быть неработоспособность плагина или его несовместимость с используемой версией WordPress.
    Также советую испробовать мою версию плагина, ссылку на который можно найти в начале статьи. Часто бывает, что плагины с wordpress.org не работают, поэтому я иногда добавляю к статьям свои версии во избежание подобных ситуаций.

  • Verex

    Принцип понятен (действительно, стало работать только после того как установил ваш плагин), но как применить это к уже имеющимся в тексте на сайте фотографиям, не представляется понятным для непрофессионалов.

  • Дмитрий

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

  • Verex

    Да, и загружать только через фтп; пытался через вордпресс как объяснялось, не получается. То есть «вставить в текст» не выходит, надо заранее страницу на ячейки разбивать, где текст, где фотографии и уже к загруженным через фтп в каждую отведённую для этого ячейку фотографиям добавлять этот код. Ну хорошо хоть так можно. Странно другое — почему во-первых фотографии не видны в визуальном редакторе, а во-вторых перестают быть видны и в хтмл-редакторе после каждого обновления? То есть со страницы никуда они не деваются, но код в редакторе виден «через раз».

  • Verex

    Нет, хуже даже. Код введённый и опубликованный и сохранённый исчезает как только закрываешь страницу администрирования. Открыл заново — никаких хайслайдов как не бывало. В общем, нужны видимо годы опыта чтобы получалось или горы денег чтобы платить тем кто умеет; поскольку нет ни того, ни другого, придётся от использования скрипта-фантома отказаться.

  • Дмитрий

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

  • Verex

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

  • Дмитрий

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

  • Chrome

    Спасибо.
    Подошел, правда, только ВАШ плагин. :)

  • Дмитрий

    Отлично!
    Моя плагин, если не ошибаюсь, немного переделан, поэтому без проблем работает всегда.
    Пользуйтесь на здоровье!:)

  • Kolobokk

    Спасибо! Очень хорошее и понятное описание. В сети мало контента подобного качества.

  • Олег

    Уважаемый Автор, помогите:
    После обновления WordPresse до версии 3.3 кнопка Highslide в редакторе в режиме HTML исчезла. Как её восстановить???

  • Дмитрий

    Kolobokk, спасибо! Буду стараться и дальше писать максимально качественно, кратко и понятно.
    Олег, думаю, что есть два варианта:
    1. Восстановиться с резервной копии и пока не обновлять WordPress.
    2. Подождать выхода обновленной версии плагина. Возможно, текущая версия не совместима в WordPress 3.3

  • Вадим

    Спасибо за статью!
    А как убрать ссылку на скачивание фотографии?

  • Дмитрий

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

  • Вадим

    К сожалению в этой версии плагина есть ссылка на скачивание фотографий.
    Знать бы еще какие именно участки кода и как их нужно закомментиравать?

  • Дмитрий

    Если хотите, то напишите мне в «Контакты» и я постараюсь по свободе помочь вам.

  • Дмитрий

    Здравствуйте,Дмитрий!Снова к Вам за консультацией.Комментарий немного не по теме,но более подходящей темы для своего вопроса я,к сожалению, не нашел.Делаю сайт на Joomla 1.5 + JomSocial 2.2.4.Нужно,чтобы при наведении курсора(не клике,а именно наведении) на аватарку пользователя на главной странице она отображалась в всплывающем окне вместе с краткой информацией.что посоветуете?

  • Дмитрий

    Здравствуйте, Дмитрий! Я вижу 3 способа решения данной задачи. 1. Найти готовый плагин (компонент), который делал бы то, что Вам нужно. 2. Найти скрипт модальных окон и интегрировать его в шаблон. Затем в коде прописать, что нужно выводить. 3. Написать все самому, как скрипт всплывающих окон, так и то, что нужно выводить. На мой взгляд, наиболее подходящим будет второй вариант. Плагин Вы вряд ли такой найдете, а писать все самому тоже не выход, поэтому остается только найти скрипт всплывающих окон и интегрировать его в сайт. То есть, второй вариант.

  • Татьяна

    Почему-то заветная кнопочка в режиме ЧТМЛ так и не появилась, хотя в настройках этот плагин появился/ Скачивала этот плагин с двух разных сайтов, кнопки нет/ Почему, интересно?
    Ещё, Дмитрий, скажите, а зачем нужен код
    JAVASCRIPT settings
    Edit the javascript below to customize highslide
    в глобальных настройках плагина, его не надо устанавливать в файлы сайта?

  • Дмитрий

    Возможно, плагин уже не обновляется, поэтому несовместим с текущей версией WordPress. Я сейчас использую другой под названием Lightbox Plus. Он работает по другому, но работает отлично. Для моих целей как раз подходит. Если хотите, то можете использовать его. Возможно в будущем напишу отдельную статью по установке и настройке Lightbox Plus. Что касается "JAVASCRIPT settings Edit the javascript below to customize highslide", то это скорее всего для пользовательской настройки скрипта. Скорее всего данная настройка не понадобится в работе, поэтому ее можно оставить по умолчанию во избежание проблем (ошибок в коде).

  • Булат

    У меня вот какая проблема устанавливаю плагин WP-Highslide но в НТМЛ редакторе у меня не появляется ни какой кнопки как это можно исправить. Уже пробовал и вашу версию ставить не помогло, а может быть есть какой нибудь плагин похожий на WP-Highslide.

  • Дмитрий

    Проблем может быть несколько. 1. Перестал работать сам плагин (несовместимость с текущей версией движка и т.д.). Оптимальное решение — искать аналогичный плагин. 2. На сайте установлен плагин, который заменяет функционал редактора, например, старые версии Faster Image Insert и т.д.. В связи с этим кнопки не будут добавляться в редактор. Выход — отключить плагин, который воздействует на редактор WordPress. Это были основные две проблемы, которые чаще всего встречаются. Рекомендую поискать замену WP-Highslide. Лично я использую на своих сайтах плагин Lightbox Plus. Конечно, это будет не плавное увеличение изображений, но для всплывающих картинок вряд ли удастся найти что-то лучше. Одним словом, в качестве решения проблемы рекомендую использовать Lightbox Plus.

  • Булат

    Дмитрий, спасибо огромное за подсказку:)
     

  • Дмитрий

    Всегда рад помочь:) Если возникнут другие вопросы — обращайтесь.

Оставить комментарий

отменить ответ