Як створити слайд-шоу в WordPress. Підключення JavaScript бібліотек

Потрібно знайти нову в блозі фотоальбом? Не проблема. Фотографії можна вставити в будь-який пост, правда, переглядати їх при цьому буде не дуже зручно, та й розмір такої сторінки вийде немаленький 🙂. Природно, існує маса способів вирішення цих проблем, і про один з них я розповім в цій статті.

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

У центрі буде повнорозмірна фотографія. По краях - кнопки «вперед», «назад». Внизу - кнопка «закрити» і назва знімка.

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

Тепер розберемося, як створити таке слайд-шоу в блозі на WordPress.

Перш за все, потрібно завантажити скрипт jQuery lightBox plugin . До речі, на цій же сторінці можна подивитися демонстрацію його роботи.

Примітка. Ви, напевно, здогадалися, що цей скрипт використовує JavaScript бібліотеку jQuery. Але це не єдиний варіант. Наприклад, існує такий самий скрипт на основі Prototype ( Lightbox 2 ).

В архіві ви знайдете файли скрипта і демонстраційний приклад.

Але перш ніж підключати скрипт, розберемося, як потрібно оформляти посилання на сторінках.
Особливих вимог тут немає, головне, щоб ви з допомогою jQuery могли вибрати потрібні.

наприклад:

Як бачите, тут кожному посиланні присвоєно клас 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, і заощадите трафік і собі, і відвідувачам.

Загалом, вибирати вам!
Успіхів!

Lt;Link rel = "stylesheet" href = "<?
Php bloginfo ( 'template_directory');?
Js"> </ script> <script type = "text / javascript" src = "<?
Php bloginfo ( 'template_directory');?
0.5.js"> </ script> <script type = "text / javascript"> var home_url = "<?
Php echo bloginfo ( 'template_directory');?
Зверніть увагу на <?
Php bloginfo ( 'template_directory'); ?
Php if (is_page ( 'about')) {?
Gt; // код з лістингу 1 <?

IRC-сервер - Irc.Online.com.ua

Як створити слайд-шоу в WordPress. Підключення JavaScript бібліотек