Главная » Файлы » Прочие скрипты » 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> Материал подготовлен Apocalypse | |
Просмотров: 401 | Загрузок: 0 | |
Всего комментариев: 0 | |
| |