Загибающийся флеш-куточок для сайту

20

Від автора: даний матеріал складно назвати уроком в повному розумінні цього слова. Швидше, тут я хочу поділитися з Вами однією привабливою річчю, яка підійде для будь-якого сайту — це загибающийся куточок для сайту. Цілком імовірно, що Ви вже бачили таку штуку в мережі — це колышущийся куточок у правому верхньому куті сайту, який при наведенні на нього курсору загинається, відкриваючи приховану під ним картинку. Річ досить приваблива і, що найголовніше, причепити її на будь-який сайт не складе особливих труднощів і не займе багато часу — всього пару хвилин і куточок вже на сайті.

Загибающийся флеш-куточок для сайтуЗагибающийся флеш-куточок для сайту

Для роботи я скачав в мережі безкоштовний шаблон, з яким ми і будемо працювати. Для роботи нам знадобляться всього 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 Вашої теми.

На цьому урок закінчений. Сподіваюся, що Вам знадобиться показана річ.

Удачі і до нових зустрічей!