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

Ucozu Talk

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

Популярные переходы
 

RSS лента

RSS лента

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

Опрос
Что-бы вы хотели видеть больше всего у нас на сайте ?
[ Результаты · Архив опросов ]
Всего ответов: 185
 

Слайдер 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

который можно скачать совершенно бесплатно и без регистрации.
Также рекомендуем:
  • KeePass - программа для хранения паролей
  • Иконки iPhone png
  • Большая коллекция символов Юникод
  • Красивый мини-чат для uCoz
  • Шаблон KIBER для uCoz
  • Комментарии сайта
  • Комментарии Вконтакте
Всего комментариев: 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