главная
файлы
Контакты
регистрация
Навигация
Главная
Шаблоны
Скрипты
Статьи
Иконки
Веб дизайн
Программы
Прочее
 

Ucozu Talk

Для добавления необходима авторизация
 

Популярные переходы
Yandex: кнопки действие
Yandex: кнопки действие
Yandex: https://yandex.ru/clck/jsredir?from=yandex.ru%3Bsearch%3Bweb%3B%3B
Yandex: https://yandex.ru/clck/jsredir?from=yandex.ru%3Bsearch%3Bweb%3B%3B
Yandex: https://yandex.ru/clck/jsredir?from=yandex.ru%3Bsearch%3Bweb%3B%3B
Yandex: https://yandex.ru/clck/jsredir?from=yandex.ru%3Bsearch%3Bweb%3B%3B
Yandex: https://yandex.ru/clck/jsredir?from=yandex.ru%3Bsearch%3Bweb%3B%3B
Yandex: https://yandex.ru/clck/jsredir?from=yandex.ru%3Bsearch%3Bweb%3B%3B
Yandex: https://yandex.ru/clck/jsredir?from=yandex.ru%3Bsearch%3Bweb%3B%3B
 

RSS лента

RSS лента

Подпишись на обновления по электронной почте!
 

Опрос
Зайдете ли вы к нам еще ?
[ Результаты · Архив опросов ]
Всего ответов: 281
 

Слайдер Nivo Slider для uCoz

Добавил: Вадим
Оценка:
  • 1
  • 2
  • 3
  • 4
  • 5


Поскольку во многих веб дизайнах теперь стало модно использовать слайдеры, я решил найти полностью рабочий слайдер, который с легкостью смог бы выводить новости сайта ucoz с помощью информера, работает он с библиотекой jquery.

Установка:

1. Устанавливаем JS скрипт слайдера, на страницу где он будет находится, после тега body:
Code
<script type="text/javascript" src="jquery.nivo.slider.pack.js"></script>  
<script type="text/javascript">  
  $(window).load(function() {  
  $('#slider').nivoSlider();  
  });  
</script>


2. Создаем информер для вывода новостей: админ панель => Инструменты => Информеры => Создать информер:
И создаём информер новостей, с нужными вам параметрами, советую установить количество материалов: 5 или 7
После этого копируем в информер данный код:
Code
<a href="$ENTRY_URL$"><?if($IMG_SMALL_URL1$)?><img src="$IMG_SMALL_URL1$" title="$TITLE$"><?else><?if($IMG_URL1$)?><img src="$IMG_URL1$" title="$TITLE$"><?endif?><?endif?></a>


3.Копируем HTML код каркаса слайдера в то место на странице где должен находится слайдер:
Code
<div id="slider" class="nivoSlider">  
$MYINF_1$  
  </div>

(!)код $MYINF_1$ меняем на свой, он отображается в свойствах информера.

4.Копируем код в таблицу стилей Css:
Code
/* меняем размер изображений высоту и ширину */  
#slider {  
  position:relative;  
  width:500px;  
  height:100px;  
  background:url('loading.gif') no-repeat 50% 50%;  
}  

#slider img {  
  position:absolute;  
  top:0px;  
  left:0px;  
  display:none;  
}  

#slider a {  
  border:0px;  
  display:block;  
}  

/* выравниваем по центру квадраты переключателя */  
.nivo-controlNav {  
  position:absolute;  
  left:180px;  
  bottom:-25px;  
}  

.nivo-controlNav a {  
  display:block;  
  width:22px;  
  height:22px;  
  background:url('bullets.png') no-repeat;  
  text-indent:-9999px;  
  border:0;  
  margin-right:3px;  
  float:left;  
}  

.nivo-controlNav a.active {  
  background-position:0 -22px;  
}  

.nivo-directionNav a {  
  display:block;  
  width:30px;  
  height:30px;  
  background:url('arrows.png') no-repeat;  
  text-indent:-9999px;  
  border:0;  
}  
a.nivo-nextNav {  
  background-position:-30px 0px;  
  right:15px;  
}  

a.nivo-prevNav {  
  left:15px;  
}  

.nivo-caption {  
  text-shadow:none;  
  font-family: Helvetica, Arial, sans-serif;  
}  
.nivo-caption a {  
  color:#efe9d1;  
  text-decoration:underline;  
}  

.clear {  
  clear:both;  
}  

.nivoSlider {  
  position:relative;  
}  

.nivoSlider img {  
  position:absolute;  
  top:0px;  
  left:0px;  
}  

