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

флеш-уголок для сайта

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

автор

Автор: Андрей Кудлай

Зовут меня Андрей Кудлай. Родом я из Украины, живу в Днепропетровске. Веб-программированию учился сам. Неплохо знаю HTML, CSS, PHP. Немного разбираюсь в JavaScript’e — в свободное время как раз занимаюсь его изучением.

скачать исходникискачать урок

Для работы я скачал в сети бесплатный шаблон, с которым мы и будем работать. Для работы нам понадобятся всего 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 пропишем строку кода:

<script type="text/javascript" src="peel/peel.js"></script>

Вот и все…

Теперь можно сохранить файл, обновить страницу в браузере и наслаждаться результатом. Остается сказать несколько слов об особенностях подключения и настройки файла, например, на CMS WordPress. Во-первых, каталог с файлами уголка желательно располагать в Вашей текущей теме (/wp-content/themes/ваша-тема/). Во-вторых, все пути в настройках прописываем абсолютно. Например, путь к маленькой флешке будет таким: http://Ваш_сайт/wp-content/themes/ваша-тема/peel/small.swf. Ну и подключаем скрипт, конечно же, используя также абсолютный путь:

<script type="text/javascript" src="//Ваш_сайт/wp-content/themes/ваша-тема/peel/peel.js"></script>

Где прописывать подключение, думаю, всем понятно — сделать это нужно в файле header.php Вашей темы.

На этом данный урок закончен. Надеюсь, что Вам пригодится показанная вещь.

