От автора: данный материал сложно назвать уроком в полном понимании этого слова. Скорее, здесь я хочу поделиться с Вами одной привлекательной вещицей, которая подойдет для любого сайта — это загибающийся уголок для сайта. Вполне вероятно, что Вы уже видели такую штуку в сети — это колышущийся уголок в правом верхнем углу сайта, который при наведении на него курсора загибается, открывая скрытую под ним картинку. Вещь довольно привлекательная и, что самое главное, прицепить ее на любой сайт не составит особого труда и не займет много времени — всего пару минут и уголок уже на сайте.
Для работы я скачал в сети бесплатный шаблон, с которым мы и будем работать. Для работы нам понадобятся всего 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 пропишем строку кода:
|
1 |
<script type="text/javascript" src="peel/peel.js"></script> |
Вот и все…
Теперь можно сохранить файл, обновить страницу в браузере и наслаждаться результатом. Остается сказать несколько слов об особенностях подключения и настройки файла, например, на CMS WordPress. Во-первых, каталог с файлами уголка желательно располагать в Вашей текущей теме (/wp-content/themes/ваша-тема/). Во-вторых, все пути в настройках прописываем абсолютно. Например, путь к маленькой флешке будет таким: //Ваш_сайт/wp-content/themes/ваша-тема/peel/small.swf. Ну и подключаем скрипт, конечно же, используя также абсолютный путь:
|
1 |
<script type="text/javascript" src="//Ваш_сайт/wp-content/themes/ваша-тема/peel/peel.js"></script> |
Где прописывать подключение, думаю, всем понятно — сделать это нужно в файле header.php Вашей темы.
На этом данный урок закончен. Надеюсь, что Вам пригодится показанная вещь.
Удачи и до новых встреч!
Комментарии (54)