Страница 1 из 11
Форум » Всё для uCoz » Скрипты для uCoz » Слайдер новостей
Слайдер новостей
yaN - Offline
Дата: Понедельник, 03.12.2012, 20:05 | Сообщение # 1
Нет аватара
Сообщения: 1395

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

kick - Offline
Дата: Пятница, 28.12.2012, 18:16 | Сообщение # 2
Нет аватара
Сообщения: 13
хороший скрипт 10.10

$h0cK, ты его на сайт ставил? или нет?
yaN - Offline
Дата: Пятница, 28.12.2012, 19:13 | Сообщение # 3
Нет аватара
Сообщения: 1395
kick, нет а что?
barsik007 - Offline
Дата: Суббота, 29.12.2012, 22:12 | Сообщение # 4
Нет аватара
Сообщения: 3
Хороший, скрипт) мне понравился!
yaN - Offline
Дата: Воскресенье, 30.12.2012, 08:07 | Сообщение # 5
Нет аватара
Сообщения: 1395
это хорошо;)
bagrov - Offline
Дата: Четверг, 03.01.2013, 13:27 | Сообщение # 6
Нет аватара
Сообщения: 40
А есть такой же только для черного дизайна?
Форум » Всё для uCoz » Скрипты для uCoz » Слайдер новостей
Страница 1 из 11
Поиск:
Администрация проекта не несет ответственности за публикуемые материалы.
Дизайн полностью принадлежит "All-CsPro.Ru".
Дизайн сайта разработал life_man, сверстал sp1nn15.
Копирование материалов с сайта без разрешения запрещено. © 2011-2018 Хостинг от uCoz.