| Главная » Файлы » Прочие скрипты » jQuery |
Замечательный слайдер изображений с красивыми эффектами на jQuery
| 23.06.14, 11:56:39 | |
 Очень качественно работающий слайдер с эффектом плавного появления большого изображения Для начала посмотрите ДЕМО Установка: После /head на нужных страницах вставляйте: Код <link rel="stylesheet" type="text/css" href="/css/jquery.thumbox.1.2.css" /> <script type="text/javascript" src="/js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="/js/jquery.thumbox.1.2.js"></script> <script type="text/javascript"> $(function(){ $('#demo1').thumbox(); $('#demo2').thumbox({thumbs:4, dockPosition:'bottom', maxThumbWidth:50, labelPosition:'top'}); $('#demo3').thumbox({overlayColor:'#032', overlaySpeed:200, keyboardNavigation:false}); $('#demo4').thumbox({showOne:true}); $('#demo5').thumbox({thumbs:3, openImageEffect:'easeOutBack', closeImageEffect:'easeInBack', scrollDockEffect:'easeInOutBack'}); $('#demo6').thumbox({openImageEffect:'easeOutBack', closeImageEffect:'easeInBack'}); }) </script> Следующий код в то место, где будут изображения: 1) Для демо 1: Код <div id="demo1"> <a href="Ссылка на большое изображение"><img src="Ссылка на маленькое изображение" alt="Описание"></a> <a href="Ссылка на большое изображение"><img src="Ссылка на маленькое изображение" alt="Описание"></a> <a href="Ссылка на большое изображение"><img src="Ссылка на маленькое изображение" alt="Описание"></a> </div> 1) Для демо 2: Код <div id="demo2"> <a href="Ссылка на большое изображение"><img src="Ссылка на маленькое изображение" alt="Описание"></a> <a href="Ссылка на большое изображение"><img src="Ссылка на маленькое изображение" alt="Описание"></a> <a href="Ссылка на большое изображение"><img src="Ссылка на маленькое изображение" alt="Описание"></a> </div> 1) Для демо 3: Код <div id="demo3"> <a href="Ссылка на большое изображение"><img src="Ссылка на маленькое изображение" alt="Описание"></a> <a href="Ссылка на большое изображение"><img src="Ссылка на маленькое изображение" alt="Описание"></a> <a href="Ссылка на большое изображение"><img src="Ссылка на маленькое изображение" alt="Описание"></a> </div> 1) Для демо 4: Код <div id="demo4"> <a href="Ссылка на большое изображение"><img src="Ссылка на маленькое изображение" alt="Описание"></a> <a href="Ссылка на большое изображение"><img src="Ссылка на маленькое изображение" alt="Описание"></a> <a href="Ссылка на большое изображение"><img src="Ссылка на маленькое изображение" alt="Описание"></a> </div> 1) Для демо 5: Код <div id="demo5"> <a href="Ссылка на большое изображение"><img src="Ссылка на маленькое изображение" alt="Описание"></a> <a href="Ссылка на большое изображение"><img src="Ссылка на маленькое изображение" alt="Описание"></a> <a href="Ссылка на большое изображение"><img src="Ссылка на маленькое изображение" alt="Описание"></a> </div> 1) Для демо 6: Код <div id="demo6"> <a href="Ссылка на большое изображение"><img src="Ссылка на маленькое изображение" alt="Описание"></a> <a href="Ссылка на большое изображение"><img src="Ссылка на маленькое изображение" alt="Описание"></a> <a href="Ссылка на большое изображение"><img src="Ссылка на маленькое изображение" alt="Описание"></a> </div> Осталось лишь залить два скрипта из прикреплённого архива в папку js стиль в папку css и все картинки в папку images Материал подготовлен Apocalypse | |
| Просмотров: 375 | Загрузок: 0 | | |
| Всего комментариев: 0 | |
|
| |