Главная » Файлы » Прочие скрипты » 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

Категория: jQuery | Добавил: Apocalypse | Теги: прекрасными, изображений, panel, Через, Великолепный, плагин, переходами, gallery, разнообразными, слайдер
Просмотров: 235 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: