Как создать слайд-шоу в WordPress. Подключение JavaScript библиотек

Владимир | | JavaScript, WordPress.

Логотип для слайд-шоу в wordpress
Хотите разместить в блоге фотоальбом? Не проблема. Фотографии можно вставить в любой пост, правда, просматривать их при этом будет не очень удобно, да и размер такой страницы получится немаленький 🙂 . Естественно, существует масса способов решения этих проблем, и об одном из них я расскажу в этой статье.

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

В центре будет полноразмерная фотография. По краям – кнопки «вперед», «назад». Внизу – кнопка «закрыть» и название снимка.

Главное преимущество такого варианта в том, что для показа изображений используется практически вся площадь экрана, при этом страница находится под изображением и затеняется.

Теперь разберемся, как создать такое слайд-шоу в блоге на 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, и сэкономите трафик и себе, и посетителям.

В общем, выбирать вам!
Удачи!

  • Pingback: Слайд-шоу в WordPress | WP лента()

  • Огромное спаисбо вам за такой материал. Реально, детально все описано и все понятно! Очень полезный блог!

  • Огромное спаисбо вам за такой материал. Реально, детально все описано и все понятно! Очень полезный блог!

  • и мне кое-что подошло

  • и мне кое-что подошло

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

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

  • Есть и еще решение стилями css — Создаем фотогалерею на стр http://2aw.org/5-prostyx-css-xakov-i-xitrostej/ Перевод статьи с blogohblog
    Пример как работает можно глянуть на 2aw.org/predlozhenie
    В общем тоже самое — в галерее мини изображение, при наведении выводится большой размер, указываемый в css. Одно плохо, по моему в фоксе не фурычит, что то надо крякнуть, а как пока не знаю.

    • Решение хорошее, только больше подходит для небольших картинок, а не фотографий.
      Проблема в том, что если картинка большая (например, 800х600), то увеличенное изображение перекроет соседние миниатюры и их нельзя будет выбрать.

      • Да конечно, чисто галерею, да еще при большом разрешении не сделать, а свою мини вполне по силам.

  • Есть и еще решение стилями css — Создаем фотогалерею на стр http://2aw.org/5-prostyx-css-xakov-i-xitrostej/ Перевод статьи с blogohblog
    Пример как работает можно глянуть на 2aw.org/predlozhenie
    В общем тоже самое — в галерее мини изображение, при наведении выводится большой размер, указываемый в css. Одно плохо, по моему в фоксе не фурычит, что то надо крякнуть, а как пока не знаю.

    • Решение хорошее, только больше подходит для небольших картинок, а не фотографий.
      Проблема в том, что если картинка большая (например, 800х600), то увеличенное изображение перекроет соседние миниатюры и их нельзя будет выбрать.

      • Да конечно, чисто галерею, да еще при большом разрешении не сделать, а свою мини вполне по силам.

  • Огромное спасибр,за такую информацию!!Она мне понадобится какраз.

  • Огромное спасибр,за такую информацию!!Она мне понадобится какраз.

  • Спасибо за информацию!!!с удовольствием сделаю фотоальбом.

  • Спасибо за информацию!!!с удовольствием сделаю фотоальбом.

  • А не слишком ли это геморно? по моему есть гораздо более легкие в установке и не менее красивые галереи

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

  • А не слишком ли это геморно? по моему есть гораздо более легкие в установке и не менее красивые галереи

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

  • Спасибо за детальное описание, как раз искал такое. Если что не получиться буду спрашивать 🙂

  • Спасибо за детальное описание, как раз искал такое. Если что не получиться буду спрашивать 🙂

  • Lightbox на самом деле более универсален, читаем.

  • Lightbox на самом деле более универсален, читаем.

  • Fedor

    Все сделал как написано — ничерта не работает. При нажатии на картинке она просто открывается в окне.
    То что в листинге 1 менять не надо? просто скопировать в header.php. между и ?

  • Fedor

    Все сделал как написано — ничерта не работает. При нажатии на картинке она просто открывается в окне.
    То что в листинге 1 менять не надо? просто скопировать в header.php. между и ?

  • Fedor

    между head-ами в общем

  • Fedor

    между head-ами в общем

  • Fedor

    скопировал код из примера (из архива)- та же история. скрипт не запускается

  • Fedor

    скопировал код из примера (из архива)- та же история. скрипт не запускается

  • То что в листинге 1

    Нужно вставить в тело страницы, например, в файл single.php.

    В заголовок (между тегами head) нужно вставлять код из листинга 2.

    В вашем случае очень похоже, что не выполнился JS код. Это может быть из-за того, что не подключена библиотека jQuery или плагин.
    Я вам очень советую установить firebug (плагин к firefox). С его помощью можно посмотреть какие файлы были загружены вместе со страницей и ошибки JavaScript.

  • То что в листинге 1

    Нужно вставить в тело страницы, например, в файл single.php.

    В заголовок (между тегами head) нужно вставлять код из листинга 2.

    В вашем случае очень похоже, что не выполнился JS код. Это может быть из-за того, что не подключена библиотека jQuery или плагин.
    Я вам очень советую установить firebug (плагин к firefox). С его помощью можно посмотреть какие файлы были загружены вместе со страницей и ошибки JavaScript.

  • Целый день потратил на поиск нормального плагина для слайд шоу, подскажите кто знает рабочую версию, плиз!

    • По-идее они все рабочие. Ведь в большинстве случаев разработчики WP плагинов используют готовые решения для слайдшоу, которые 100% рабочие.
      Поэтому варианты такие.
      1) Не подключились JS скрипты. Может возникать, например, если в теме отсутствует вызов wp_head().
      2) Скрипт не может найти рисунки. Тут нужно читать описание плагина.
      В любом случае нужно хоть какое-нибудь описание ошибок.
      А сделать слайдшоу так, как описано в этой статье не получилось или не пробовали?
      Кстати, рабочий вариант есть — nextgen-gallery. И у них есть демонстрационные странички.

  • Целый день потратил на поиск нормального плагина для слайд шоу, подскажите кто знает рабочую версию, плиз!

    • По-идее они все рабочие. Ведь в большинстве случаев разработчики WP плагинов используют готовые решения для слайдшоу, которые 100% рабочие.
      Поэтому варианты такие.
      1) Не подключились JS скрипты. Может возникать, например, если в теме отсутствует вызов wp_head().
      2) Скрипт не может найти рисунки. Тут нужно читать описание плагина.
      В любом случае нужно хоть какое-нибудь описание ошибок.
      А сделать слайдшоу так, как описано в этой статье не получилось или не пробовали?
      Кстати, рабочий вариант есть — nextgen-gallery. И у них есть демонстрационные странички.

  • Данила

    зачем же так сложно, да еще и через jquery?! вот неплохой пример ручками плавная смена картинок или слайд шоу на javascript

    • Мне понравился ваш пример. Но сравнивать его с моим не совсем правильно. Моя статья о том, как прикрутить готовое решение к движку WP, а не написать самому свой просмотрщик картинок. Кроме того, посмотрите на то, как работает lightbox. Принцип довольно сильно отличается от вашего скрипта.

  • Данила

    зачем же так сложно, да еще и через jquery?! вот неплохой пример ручками плавная смена картинок или слайд шоу на javascript

    • Мне понравился ваш пример. Но сравнивать его с моим не совсем правильно. Моя статья о том, как прикрутить готовое решение к движку WP, а не написать самому свой просмотрщик картинок. Кроме того, посмотрите на то, как работает lightbox. Принцип довольно сильно отличается от вашего скрипта.

  • Спасибо за информацию, хорошее решение… и главное все понятно… даже новичку под силу создать слайд-шоу.

  • Спасибо за информацию, хорошее решение… и главное все понятно… даже новичку под силу создать слайд-шоу.

  • Natalya Sidorova25

    Добрый вечер!У меня вопрос,я загрузила,в head скопировала,а в этом коде на место home_url + нужно писать свой адрес домашней страницы?И у меня не показывает всеравно,хотя все сделала как написано в статье(

  • Да, home_url адрес домашней страницы (но без index.html или index.php).
    Чтобы сказать что именно не работает мне нужны описания ошибок. Лучше всего если вы установите firebug и сделаете скриншоты вкалдки Net (Сеть)

  • Евгений

    очень хороший скрипт, но не получается подключить. Не трудно ли будет выложить скрин или еще в каком-нибудь виде то, как должен выглядеть Листинг 2 в рабочем виде? Заранее, большое спасибо!

    • Эта статья написана в 2008 году, с тех пор некоторые вещи изменились. В частности, не желательно подключать JS непосредственно вставляя теги script в файлы темы.
      Гораздо лучше использовать способ, описанный в статье Особенности подключения JS скриптов в WordPress

  • Анна

    Супер! Спасибо