Фото новостной слайдер с уникальным эффектом навигации для uCoz

[ Скачать с сервера (8.7Kb) ]

Самые обыкновенные, на первый взгляд, вещи могут таить в себе сюрпризы. Как раз такая ситуация произошла, когда мы перебирали различные слайдеры для просмотра изображений и наткнулись на, как нам показалось, самый обыкновенный. Но, как было сказано выше, он содержал в себе один большой и приятный сюрприз - просто сногсшибательная система навигации! Такие интересные готовые решения это залог успешного итога в создание сайтов.

А речь идет о новом слайдере изображений от Ucoz, и создатели порадовали тем, что когда начинаешь листать изображения получаешь тот самый интересный эффект. Для корректной работы плагина рекомендуем иметь версию JQuery не ниже 1.6.1. Мы пробовали на других, но на 1.6.1 были получены наилучшие результаты. Так что советуем не экспериментировать и не изобретать колесо, а послушать совет, потому что этот слайдер-плагин вас реально порадует. Само по себе оформление изображений -  эффект легкой дымки на картинке. Выбирая изображения, дымка пропадает и можно рассмотреть все подробности. Но когда вы хотите пролистнуть изображения - тут появляется главный сюрприз - различные эффекты при смене изображений и их порядка. Они то плавно выплывают с выбранной стороны, то появляются прямо из центра страницы или сменяются, покачиваясь, убегая в оба направления сразу. Такую штуку точно хочется иметь на своем сайте, так что мы рекомендуем поставить плагин и поделиться впечатлениями.

ВАЖНО! Скрипты из прикреплённого архива залейте в папку js, картинки в папку images

Установка:

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

После /head на нужных страницах сайта вставляйте:

<scripttype="text/javascript"src="/js/jquery.easing.1.3.js"></script> <scripttype="text/javascript"src="/js/jquery.mousewheel.js"></script> <scripttype="text/javascript"src="/js/jquery.gridnav.js"></script> <scripttype="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:

position:relative; margin:30pxauto; } .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:0pxauto; } .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:2px2px4px#8e8e8e; -webkit-box-shadow:2px2px4px#8e8e8e; box-shadow:2px2px4px#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; }

Следующий код в то место, где должна быть галерея:

<divid="tj_container"class="tj_container"> <divclass="tj_nav"> <spanid="tj_prev"class="tj_prev">Previous</span> <spanid="tj_next"class="tj_next">Next</span> </div> <divclass="tj_wrapper"> <ulclass="tj_gallery"> <li><ahref="#"><imgsrc="Ссылка на страницу"/></a></li> <li><ahref="#"><imgsrc="Ссылка на страницу"/></a></li> <li><ahref="#"><imgsrc="Ссылка на страницу"/></a></li> <li><ahref="#"><imgsrc="Ссылка на страницу"/></a></li> <li><ahref="#"><imgsrc="Ссылка на страницу"/></a></li> <li><ahref="#"><imgsrc="Ссылка на страницу"/></a></li> <li><ahref="#"><imgsrc="Ссылка на страницу"/></a></li> <li><ahref="#"><imgsrc="Ссылка на страницу"/></a></li> <li><ahref="#"><imgsrc="Ссылка на страницу"/></a></li> <li><ahref="#"><imgsrc="Ссылка на страницу"/></a></li> <li><ahref="#"><imgsrc="Ссылка на страницу"/></a></li> <li><ahref="#"><imgsrc="Ссылка на страницу"/></a></li> <li><ahref="#"><imgsrc="Ссылка на страницу"/></a></li> <li><ahref="#"><imgsrc="Ссылка на страницу"/></a></li> <li><ahref="#"><imgsrc="Ссылка на страницу"/></a></li> <li><ahref="#"><imgsrc="Ссылка на страницу"/></a></li> <li><ahref="#"><imgsrc="Ссылка на страницу"/></a></li> <li><ahref="#"><imgsrc="Ссылка на страницу"/></a></li> <li><ahref="#"><imgsrc="Ссылка на страницу"/></a></li> <li><ahref="#"><imgsrc="Ссылка на страницу"/></a></li> </ul> </div> </div>