Делаем всплывающее изображение скриптом Lightbox
Предлагаю вам установить на свой сайт оригинальный скрипт Lightbox, который по клику на изображения выводит их поверх контентной части с затемнением заднего фона.
Ставить будем на примере сайта под WordPress, но сам скрипт позволяет себя установить на любую CMS.
Пример можете глянуть на странице Как сделать виджет сайта в браузере Яндекс, кликнув по изображению в статье.
Ранее я рассматривал плагины FancyBox for WordPress и WP-lightpop, которые работают на основе рассматриваемого в статье скрипта. Однако плагины обладают зачастую лишним функционалом, который не нужен большинству из нас. А это лишняя нагрузка сайта.
Поэтому, оптимизируя работу сайта очередного клиента, я поставил оригинальный скрипт Lightbox, после чего начал ставить его всем, включая свои проекты. Теперь продвижение сайта станет чуточку проще, т.к. внутренние факторы оптимизации были приведены в надлежащий порядок.
Не думайте, что поставить данный скрипт большая проблема. На самом деле вы будете дольше читать данную статью, чем подключать Lightbox к сайту.
Устанавливаем скрипт Lightbox на сайт
Запомните!!! Делайте резервные копии файлов, с которыми работаете. Я не несу ответственности за ваши действия.
Качаем последнюю версию скрипта на официальном сайте http://www.lokeshdhakar.com/projects/lightbox2/.
Далее необходимо подключить его к шаблону. Все инструкции на английском присутствуют на странице со скриптом. Но, если вы не очень понимаете англ, то я поясню "на пальцах" что и куда прописывать для WordPress.
Для начала, скачанный архив распаковываем и получаем папку lightbox. Ее необходимо закачать в вашу папку с шаблоном. Делаем это по ftp-соединению. Сделали...
Теперь открываем файл header.php шаблона и до закрывающего тега </head> вам необходимо поместить такие строки:
Здесь мы указали, что файлы скрипта лежат в папке с шаблоном по такому-то пути.
Хочу обратить ваше внимание, что первой строкой мы подключали jQuery к сайту. Если у вас ранее данная библиотека была подключена, то повторно делать этого не нужно. Максимум что может произойти - это перестанет работать какой-то функционал на сайте, т.к. пойдет конфликт из-за версий jQuery. Паниковать не нужно: просто удалите эту строку из кода выше.
На этом с подключением скрипта все. Остается задать всем вашим изображениям на сайте необходимый класс, чтобы скрипт знал, что по клику на них он начинает работу. Для WordPress это делается вставкой кода в файл функций шаблона functions.php. Открываем его и в самом начале сразу после знака <?php и с новой строки вставляем:
// lightbox задаем класс изображениям
add_filter('the_content', 'addrellightbox');
function addrellightbox($content) {
global $post;
$pattern = "/(.*?)title=('|\")(.*?)('|\")(.*?)<\/a>/i";
$replacement = '$7title=$8$9$10$11';
$content = preg_replace($pattern, $replacement, $content);
$content = str_replace("%LIGHTID%", $post->ID, $content);
return $content;
}
Все. Теперь при клике на изображение оно откроется во всплывающем окне с затемнением фона, а не в новом окне. При этом, если в статье несколько изображений, то их можно будет перелистывать в одном всплывающем окне стрелками на клавиатуре или мышкой.
Правим CSS
После подключения данного скрипта к сайту у вас могут в статьях "поползти" изображения, т.е. на них будет наползать текст. Это решается вставкой одной строки в файл style.css шаблона:
a.lightbox {position: static;}
Теперь все будет ОК.
Так же обратите внимание, что сам скрипт Lightbox имеет свой файл стилей. Т.е. у вас есть возможность сделать стиль всплывающих изображений полностью под стиль своего сайта.
Поздравляю с установкой скрипта!