Уважаемые пользователи skript-na-ucoz.ucoz.ru. Вы найдете у нас на портале - и сможете скачать бесплатно различные программы для вебмастеров и не только, фильмы, игры, все для фотошопа, скрипты для ваших сайтов, бесплатные шаблоны, модули, хаки и релизы популярных CMS таких-как: Datalife Engine, WordPress, Joomla, Drupal, Ucoz и многое другое, а также обсудить и получить помощь на нашем форуме. С Уважением Администрация skript-na-ucoz

Слайдер для ucoz
После регистрации у вас появиться еще одна ссылка для бесплатного скачивания и пропадет рекламма!
03.06.2011, 07:38


Слайдер для ucoz. Давайте рассмотрим пример установки слайдера для uCoz, под названием Slider, который будет отображать на вашем сайте последние изображения новостей.
Шаг-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 Html:

Заходим в админ панель => Инструменты => Информеры => Создать информер

И создаём информер новостей, с нужными вам параметрами, советую установить количество материалов: 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>


а там, где хотите видеть слайдер, устанавливайте следующий код, в котором находиться ваш информер:

Code
<div id="slider" class="nivoSlider">
$MYINF_1$
  </div>


Хочу сразу предупредить, слайдер будет отображаться не корректно, если вы пропишите информер ссылкой на скрипт то а именно:

Code
<div id="slider" class="nivoSlider">
<script type="text/javascript" src="http://www.center-dm.ru/informer/1"></script>
  </div>


Шаг-3 CSS:

Code
<style>

/* меняем размер изображений высоту и ширину */
#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;
}
</style>


Примечание:

Для тех кто впервые сталкивается со слайдером, хочу сказать, что данный слайдер будет отображать изображения новостей в том случае, если вы добавляете картинку новостей через функцию добавить изображение, которое находиться в Добавлении новостей, к которым вы переходи с главной странице своего сайта, нажав на ссылку Добавить новость! (надеюсь не запутал).

Чтобы вам не пришлось искать где изменить например высоту квадратных кнопок, я прописал комментария для наиболее важных стилей, которые понадобятся для изменениях под ваш дизайн.
Категория: Скачать Скрипты для Ucoz бесплатно | Добавил: Kenik | Теги: ucoz, скрипты для ucoz, Для, слайдер
Просмотров: 562 | Загрузок: 0


Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Мини профиль
Для просмотра мини профиля,войдите на сайт как пользователь.
Мини-чат
Для добавления необходимо
войти или зарегистрироваться
Статистика
Счетчики сайта
Анализ сайта skript-na-ucoz.ucoz.ru Top.Mail.Ru

Яндекс.Метрика
Сейчас online
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Сегодня наш сайт посетили
Счетчик пользователей
Сегодня нас посетило
Счетчики сайта
  • Счетчик юзеров
  • Всего юзеров: 1196
    За месяц: 0
    За неделю: 0
    За вчера: 0
    Сегодня: 0
  • Счетчик материалов
  • Всего файлов: 10240
    Всего новостей: 31
    Всего статей: 0
    Темы форума: 2521
    Коментариев: 16
    Фотоальбом: 3
    Скачали: 10240
    Каталог сайтов: 35
    Онлайн Игр: 213
    Онлайн Видео: 8596
    Партнеры сайта
    Стать партнером Стать партнером Стать партнером
    Популярное
    Скачиваемое
    Интерестное