Красивые всплывающие окна. Javascript
На сайтах и галереях часто встречаются всякие виджеты которые придают красивости и дополнительную функциональность на сайт. В данном примере я хочу показать как можно сделать простой, но очень красивый эффект на javascript с использованием уже готового скрипта.
Для работы скрипта вам необходимо скачать архивчик http://codeismy.name/download/lightbox.zip
в нём уже есть пример, но рассмотрим его детальнее.
Для работы данного скрипта нам необходимо распаковать архив в корень папки из которой будет подключаться скрипт и дописать в хэдере
1 2 3 4 | <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> <script src="js/prototype.js" type="text/javascript"></script> <script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script> <script src="js/lightbox.js" type="text/javascript"></script> |
Подключив этот код и дописав в ссылку rel=»lightbox[plants]» мы получим неплохой эффект. Пример подключения в коде
1 | <a href="images/image-1.jpg" rel="lightbox[plants]"><img src="images/thumb-1.jpg" width="100" height="40" alt="" /></a> |
Маленькую картинку мы указываем в тэге img а увеличенную в тэге «a» параметре href.
Пример работы можно посмотреть тут http://codeismy.name/download/index.html
Но теперь предположим, что по каким-то причинам вам необходимо поменять пути подключения
но этого недостаточно. Так же вам необходимо поменять будет пути подключения кнопок в файле
lightbox.js
в строках
1 2 | fileLoadingImage: 'images/loading.gif', fileBottomNavCloseImage: 'images/closelabel.gif', |
А так же все пути в стилях
a
Нет комментариев на "Красивые всплывающие окна. Javascript"
Нет комментариев.
Вы можете продолжить обсуждение этой статьи на форуме