Главная » Файлы » Прочие скрипты » jQuery

Стильный слйдер с необычным эффектом навигации на jQuery для uCoz
24.06.14, 16:38:04

Скачать файл




Вроде как на внешний вид совершенно обычный слайдер, но когда я попробовал пролистнуть изображения, увидел очень интересный эффект и не мог не оформить плагин на этом сайте

Для начала посмотрите ДЕМО

Вот моё тестирование в фидле: ДЕМО

Установка:

Для правильной работы плагина рекомендуется jQuery версии 1.6.1

После /head на нужных страницах сайта вставляйте:
Код
<script type="text/javascript" src="/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="/js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="/js/jquery.gridnav.js"></script>
<script type="text/javascript">
$(function() {
$('#tj_container').gridnav({
type: {
mode:'disperse', // use def | fade | seqfade | updown | sequpdown | showhide | disperse | rows
speed:500, // for fade, seqfade, updown, sequpdown, showhide, disperse, rows
easing:'', // for fade, seqfade, updown, sequpdown, showhide, disperse, rows  
factor:'', // for seqfade, sequpdown, rows
reverse:'' // for sequpdown
}
});
});
</script>

В самый низ вашего css:
Код
.tj_container {
width:800px;
height:400px;
position:relative;
margin:30px auto;
}
.tj_nav {
position:absolute;
right:-80px;
top:50%;
margin-top:-35px;
height:70px;
width:39px;
}
.tj_nav span {
width:39px;
height:25px;
background:transparent url(/images/prev.png) no-repeat top left;
position:absolute;
top:0px;
left:0px;
text-indent:-9000px;
opacity:0.7;
cursor:pointer;
/*-webkit-transition: all 0.2s ease-in-out;
-moz-transition:all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-transition: all 0.2s ease-in-out;*/
}
.tj_nav span.tj_next {
background-image:url(/images/next.png);
top:auto;
bottom:0px;
left:0px;
}
.tj_nav span:hover {
opacity:1.0;
}
.tj_wrapper {
width:100%;
height:100%;
position:relative;
margin:0px auto;
}
.tj_wrapper ul li {
float:left;
list-style:none;
}
.tj_wrapper ul li a {
outline:none;
display:block;
margin:5px;
background:transparent url(/images/bg_thumb.jpg) no-repeat center center;
}
.tj_wrapper ul li a img {
display:block;
border:none;
opacity:0.7;
-moz-box-shadow:2px 2px 4px #8e8e8e;
-webkit-box-shadow:2px 2px 4px #8e8e8e;
box-shadow:2px 2px 4px #8e8e8e;
/*-webkit-transition: all 0.2s ease-in-out;
-moz-transition:all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-transition: all 0.2s ease-in-out;*/
}
.tj_wrapper ul li a img:hover {
opacity:1.0;
}
/* Specific style for the examples */
.example10 .tj_container {
height:600px;
}

Следующий код в то место, где должна быть галерея:
Код
<div id="tj_container" class="tj_container">  
  <div class="tj_nav">  
  <span id="tj_prev" class="tj_prev">Previous</span>  
  <span id="tj_next" class="tj_next">Next</span>  
  </div>  
  <div class="tj_wrapper">  
  <ul class="tj_gallery">  
  <li><a href="#"><img src="Ссылка на страницу" /></a></li>  
  <li><a href="#"><img src="Ссылка на страницу" /></a></li>  
  <li><a href="#"><img src="Ссылка на страницу" /></a></li>  
  <li><a href="#"><img src="Ссылка на страницу" /></a></li>  
  <li><a href="#"><img src="Ссылка на страницу" /></a></li>  
  <li><a href="#"><img src="Ссылка на страницу" /></a></li>  
  <li><a href="#"><img src="Ссылка на страницу" /></a></li>  
  <li><a href="#"><img src="Ссылка на страницу" /></a></li>  
  <li><a href="#"><img src="Ссылка на страницу" /></a></li>  
  <li><a href="#"><img src="Ссылка на страницу" /></a></li>  
  <li><a href="#"><img src="Ссылка на страницу" /></a></li>  
  <li><a href="#"><img src="Ссылка на страницу" /></a></li>  
  <li><a href="#"><img src="Ссылка на страницу" /></a></li>  
  <li><a href="#"><img src="Ссылка на страницу" /></a></li>  
  <li><a href="#"><img src="Ссылка на страницу" /></a></li>  
  <li><a href="#"><img src="Ссылка на страницу" /></a></li>  
  <li><a href="#"><img src="Ссылка на страницу" /></a></li>  
  <li><a href="#"><img src="Ссылка на страницу" /></a></li>  
  <li><a href="#"><img src="Ссылка на страницу" /></a></li>  
  <li><a href="#"><img src="Ссылка на страницу" /></a></li>  
  </ul>  
  </div>  
  </div>
Скрипты из прикреплённого архива залейте в папку js, картинки в папку images

Материал подготовлен Apocalypse
Категория: jQuery | Добавил: Apocalypse | Теги: слйдер, Стильный, ucoz, навигации, на, необычным, JQuery, эффектом, для
Просмотров: 409 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: