| Главная » Файлы » Прочие скрипты » jQuery |
Великолепный слайдер изображений с прекрасными разнообразными переходами через плагин Panel Gallery 2.0 на jQuery
| 23.06.14, 11:32:12 | |
 Просто обалденный слайдер с великим множеством качественных разнообразных переходов Для начала помотрите: ДЕМО1, ДЕМО2 и ДЕМО3 Установка: Для ДЕМО 1: После /head на нужных страницах вставляйте: Код <script type="text/javascript" src="/js/jquery.panelgallery-2.0.0.min.js"></script> <script type="text/javascript"> $(function(){ $('#movies').panelGallery({ viewDuration: 3000, transitionDuration: 500, boxSize: 45, boxFadeDuration: 500, boxTransitionDuration: 50 }); }); </script> <style type="text/css"> #movies { -moz-box-shadow: 0px 0px 10px #333; -webkit-box-shadow: 0px 0px 10px #333; box-shadow: 0px 0px 10px #333; } </style> В то место, где будет сам слайдер, вставляйте: Код <div id="movies"> <img alt="" src="Ссылка на картинку" width="600" height="248" /> <img alt="" src="Ссылка на картинку" width="600" height="248" /> <img alt="" src="Ссылка на картинку" width="600" height="248" /> <img alt="" src="Ссылка на картинку" width="600" height="248" /> <img alt="" src="Ссылка на картинку" width="600" height="248" /> <img alt="" src="Ссылка на картинку" width="600" height="248" /> <img alt="" src="Ссылка на картинку" width="600" height="248" /> <img alt="" src="Ссылка на картинку" width="600" height="248" /> </div> Для ДЕМО 2: После /head на нужных страницах вставляйте: Код <script type="text/javascript" src="/js/jquery.panelgallery-2.0.0.min.js"></script> <script type="text/javascript"> $(function(){ $('#models').panelGallery({ boxSize:50, boxFadeDuration:1000, boxTransitionDuration:100, FX: new Array('boxSouthEast','fade','boxRandom','panelZipperDown,true','panelZipperRight,true','panelTeethDown,true','panelTeethRightReveal') }); }); </script> <style type="text/css"> #models { -moz-box-shadow: 0px 0px 10px #333; -webkit-box-shadow: 0px 0px 10px #333; box-shadow: 0px 0px 10px #333; } </style> В то место, где будет сам слайдер, вставляйте: Код <div id="models"> <img alt="" src="Ссылка на картинку" width="444" height="666" /> <img alt="" src="Ссылка на картинку" width="444" height="666" /> <img alt="" src="Ссылка на картинку" width="444" height="666" /> <img alt="" src="Ссылка на картинку" width="444" height="666" /> <img alt="" src="Ссылка на картинку" width="444" height="666" /> <img alt="" src="Ссылка на картинку" width="444" height="666" /> <img alt="" src="Ссылка на картинку" width="444" height="666" /> <img alt="" src="Ссылка на картинку" width="444" height="666" /> </div> Для ДЕМО 3: осле /head на нужных страницах вставляйте: Код <script type="text/javascript" src="/js/jquery.panelgallery-2.0.0.min.js"></script> <script type="text/javascript"> $(function(){ $('#flowers').panelGallery(); }); </script> <style type="text/css"> #flowers { -moz-box-shadow: 0px 0px 10px #333; -webkit-box-shadow: 0px 0px 10px #333; box-shadow: 0px 0px 10px #333; } </style> В то место, где будет сам слайдер, вставляйте: Код <div id="flowers"> <img alt="" src="Ссылка на картинку" width="500" height="375" /> <img alt="" src="Ссылка на картинку" width="500" height="375" /> <img alt="" src="Ссылка на картинку" width="500" height="375" /> <img alt="" src="Ссылка на картинку" width="500" height="375" /> <img alt="" src="Ссылка на картинку" width="500" height="375" /> <img alt="" src="Ссылка на картинку" width="500" height="375" /> <img alt="" src="Ссылка на картинку" width="500" height="375" /> <img alt="" src="Ссылка на картинку" width="500" height="375" /> </div> Осталось лишь залить скрипт из прикреплённого архива в папку js Материал подготовлен Apocalypse | |
| Просмотров: 318 | Загрузок: 0 | | |
| Всего комментариев: 0 | |
|
| |