Від автора: даний матеріал складно назвати уроком в повному розумінні цього слова. Швидше, тут я хочу поділитися з Вами однією привабливою річчю, яка підійде для будь-якого сайту — це загибающийся куточок для сайту. Цілком імовірно, що Ви вже бачили таку штуку в мережі — це колышущийся куточок у правому верхньому куті сайту, який при наведенні на нього курсору загинається, відкриваючи приховану під ним картинку. Річ досить приваблива і, що найголовніше, причепити її на будь-який сайт не складе особливих труднощів і не займе багато часу — всього пару хвилин і куточок вже на сайті.
Для роботи я скачав в мережі безкоштовний шаблон, з яким ми і будемо працювати. Для роботи нам знадобляться всього 5 файлів:
2 картинки: large.jpg і small.jpg
2 флешки: large.swf і small.swf
файл підключення та налаштування: peel.js
Картинки і флешки показують куточок в двох положеннях — відкритий і відкритий куточок. Флешки анимаируют показ картинок. Картинки Ви, звичайно, можете використовувати свої, написати на них необхідні текст або вивести потрібне зображення. Єдине, бажано дотримуватися ті розміри, які Ви побачите в исходниках, тобто 100*100 для маленької картинки і 500*500 для великого зображення.
Тепер про файл peel.js, який підключає куточок на сайт і відповідає за його налаштування. Всі необхідні налаштування поміщені в перших рядках файлу — 10 рядків (10 налаштувань). Давайте розпишемо кожну з них:
jaaspeel.ad_url — посилання на сторінку, куди буде здійснено перехід по кліку на куточок;
jaaspeel.small_path — шлях до маленької флешці;
jaaspeel.small_image — шлях до маленькій картинці;
jaaspeel.small_width — ширина куточка у вихідному положенні (бажано, щоб вона співпадала з шириною маленької картинки);
jaaspeel.small_height — висота куточка у вихідному положенні (бажано, щоб вона співпадала з висотою маленької картинки);
jaaspeel.big_path — шлях до великої флешці;
jaaspeel.big_image — шлях до великої картинці;
jaaspeel.big_width — ширина куточка в відігнутому положенні (бажано, щоб вона співпадала з шириною великий картинки);
jaaspeel.big_height — висота куточка в відігнутому положенні (бажано, щоб вона співпадала з висотою великий картинки);
jaaspeel.big_params — в цьому параметрі додається посилання до отогнутому куточка, яку при бажанні можна закоментувати.
Власне це все, що можна змінювати в даному файлі. Решті код відповідає за позиціонування флешок і їх публікацію на сторінці.
Тепер залишилося тільки підключити цей файл на сторінку. Підключається він, як і будь-який інший скрипт. Між тегами HEAD пропишемо рядок коду:
Ось і все…
Тепер можна зберегти файл, оновити сторінку в браузері і насолоджуватися результатом. Залишається сказати кілька слів про особливості підключення та налаштування файлу, наприклад, на CMS WordPress. По-перше, каталог з файлами куточка бажано розташовувати у Вашій поточній темі (/wp-content/themes/ваша тема/). По-друге, всі шляхи у налаштуваннях прописуємо абсолютно. Наприклад, шлях до маленької флешці буде таким: http://Ваш_сайт/wp-content/themes/ваша-тема/peel/small.swf. Ну і підключаємо скрипт, звичайно ж, використовуючи також абсолютний шлях:
Де прописувати підключення, думаю, всім зрозуміло — зробити це потрібно у файлі header.php Вашої теми.
На цьому урок закінчений. Сподіваюся, що Вам знадобиться показана річ.
Удачі і до нових зустрічей!
