Заработок в интернете и раскрутка вашего сайта Вторник, 21.11.2017, 00:03

Меню сайта
Категории раздела
Скрипты для uCoz [119]
Все скрипты uCoz для улучшения Вашего сайта
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0

Яндекс.Метрика Яндекс цитирования
Главная » Статьи » Скрипты для uCoz » Скрипты для uCoz

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

Фото новостной слайдер с уникальным эффектом навигации для 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>

.

Нравится
Категория: Скрипты для uCoz | Добавил: admin (24.12.2013)
Просмотров: 143 | Рейтинг: 0.0/0


Нравится







Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Поиск
Наш баннер
Мы будем признательны,
если Вы разместите нашу кнопку
у себя на сайте!

Заработок в интернете и раскрутка вашего сайта


Языки
Заработок в интернете и продвижение вашего сайта © 2013-2017
Копирование материалов сайта без согласия запрещено!

Яндекс.Метрика

СЕГОДНЯ НАС ПОСЕТИЛИ:

200