Всплывающие картинки в 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 для... В данной статье вы найдете информацию о том, как создать красивую форму подписки...Feedburner для WordPress.
Как вставлять картинки в комментарии WordPress... Речь в данной статье пойдет о плагине для WordPress, который позволяет вставлять...изображения в комментарии. Разумеется, это не единственный способ выполнения...данной операции, ведь уже размещенное в интернете изображение можно вставить в...комментарий с использованием ссылки не него. Однако, для этого изображение...должно быть размещено в интернете, а какое-либо стороннее изображение, к примеру,...с жесткого диска вашего компьютера, добавить не удастся. В этом случае на помощь...придет рассматриваемый ниже плагин.
Простой способ изменить фон для WordPress сайта... Сегодняшняя статья будет наиболее интересна новичкам, которые хотят изменить или...установить фон для своего сайта на WordPress, ведь в ней я расскажу об одном быстром и...простом способе сделать фон для своего интернет-ресурса.

Комментарии 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 для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.