Всплывающие картинки в WordPress без плагина

Всем привет!

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

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

Всплывающие картинки в WordPress без плагина

Для начала этот самый скрипт необходимо скачать с его официального сайта.

При переходе по ссылке появится окно, в котором нужно кликнуть по ссылке Download:

Всплывающие картинки в WordPress без плагина

Произойдет скачивание архива со скриптом.

Далее архив нужно распаковать и разместить на хостинге, для чего удобнее всего будет воспользоваться FTP-клиентом (как его настроить читайте здесь).

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

<script type="text/javascript" src="http://ваш_сайт/путь_к_директории_со_скриптом/имя_директории_со_скриптом/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://ваш_сайт/путь_к_директории_со_скриптом/имя_директории_со_скриптом/js/lightbox.min.js"></script>
<link rel="stylesheet" href="http://ваш_сайт/путь_к_директории_со_скриптом/имя_директории_со_скриптом/css/lightbox.css" type="text/css" media="screen" />

Обратите внимание, что данный фрагмент кода необходимо вставлять перед закрывающим тегом < /head >, желательно рядом с уже подключенными скриптами.

Не забудьте в данном коде изменить путь, по которому доступны файлы скрипта, на свой.

Осталось добавить в ссылки на изображения, которые вы хотите отображать во всплывающем окне, дополнительную конструкцию:

data-lightbox="идентификатор" data-title="описание"

Где содержимое аргумента data-lightbox является идентификатором группы изображений, а содержимое аргумента data-title — поясняющим текстом под всплывающим окном изображения.

Кстати, data-title можно и опустить, данный аргумент не обязателен.

Таким образом, ссылка на изображение в статье или на странице должна выглядеть следующим образом:

<a href="ссылка_на_файл_изображения" data-lightbox="идентификатор"><img src="ссылка_на_файл_изображения" alt="альтернативный_текст" />анкор</a>

Следует добавить, что если вы хотите иметь возможность листать изображения внутри конкретной статьи, то всем ссылкам на данные изображения следует присваивать одинаковый идентификатор data-lightbox.

Таким образом, в данной статье мы рассмотрели довольно простой порядок действий, выполнив которые вы можете реализовать в своем блоге/сайте под управлением CMS WordPress всплывающие картинки без плагина.

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

С уважением, Владимир Денисов!

Также стоит прочитать:

Красивая форма подписки feedburner для WordPress... Всем привет! Сегодня поменял внешний вид формы подписки на обновления моего...блога, реализованной через такой сервис Google, как feedburner. Именно по этой...причине в данной статье я расскажу о создании красивой формы подписки feedburner...для WordPress.
Картинки в комментариях. Плагин Comment Images... Здравствуйте, читатели моего блога! Речь в данной статье пойдет о плагине для...WordPress, который позволяет вставлять изображения в комментарии. Разумеется,...это не единственный способ выполнения данной операции, ведь уже размещенное в...интернете изображение можно вставить в комментарий с использованием ссылки не...него. Однако, для этого изображение должно быть размещено в интернете, а...какое-либо стороннее изображение, к примеру, с жесткого диска вашего компьютера,...добавить не удастся. В этом случае на помощь приходит плагин.
Галерея изображений стандартными средствами WordPr... Всем привет! В сегодняшней статье я хочу затронуть вопрос создания простой...галереи изображений для WordPress стандартными средствами данной CMS.

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

  • Здравствуйте Владимир! Скажите пожалуйста,если я загружаю картинки на блог из стороннего сервиса, а не с своего хостинга, то скрипт будет работать на них тоже?
    У меня сейчас стоит плагин wp-jquery-lightbox и он не увеличивает такие картинки!А этот скрипт?

  • Привет Володь! Я с первого раза и не понял, что еще за всплывающие картинки. Прошлую статью твою про плагин WP jQuery Lightbox прочитал только сейчас. У меня стоит плагин auto-highslide(я его «величаю», как плагин увеличения изображения.) 💡 Надо бы тоже на эту тему статью написать. Ну, а скрипт, конечно, лучше чем плагин.

    • Привет, Андрей! Единственной сложностью в случае со скриптом является необходимость прописывания ссылкам на изображения дополнительного аргумента, хотя я слышал это решается, но опять же с помощью плагина 🙄

  • Здравствуйте Владимир! Как всегда все просто и понятно, но все же я как то уже привык к своим плагинам, и без них пока никуда 😐 , но спасибо за очередную информацию. Да, заходите в гости, а то что то давненько вас не было. ➡

  • Ох, это в код нужно лезть, я пожалуй пас, а то уже ковырял там уже, то думал, что потеряю блог.

  • Доброй день…

    На всех номерах в сайте: ( ссылка удалена ) фото номеров спускается в низ, подскажите пожалуйста, как можно исправить, плагины с админ панели в скринах ниже в ссылках))

    ссылка удалена

    ссылка удалена

    ссылка удалена

    Заранее буду очень благодарен…

    С уважением,
    Дмитрий

    • Добрый день, Дмитрий!

      Судя по всему во всем виноваты эффекты плагина Easy Nivo Slider. Здесь есть два пути: заменить плагин другим, с подобными функциями и без подобного визуального эффекта, либо же придется лезть в CSS стили плагина, что сложнее.

  • Привет Владимир! Помнишь я спросил тебя или этот скрипт будет работать корректно с картинками, которые загружены на блог с стороннего сервиса?
    Так вот я проверил и… ❓ :mrgreen: ❓ Не работает!
    Картинка просто открывается в левом углу страницы!!!!!
    В принципе я думаю что это логично, ведь в коде мы прописали путь, по которому доступны файлы скрипта, а картинка то доступна совсем по другому пути!!!!!!!!!!!!! Она ведь не находится на нашем сервере!
    Есть идеи и предложения? 😛

    • Привет, Игорь 😉 !
      Сейчас специально по-новому проделал все последовательность действий и взял ссылку на первое попавшееся изображение из поиска Яндекса по картинкам, и у меня получилось, что лишь подтвердило мое изначальное предположение о том, что URL изображения не играет роли. Если скрипт подключен правильно, и для изображения прописан идентификатор, то все должно работать 🙂 То есть без разницы, по какому пути доступно изображение в интернете, главное — чтобы оно там было.
      И еще вопрос: в описанном вами случае картинки, загруженные на хостинг, на котором находится блог, открывались во всплывающем окне или нет? Возможно просто скрипт не подключился 😉

      • Да Владимир, путь к директории скрипта был прописан с ошибкой! Сейчас заработало!
        Но сейчас такой вопрос, если я вставляю картинку из интернета, то скрипт её не может увеличить, картинка только всплывает! То есть в редактировании картинки нет опции выбрать её размер, не в пример тому если я загружаю картинку в медиафайлы вордпресса!

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

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

          • Разумеется, все может быть 🙂
            Пожалуйста, Игорь!

  • Возьму статью на заметку, надо попробовать.

  • А что будет твориться с снимком, когда люди не будут использовать Java?
    Не предпочтительнее ли будет реализовать увеличение изображения к примеру средствами CSS3?

    • Действительно, Юрий, думаю предпочтительнее, но я в этом пока не разбирался.

      • Ну, все в ваших руках Владимир — не сразу Москва строилась.
        Я просто уточнил — так как новички, которые будут читать публикацию смогут получить дополнение — и все же использовать CSS3 вместо джавы.

  • Здравствуйте. Как эту конструкция data-lightbox=»идентификатор» вставить в ссылки на картинки из галереи? Галерея же в статье добавляется шорткодом [gallery ids="7124,7123,6000"].

  • Владимир, здравствуйте!
    Понимаю, что статья от 14 года, но я только сегодня ею воспользовался. Спасибо за описание, но есть одно уточнение о котором у Вас не сказано и без которого не работает. Во всяком случае, сделал все, как написано у Вас, не заработало. Уточнение нашел на англоязычном описании lightbox. Все заработало.
    Уточнение в следующем:

    должно быть перед закрывающим тегом (точнее, внутри тега ). А у Вас сказано, что все вместе перед тегом .

  • Владимир, еще раз, добрый день!
    Забыл вчера еще один момент уточнить…

    В скаченном архиве нет файла «jquery-1.11.0.min.js», который Вы указали в подключении скрипта, зато есть много других (о которых у Вас ни слова). Опять же, в английском описании сказано, что подключать нужно другой файл:
    .

    И еще, раз уж Вы подробно описываете весь процесс, было бы неплохо указать, что не все, что лежит в архиве нужно закачивать на хостинг, а только то, что лежит в папке «dist».

    Ну, а в целом, еще раз, спасибо!

  • Здравствуйте! К Вордпрес подойдет надеюсь)) у меня такой вопрос по картинкам, можно ли сделать увеличение картинки с помощь css без джава, а то плагины грузят сайт, не люблю их)))

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.