Удачи и до новых встреч!

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (54)

  1. Сергей

    Урок очень интересный и на первый взгляд прост, но у меня не получилось. Запутался как путь прописывать к файлам. Сайт на джумла. Подскажите где ошибка?

    • Андрей Кудлай

      Чтобы не путаться, везде можно прописывать абсолютные пути, например, mysite.ru/peel/peel.js — так будет выглядеть путь к скрипту, расположенному в каталоге peel… сам каталог при этом должен быть помещен в корень сайта. Также абсолютные пути можно указывать в самом файле скрипта.

  2. Ольга

    Все это конечно интересно!но я не умею работать со скриптами на прямую,я хотела попросить на просто javascript который вставляешь в шаблон сайта Между тегами HEAD и он работает!заранее благодарю

    • Андрей Кудлай

      Ольга, еще раз внимательно пересмотрите урок… в уроке нет работы с JavaScript вообще. Все, что требуется, — это поместить каталог peel в корень сайта и подключить скрипт.

  3. Александр

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

  4. Nata

    Уважаемый Андрей! не получается уголок. Загружаю папку peel внутрь главной папки на Narod.ru. Как прописываю в index Вы можете сами на сайте посмотреть. В peel.js я пишу так jaaspeel.ad_url = escape(‘melecas-sadic.narod.ru/new.html’);
    Что не так?

    • Андрей Кудлай

      Nata, что именно не получается? Зашел на Ваш сайт, уголок работает.

  5. Nata

    Не работает. Я в трех браузерах проверила: мозиле, опере, эксплорере.

  6. Nata

    Дайте мне свой скайп, я через экран вам покажу.

  7. Nata

    Может быть в моих браузерах чего-то не хватает? Так нет, на других сайтах я такие уголки вижу.

    • Андрей Кудлай

      Специально разместил сайт из урока на народе — matroskin978.narod.ru — посмотрите будет ли у Вас показывать. У меня не работает только в IE7. В Мозилле и Опере все ок.
      Да и кстати, сейчас у Вас не работает уже — файл скрипта не находит.

      • Nata

        Напишите мне на почту, я Вам пошлю файл с фото и Вам все будут видно. У Вас здесь нет возможности переслать файл.

        • Андрей Кудлай

          Nata, зачем мне файл и фото, если у меня все работает на народе, а у Вас не работает? В комментарии ниже написал, что необходимо обновить flash player.

  8. Nata

    matroskin978.narod.ru
    не показывает уголок

    • Андрей Кудлай

      Скорее всего, у Вас не установлен либо не обновлен flash player. Перейдите по ссылке get.adobe.com/ru/flashplayer и установите плеер.

  9. Nata

    После установки get.adobe.com/ru/flashplayer
    Opera стала показывать, а мозила и эксплорер нет. Почему?
    Почему сдвигается large.jpg глубже к центру, а не с левого края?

    • Андрей Кудлай

      Flash player устанавливается для каждого браузера отдельно. Если после установки не показывает — перезапустите браузер. По поводу IE, то у меня в 7-ой версии также не показывается.
      Картинка large.jpg позиционируется относительно верхнего левого угла флешки, а поскольку размеры самой флешки 500*500 пикселей, то пустыми остаются 100 пикселей ширины и 100 — высоты. Если Вы хотите уголок поменьше, то сделайте картинку 500*500 пикселей, но размеры в скрипте оставьте 400*400.

  10. Nata

    На маленьком дисплее мой сайт не сдвигает внутреннюю картинку, а на большом дисплее-сдвигает внутрь на 200 пикселей. И край становится белый. Ваш сайт везде нормально показывает-и на маленьком и на большом. Это только в опере.

    • Андрей Кудлай

      Nata, Вы совсем невнимательно прочитали мой предыдущий комментарий относительно размеров. Я говорил, что картинку необходимо сделать с размерами 500*500 пикселей… Вы же сделали ее еще меньше — 300*300 )))
      Перечитайте внимательнее мой комментарий.

  11. Nata

    Как перезапустить браузер? Обновить?

    • Андрей Кудлай

      Как Вы перезапускаете компьютер? Перезапустить — это значит выключить и включить.

  12. Nata

    Да внимательно я читаю, просто мне не нравится такой большой отгиб, и я экспериментирую. Сейчас все сделала по Вашим рекомендациям, но ничего не меняется: Ваш сайт хорощо показывает, у моего внутренняя картинка сдвигается внутрь и край делается белым, а надписи почти не видно. Работает только в опере.

    • Андрей Кудлай

      Ну экспериментируйте :)
      Только позволю себе процитировать часть урока: «…желательно соблюдать те размеры, которые Вы увидите в исходниках, т.е. 100*100 для маленькой картинки и 500*500 для большого изображения»

  13. Александр

    Здравствуйте, попробовал поставить, все работает, но вот только изображение само по себе искажается. И картинка не совсем красиво выглядит, по сути изображение уменьшается. Это как то лечиться?

    • Андрей Кудлай

      Здравствуйте. Лечится очень просто. В уроке указаны рекомендуемые размеры, при которых все отлично отображается — используйте их.

      • Александр

        Я и поставил, те параметры, которые Вы рекомендуете в уроках и в итоге идет искажение большой картинки. А лечится эта штука заданием таких параметров для:
        jaaspeel.big_width = ’600′;
        jaaspeel.big_height = ’600′;
        После большая картинка не искажается, несмотря на то что ее размер 500×500 пикселей. А так спасибо Вам за полезный скрипт

        • Андрей Кудлай

          Пожалуйста :)
          Хотя у меня картинка 500*500, аналогичные размеры указаны в скрипте, и картинка отображается корректно…
          Ну да Вы же сами могли видеть в уроке и исходниках ;)

  14. Юрий

    Здравствуйте. Пишу немного не по теме. Проблема в том, что я не знаю, как убрать с блога этот уголок. Блог на вордпрессе. Если не трудно, подскажите, пожалуйста. Смена шаблона результата не дала. Я просто не знаю, в каком месте находится скрипт. Спасибо.

  15. Юрий

    И еще, если не очень затруднит. На этом же блоге не могу удалить спам-комментарии. Они просто не удаляются в админке, а внизу появляется надпись:»Внутренняя ошибка» на розовом фоне. Это поправимо или нет?

    • Андрей Кудлай

      Попробуйте отключить плагины, имеющее отношение к работе со спамом, и удалить их после этого. Если не поможет, тогда проще переустановить WordPress.

  16. Юрий

    Не помогло. Буду переустанавливать. У Вас не работает подписка по имейл

  17. klauss

    Андрей, здравствуйте. Похоже что архив битый, перезалейте пожалуйста если не сложно

    • Андрей Кудлай

      Здравствуйте.
      Только что проверил архивы — все скачивается и распаковывается. Возможно, у Вас скачался архив с ошибкой. Попробуйте еще раз.

  18. Сергей Ревяков

    Андрей, спасибо огромное за прекрасный урок.
    Сделал уголки на 2-х своих сайтахЖ
    блог на wordpress srblog.ru
    сайт на Joomla sergeysound.ru

    В Мозилле всё отображается великолепно.
    А вот в IE, в wordpress отображается
    в Joomla — ни в какую

    • Андрей Кудлай

      Пожалуйста :)
      Сергей, дело в том, что IE почему-то некорректно обрабатывает скрипт (peel.js), публикуя флеш в head’e. Только сейчас обратил внимание на эту его проблему. Решается довольно просто — подключайте данный скрипт не в блоке head, а в body. Сразу после этого в IE у меня заработало. В остальных браузерах также после этого работает отлично.

  19. Сергей Ревяков

    Спасибо, Андрей. Обязательно применю сегодня.
    Спасибо за Вашу отзывчивость и быстрый ответ.
    Удачи Вам. Подписался на Вашу рассылку

  20. Сергей Ревяков

    Заработало. Ещё раз огромное спасибо, Андрей

  21. Юрий

    Я установил шаблон, на котором уже был уголок. Как его убрать, чтобы поставить свой? И где искать этот скрипт? В header.php ничего подобного не нашел. Причем, есть поддомен. Так на нем стоит точно такой же уголок. Для меня это проблема. Как ее решить? Спасибо.

    • Андрей Кудлай

      Без просмотра самого сайта что-то конкретное сказать невозможно.

      • Юрий

        А Вы сможете это сделать? Как у Вас со временем и что для этого нужно?

        • Андрей Кудлай

          Что для этого нужно я уже ответил — как минимум посмотреть сайт. Создайте тему на нашем форуме, опишите вопрос и Вам постараются помочь, неважно кто — я или кто-то другой.

  22. Тимур

    Доброго времени суток Андрей! Поставил Ваш скрипт. Все встало ровно, но он не раскрывается вообще. Просто болтается и всё. Подскажите решение этой проблемы?

    • Тимур

      И в Вашем исходнике тоже не открывается почему то. Чистил кэш не помогло.

      • Андрей Кудлай

        Здравствуйте, Тимур. Скорее всего, Вы пытаетесь работать не на сервере, т.е. запускаете страницу, к примеру, просто с рабочего стола (по протоколу file://).
        Не помню говорил ли в уроке об этом, но корректная работа будет только на сервере… собственно, обратите внимание, что в уроке работа происходит именно на сервере — по протоколу http://

        • Тимур

          именно так и работаю)обычный хтмл документ. А обязательно устанавливать его на сервер чтобы он корректно отображался?

          • Андрей Кудлай

            Как видите, — да :)
            В любом случае, он ведь все равно будет в сети.

  23. Елена Лесовицкая

    Андрей! Блондинка во мне победила.
    Вроде делала все по уроку, но увы!
    Возник у меня следующий «глупый вопрос»
    1. В исходниках, кроме папки peel — есть еще папки темы. Они должны находиться внутри новой папки corner или она создается только для peel и картинок.
    Ну не работает уголок!

    • Андрей Кудлай

      Елена, файлы самого сайта (папки темы) Вам не нужны, они просто для примера работы уголка на сайте. Вам нужна только папка peel с файлами в ней и нужно подключить скрипт peel.js, расположенный в указанной папке peel… вот и все.
      Т.е., если Вы положите папку в корень сайта, то подключаете точно также, как показано в уроке.
      Если все же что-то не получится — создайте тему на нашем форуме и мы обязательно разберемся вместе и поможем.

      • Елена Лесовицкая

        Ну значит все делала правильно. Остается еще раз проверить путь до файлов. Если не получится придется тему создавать.

  24. Игорь

    Здравствуйте, Андрей! Спасибо за интересный урок. Возникла такая проблема: все сделал: подключил скрипт, адреса к картинкам и флеш- файлам несколько раз проверил, уголок появился, но не отгибается, при наведении на него меняется лишь курсор мыши, при нажатии ничего не происходит. В чем может быть проблема?
    Заранее спасибо!

    • Андрей Кудлай

      Здравствуйте, Игорь.
      Скорее всего, все же что-то не так с путями. Проверьте их еще раз. Если все же не найдете причину, то обращайтесь на наш форум — там попробуем разобраться вместе.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree