Главная » Файлы » Прочие скрипты » 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
Категория: jQuery | Добавил: Apocalypse | Теги: изображений, замечательный, на, JQuery, эффектами, красивыми, слайдер
Просмотров: 223 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: