Шок!!! Рулетка на Webmoney с автовыплатами! Я за 2 часа выиграл 350$ с 20$!!!

  • Страница 1 из 1
  • 1
Слайдер новостей
  • Пользователи
  • Титула нет
  • Сообщений:354
  • Наград:1
  • 12


Слайдер для ucoz. Давайте рассмотрим пример установки слайдера для uCoz, под названием Slider, который будет отображать на вашем сайте последние изображения новостей.
Шаг-1 JS:

следует установить на страницу сайта, после тега body, следующие скрипты:
Код
<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

теперь копируем в информер следующий код:
Код
<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>


а там, где хотите видеть слайдер, устанавливайте следующий код, в котором находиться ваш информер:
Код
<div id="slider" class="nivoSlider">     
$MYINF_1$     
      </div>


Хочу сразу предупредить, слайдер будет отображаться не корректно, если вы пропишите информер ссылкой на скрипт то а именно:
Код
<div id="slider" class="nivoSlider">   
<script type="text/javascript" src="http://www.center-dm.ru/informer/1"></script>     
      </div>


Шаг-3 CSS:

Код
<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>
  • Страница 1 из 1
  • 1
Поиск: