Хотите разместить в блоге фотоальбом? Не проблема. Фотографии можно вставить в любой пост, правда, просматривать их при этом будет не очень удобно, да и размер такой страницы получится немаленький 🙂 . Естественно, существует масса способов решения этих проблем, и об одном из них я расскажу в этой статье.
Идея очень простая. Вы размещаете на странице уменьшенные фотографии, и ставите ссылки на полноразмерные аналоги. После этого подключаете специальный скрипт. Теперь если посетитель кликнет по любой из фоток, страница станет похожа на окно программы просмотра изображений.
В центре будет полноразмерная фотография. По краям – кнопки «вперед», «назад». Внизу – кнопка «закрыть» и название снимка.
Главное преимущество такого варианта в том, что для показа изображений используется практически вся площадь экрана, при этом страница находится под изображением и затеняется.
Теперь разберемся, как создать такое слайд-шоу в блоге на WordPress.
Прежде всего, нужно скачать скрипт jQuery lightBox plugin. Кстати, на этой же странице можно посмотреть демонстрацию его работы.
Примечание. Вы, наверное, догадались, что этот скрипт использует JavaScript библиотеку jQuery. Но это не единственный вариант. Например, существует точно такой же скрипт на основе Prototype (Lightbox 2).
В архиве вы найдете файлы скрипта и демонстрационный пример.
Но прежде чем подключать скрипт, разберемся, как нужно оформлять ссылки на страницах.
Особых требований тут нет, главное, чтобы вы с помощью jQuery могли выбрать нужные.
Например:
<a class="slideshow" href="http://yoursite.com/wp-content/uploads/photo1.jpg" title="Фото 1"> <img src="http://yoursite.com/wp-content/uploads/photo1_thumb.jpg" alt="Уменьшенное фото 1" /> </a> <a class="slideshow" href="http://yoursite.com/wp-content/uploads/photo2.jpg" title="Фото 2"> <img src="http://yoursite.com/wp-content/uploads/photo2_thumb.jpg" alt="Уменьшенное фото 2" /> </a> <a class="slideshow" href="http://yoursite.com/wp-content/uploads/photo3.jpg" title="Фото 3"> <img src="http://yoursite.com/wp-content/uploads/photo3_thumb.jpg" alt="Уменьшенное фото 3" /> </a>
Как видите, здесь каждой ссылке присвоен класс slideshow. Такой подход позволяет легко выбрать фотографии, которые нужно включить в слайд-шоу.
Внутри каждой ссылки находится уменьшенное изображение фотографии.
Архив со скриптом нужно распаковать в папку с темой WordPress (например, /wp-content/themes/default/, вместо default распаковываете в папку активной темы).
В результате у вас должна получиться такая структура папок:
default/ js/ jquery.js jquery.lightbox-0.5.js jquery.lightbox-0.5.pack.js css/ jquery.lightbox-0.5.css images/ lightbox-blank.gif lightbox-btn-close.gif lightbox-btn-next.gif lightbox-btn-prev.gif lightbox-ico-loading.gif
Остальные файлы в архиве относятся к демонстрационному примеру и их можно удалить.
Теперь подключаем скрипт. Сразу предупреждаю, если просто скопировать код из примера в тему WP, то скрипт работать не будет. Чтобы это исправить, нужно указать правильные пути ко всем его файлам.
Приступаем.
Заходим в папку с темой и находим там файл header.php. Этот файл содержит заголовок страницы (теги <head></head>;). Где-нибудь между этими тегами вставляем следующий код.
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/css/jquery.lightbox-0.5.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.lightbox-0.5.js"></script>
<script type="text/javascript">
var home_url = "<?php echo bloginfo('template_directory'); ?>/";
$(document).ready(
function() {
$('a.screenshot').lightBox({fixedNavigation:true
,imageLoading: home_url + "images/lightbox-ico-loading.gif"
,imageBtnPrev: home_url + "images/lightbox-btn-prev.gif"
,imageBtnNext: home_url + "images/lightbox-btn-next.gif"
,imageBtnClose: home_url + "images/lightbox-btn-close.gif"
,imageBlank: home_url + "images/lightbox-blank.gif"
});
}
);
</script>
Листинг 1.
Теперь разберем, что он делает. В первой строке подключаем таблицу стилей слайд-шоу. Обратите внимание на <?php bloginfo('template_directory'); ?>. Этот код возвращает полный путь к папке с темой.
После этого мы подключаем jQuery. Тут есть два варианта. Можно использовать файл js/jquery.js, который распространяется вместе с плагином, но с недавних пор Google разместил самые распространенные js библиотеки на своих серверах, в том числе и jQuery. Именно эту библиотеку мы и подключили.
В смысле функциональности без разницы, откуда брать библиотеку. Но с точки зрения трафика (как вашего, так и посетителя) предпочтительнее использовать вариант Google.
В строке 3 мы подключили скрипт плагина.
Теперь остается только добавить картинки в слайд-шоу и настроить его (строки 4-17). Прежде всего, мы использовали функцию ready (строка 6) для того, чтобы наш js код выполнялся только после полной загрузки страницы. Эта функция в качестве параметра получает анонимную функцию (строки 7-14), которая и выполняет настройку слайд-шоу.
Для этого мы находим все ссылки с картинками на странице $('a.screenshot') и вызываем для них функцию lightBox (строка 7).
В параметрах функции lightBox мы указываем размещение файлов с рисунками.
Все. Сохраняем файл и обновляем страницу. Клик по любой из картинок запустит слайд-шоу.
Кстати, если вы хотите подключить слайд-шоу только к некоторым страницам, то можно использовать встроенные функции WordPress вроде is_home(), is_single(), is_page().
Например:
<?php if (is_page('about')) { ?>
// код из листинга 1
<?php } ?>
подключит скрипт только для страницы с названием about.
Заключение. Существует несколько плагинов для WP, которые позволяют подключить слайд-шоу. Но, во-первых, в основном они используют prototype версию, которая больше по размеру, а во-вторых, «ручной» вариант более гибкий в плане настроек. Например, просто изменив ссылку, вы сможете загружать jQuery с сервера Google, и сэкономите трафик и себе, и посетителям.
В общем, выбирать вам!
Удачи!