.nivoSlider a.nivo-imageLink {  
  position:absolute;  
  top:0px;  
  left:0px;  
  width:100%;  
  height:100%;  
  border:0;  
  padding:0;  
  margin:0;  
  z-index:6;  
  display:none;  
}  

.nivo-slice {  
  display:block;  
  position:absolute;  
  z-index:5;  
  height:100%;  
}  

.nivo-box {  
  display:block;  
  position:absolute;  
  z-index:5;  
}  

/* Полупрозрачный чёрный фон */  
.nivo-caption {  
  position:absolute;  
  left:0px;  
  bottom:0px;  
  background: url('fon_nivo-caption.png') repeat;  
  font:11px Verdana,Arial,Helvetica, sans-serif; color:#fff; font-weight: bold;  
  width:100%;  
  z-index:8;  
}  

.nivo-caption p {  
  padding:6px;  
  margin:0;  
}  
.nivo-caption a {  
  display:inline !important;  
}  
.nivo-html-caption {  
  display:none;  
}  

.nivo-directionNav a {  
  position:absolute;  
  top:25%;  
  z-index:9;  
  cursor:pointer;  
}  

.nivo-prevNav {  
  left:0px;  
}  
.nivo-nextNav {  
  right:0px;  
}  

.nivo-controlNav a {  
  position:relative;  
  z-index:9;  
  cursor:pointer;  
}  
.nivo-controlNav a.active {  
  font-weight:bold;  
}


Ну вот и все, теперь у вас на странице будет находится полностью рабочий слайдер новостей, если хотите изменить его под дизайн вашего сайта, используете css стили так как в коде прописаны комментарии.
Автор\Источник: center-dm.ru
Добавлено: 09.06.2012 в 16:05
Вы находитесь на странице материала Слайдер Nivo Slider для uCoz из раздела нашего сайта

Веб дизайн для ucoz

который можно скачать совершенно бесплатно и без регистрации.
Также рекомендуем:
  • Набор иконок - Flags
  • Шаблон футбольного UCOZ сайта.
  • Шаблон - u7even для uCoz
  • PSD оригинал формы авторизации
  • Harmony от Mr.doob
  • Комментарии сайта
  • Комментарии Вконтакте
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
О нас
Ucozu.Ru - перспективный сайт с удобным дизайном и многими уникальными статьями, файлами. Здесь вы сможете скачивать и просматривать файлы без регистрации.На нашем сайте вы найдёте много шаблонов,скриптов и тд.Все для uCoz.Так же множество статей по раскрутки вашего сайта и системе uCoz.
 

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

 

Рекомендуем
Волоконно-оптические кроссы

Последние комментарии
17:06
winbloger
Понравился шаблон, спасибо!
Ответить
30.01.2015
12:40
Peshka0973
Если отображение страницы исчезло, то скорее всего потерли лишнего. А вставлять надо туда, где должн
Ответить
18.08.2014
13:11
Peshka0973
А конкретнее можно? Как ругается при этом?
Ответить
02.04.2014
11:58
Arrow
не рабоотает
Ответить
02.04.2014
09:55
Peshka0973
Когда вызываешь файловый менеджер, из меню - Управление - Файловый менеджер, то в первое окно которо
Ответить
18.03.2014
09:01
Peshka0973
Крик души ? ;о))
По какому поводу, и кто имеется ввиду ?
Ответить
14.02.2014
14:22
Leonid
Что за люди ._. стыдно за таких. Учите русский и книжки читайте для общего развития.
Ответить
13.02.2014
09:38
Peshka0973
А полный текст ошибки?
Ответить
10.01.2014
18:30
_dahack_
Админы помогите!!! у меня проблема с разделом "Стена" пишет App is blocked и фото не грузя
Ответить
09.01.2014
09:16
Peshka0973
А почему мы не должны верить? Мы все должны тебя поблагодарить за труд ! :о))
Сейчас ты навер
Ответить
09.01.2014
09:39
Peshka0973
Какая панель имеется ввиду? Что касается расположения информеров, то в CSS гляньте.
Советую п
Ответить
29.11.2013
23:04
Аля
все установила,все получилось. Только не высвечивается сверху сама панель управления и конструктор с
Ответить
27.11.2013
11:59
Peshka0973
Да, прикольная :о))
Ответить
30.05.2013
15:22
Aviana
Клевая! respect
Ответить
29.05.2013
09:44
Peshka0973
Снизу под статьей справа есть кнопка - Скачать файл. Жми и получай, регистрироваться не надо.
Ответить
13.05.2013

©Ucozu.Ru 2018