Про то, как сделать всплывающие картинки в WordPress, я уже писал в одной из своих статей, но там речь шла о применении специального плагина.
Логично будет рассмотреть способ получения аналогичного результата без установки дополнительных плагинов.
Именно об этом мы и поговорим в рамках сегодняшней статьи.
Наша задача заключается в том, чтобы вручную подключить скрипт всплывающих изображений, чем мы сейчас и займемся.
Всплывающие картинки в WordPress без плагина
Для начала этот самый скрипт необходимо скачать с его официального сайта.
При переходе по ссылке появится окно, в котором нужно кликнуть по ссылке Download:
Произойдет скачивание архива со скриптом.
Далее архив нужно распаковать и разместить на хостинге, для чего удобнее всего будет воспользоваться 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> |
Обратите внимание, что данный фрагмент кода необходимо вставлять перед закрывающим тегом < /head >, желательно рядом с уже подключенными скриптами.
Не забудьте в данном коде изменить путь, по которому доступны файлы скрипта, на свой.
Осталось добавить в ссылки на изображения, которые вы хотите отображать во всплывающем окне, дополнительную конструкцию:
data-lightbox="идентификатор" data-title="описание" |
Где содержимое аргумента data-lightbox является идентификатором группы изображений, а содержимое аргумента data-title — поясняющим текстом под всплывающим окном изображения.
Кстати, data-title можно и опустить, данный аргумент не обязателен.
Таким образом, ссылка на изображение в статье или на странице должна выглядеть следующим образом:
<a href="ссылка_на_файл_изображения" data-lightbox="идентификатор"><img src="ссылка_на_файл_изображения" alt="альтернативный_текст" />анкор</a> |
Следует добавить, что если вы хотите иметь возможность листать изображения внутри конкретной статьи, то всем ссылкам на данные изображения следует присваивать одинаковый идентификатор data-lightbox.
Таким образом, в данной статье мы рассмотрели довольно простой порядок действий, выполнив которые вы можете реализовать в своем сайте под управлением CMS WordPress всплывающие картинки без плагина.
Здравствуйте Владимир! Скажите пожалуйста,если я загружаю картинки на блог из стороннего сервиса, а не с своего хостинга, то скрипт будет работать на них тоже?
У меня сейчас стоит плагин wp-jquery-lightbox и он не увеличивает такие картинки!А этот скрипт?
Приветствую, Игорь! Я уверен, что скрипту все равно на URL изображения, все должно работать.
А по поводу размера изображения могу сказать следующее: скорее всего у вас для таких картинок не прописаны аргументы width=»» и height=»», которые определяют натуральную величину изображения, поэтому плагин не понимает, до какого размера его нужно увеличивать 😉
Спасибо Владимир!Сейчас проверю!
Пожалуйста! Надеюсь у вас все получится, Игорь 🙂 !
Я себе сделал с помощью статьи Борисова ❗
О какой статье Борисова вы сейчас говорите, Артём? Может и мне стоит её почитать…
Привет Володь! Я с первого раза и не понял, что еще за всплывающие картинки. Прошлую статью твою про плагин WP jQuery Lightbox прочитал только сейчас. У меня стоит плагин auto-highslide(я его «величаю», как плагин увеличения изображения.) 💡 Надо бы тоже на эту тему статью написать. Ну, а скрипт, конечно, лучше чем плагин.
Привет, Андрей! Единственной сложностью в случае со скриптом является необходимость прописывания ссылкам на изображения дополнительного аргумента, хотя я слышал это решается, но опять же с помощью плагина 🙄
Здравствуйте Владимир! Как всегда все просто и понятно, но все же я как то уже привык к своим плагинам, и без них пока никуда 😐 , но спасибо за очередную информацию. Да, заходите в гости, а то что то давненько вас не было. ➡
Пожалуйста, Андрей! Обязательно зайду к Вам в гости ➡
Ох, это в код нужно лезть, я пожалуй пас, а то уже ковырял там уже, то думал, что потеряю блог.
Все может быть, конечно! Но для этого и существуют некоторые меры предосторожности 😉
Доброй день…
На всех номерах в сайте: ( ссылка удалена ) фото номеров спускается в низ, подскажите пожалуйста, как можно исправить, плагины с админ панели в скринах ниже в ссылках))
ссылка удалена
ссылка удалена
ссылка удалена
Заранее буду очень благодарен…
С уважением,
Дмитрий
Добрый день, Дмитрий!
Судя по всему во всем виноваты эффекты плагина Easy Nivo Slider. Здесь есть два пути: заменить плагин другим, с подобными функциями и без подобного визуального эффекта, либо же придется лезть в CSS стили плагина, что сложнее.
Привет Владимир! Помнишь я спросил тебя или этот скрипт будет работать корректно с картинками, которые загружены на блог с стороннего сервиса?
Так вот я проверил и… ❓ ❓ Не работает!
Картинка просто открывается в левом углу страницы!!!!!
В принципе я думаю что это логично, ведь в коде мы прописали путь, по которому доступны файлы скрипта, а картинка то доступна совсем по другому пути!!!!!!!!!!!!! Она ведь не находится на нашем сервере!
Есть идеи и предложения? 😛
Привет, Игорь 😉 !
Сейчас специально по-новому проделал все последовательность действий и взял ссылку на первое попавшееся изображение из поиска Яндекса по картинкам, и у меня получилось, что лишь подтвердило мое изначальное предположение о том, что URL изображения не играет роли. Если скрипт подключен правильно, и для изображения прописан идентификатор, то все должно работать 🙂 То есть без разницы, по какому пути доступно изображение в интернете, главное — чтобы оно там было.
И еще вопрос: в описанном вами случае картинки, загруженные на хостинг, на котором находится блог, открывались во всплывающем окне или нет? Возможно просто скрипт не подключился 😉
Да Владимир, путь к директории скрипта был прописан с ошибкой! Сейчас заработало!
Но сейчас такой вопрос, если я вставляю картинку из интернета, то скрипт её не может увеличить, картинка только всплывает! То есть в редактировании картинки нет опции выбрать её размер, не в пример тому если я загружаю картинку в медиафайлы вордпресса!
Согласен, Игорь, в этом случае Вордпресс не располагает информацией о натуральной величине изображения, как в случае с загрузкой файлов через админку, соответственно и показывает их без увеличения 😕
По этой причине я и использую собственно загружаемые стандартными средствами самой Вордпресс изображения.
Понятно! Ну тогда для меня этот вариант не очень подходит! Ведь у меня поле для статей очень узкое и поэтому я обязан картинки увеличивать!
В любом случае я возьму во внимание данный пост, иди знай, может сменю как-нибудь шаблон, так пригодится этот скрипт!
Спасибо ещё раз!
Разумеется, все может быть 🙂
Пожалуйста, Игорь!
Возьму статью на заметку, надо попробовать.
Попробуйте, Татьяна, ничего сложного в этом нет 😉
Да, но все же работать с кодом придется 🙂
Согласен, но главное соблюдать меры предосторожности и все получится 🙂
А что будет твориться с снимком, когда люди не будут использовать Java?
Не предпочтительнее ли будет реализовать увеличение изображения к примеру средствами CSS3?
Действительно, Юрий, думаю предпочтительнее, но я в этом пока не разбирался.
Ну, все в ваших руках Владимир — не сразу Москва строилась.
Я просто уточнил — так как новички, которые будут читать публикацию смогут получить дополнение — и все же использовать CSS3 вместо джавы.
Здравствуйте. Как эту конструкция data-lightbox=»идентификатор» вставить в ссылки на картинки из галереи? Галерея же в статье добавляется шорткодом [gallery ids="7124,7123,6000"].
Владимир, здравствуйте!
Понимаю, что статья от 14 года, но я только сегодня ею воспользовался. Спасибо за описание, но есть одно уточнение о котором у Вас не сказано и без которого не работает. Во всяком случае, сделал все, как написано у Вас, не заработало. Уточнение нашел на англоязычном описании lightbox. Все заработало.
Уточнение в следующем:
должно быть перед закрывающим тегом (точнее, внутри тега ). А у Вас сказано, что все вместе перед тегом .
Владимир, еще раз, добрый день!
Забыл вчера еще один момент уточнить…
В скаченном архиве нет файла «jquery-1.11.0.min.js», который Вы указали в подключении скрипта, зато есть много других (о которых у Вас ни слова). Опять же, в английском описании сказано, что подключать нужно другой файл:
.
И еще, раз уж Вы подробно описываете весь процесс, было бы неплохо указать, что не все, что лежит в архиве нужно закачивать на хостинг, а только то, что лежит в папке «dist».
Ну, а в целом, еще раз, спасибо!
Здравствуйте! К Вордпрес подойдет надеюсь)) у меня такой вопрос по картинкам, можно ли сделать увеличение картинки с помощь css без джава, а то плагины грузят сайт, не люблю их)))
Здравствуйте!
Попробуйте изучить статью по этой ссылке.