Главная » Файлы » Прочие скрипты » jQuery |
Простой приятный слайдер через плагин Easy gallery и библиотеку эффектов jQuery Easing на jQuery
23.06.14, 09:34:14 | |
![]() Очень простой, но приятный в своём исполнении плагин. Приятно удивляет качественная анимация переходов Для начала посмотрите ДЕМО Установка: После /head на нужных страницах вставляйте: Код <style type="text/css"> #gallery{ border:#000 solid 5px; } .tclass{ cursor:pointer; display:inline; float:left; min-width:8px; min-height:6px; padding:5px; margin-right:10px; } .ac{ border-bottom:#333 solid 1px; } </style> <script type="text/javascript" src="/js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="/js/easy-gallery.js"></script> <script type="text/javascript"> $(document).ready(function (){ $("#gallery").egallery({ width:500, height:230, speed: 1000, delay:4000, easing:'easeInOutBack', thumbs:'numbers', thumbClass:'tclass', aClass:'ac' }); }); </script> В то место, где будет сам слайдер, вставляйте следующий код: Код <div id="gallery"> <ul> <li><img src="Ссылка на картинку 1" border="0" alt="" /></li> <li><img src="Ссылка на картинку 2" border="0" alt="" /></li> <li><img src="Ссылка на картинку 3" border="0" alt="" /></li> <li><img src="Ссылка на картинку 4" border="0" alt="" /></li> <li><img src="Ссылка на картинку 5" border="0" alt="" /></li> </ul> </div> <div id="ssgThumbs"></div> <br clear="all" /> Остаётся лишь залить два скрипта из прикреплённого архива в папку js Материал подготовлен Apocalypse | |
Просмотров: 372 | Загрузок: 0 | |
Всего комментариев: 0 | |
| |