Гость !!! | RSS
Сегодня на сайте
Новые сообщения Участники Правила форума Поиск RSS
  • Страница 1 из 1
  • 1
Модератор форума: Khufu  
Форум » Скрипты » Эффекты..., трюки... » Слайд-шоу_-_NivoSlider для uCoz
Слайд-шоу_-_NivoSlider для uCoz
« Dimmon » Дата: Понедельник, 02 Мая 2011, 18:41:36 | Сообщение # 1
Любопытные
Dimmon
«Проверенные»
Сообщений: 66
Замечания: ±
Статус Настроения: [редактировать]
Отсутствует

Доступно только для пользователей

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

Идем в ПУ -> Инструменты -> Информеры -> Создать информер.
Создаём информер новостей, с нужными вам параметрами, и копируем в информер следующий код:
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_9$
</div>

Далее идут CSS-стили:
Code
<style>
body {margin:0 auto;padding:0;width:100%;height:100%;background:#fff;}
body, td {font:11px Verdana, Arial, Helvetica, sans-serif;color:#555;}
img {border:none;}

a {text-decoration:none;outline:none}
a:link {text-decoration:none;color:#2C68A6;}
a:visited {text-decoration:none;color:#2C68A6;}
a:hover {text-decoration:none;color:#60a62c;}

#container {margin:0px auto;width:500px;height:100%;}
#container_os {margin:100px 0px 50px 0px;}
#container_os h2 {font:145%/1.5 Verdana,Arial,Helvetica,sans-serif;color:#008000;font-weight:bold;border-bottom:1px solid #D6D6D6;}
.otstup {margin:20px 0px 20px 0px;}

        /* размер изображений высота/ширина */
#slider {
      position:relative;
      width:400px;
      height:200px;
      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:10px; /* положение кубиков от лева */
      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;
}

Внимание!
Слайдер будет отображать изображения новостей в том случае, если вы добавляете картинку новостей непосредственно через функцию добавить изображение. Иначе не Айс!

Кто не желает пучится, Можете скачать в Прикреплениях архив с готовыми файлами

=============
=============
=============

Тоже слайд демо . смотрим исходник


 
Форум » Скрипты » Эффекты..., трюки... » Слайд-шоу_-_NivoSlider для uCoz
  • Страница 1 из 1
  • 1
Поиск:
мини-чат
Tagis Балаболка
Инфо сайта
Инфо форума

Все права защищены! shalbuzdag-666.ucoz.ru © 2009 – 2024 ()
уЧётчик сайта