Навигатор
Категории раздела
Профиль для ucoz [9]
Новый профиль для ucoz, мини профиль для ucoz, скрипт для ucoz профиль, профиль для сайта ucoz
Ajax для ucoz [15]
Ucoz ajax, ajax окна для ucoz, скрипты ajax для ucoz, новые ajax окна для ucoz, новый вид ajax ucoz
Скрипты для ucoz [136]
скачать скрипты для ucoz, скрипты ucoz
Меню для ucoz [44]
меню для ucoz, горизонтальное меню для ucoz, раздвижное меню ucoz, вертикальное, выпадающие меню ucoz
Календари для ucoz [18]
скрипт календарь cs, скрипт для ucoz календарь, календарь для ucoz cs 1.6, календари ucoz
Часы для ucoz [31]
часы для ucoz, часы для ucoz cs 1.6
Статистика для ucoz [11]
статистика cs для ucoz
Форма входа для ucoz [13]
форма входа для ucoz
Переключатели для ucoz [8]
Переключатели страниц для ucoz
Шапки для ucoz [13]
шапки для ucoz cs 1.6
Раскрутка и продвижение сайта
Интересное


Красивое горизонтальное меню д...
Рейтинг: 49458


Мини профиль + Форма входа
Рейтинг: 47163


Мини-чат для ucoz
Рейтинг: 43795


Скрипт мониторинга cs серверов
Рейтинг: 39095
Статистика
Онлайн всего: 3
Гостей: 3
Пользователей: 0

Сегодня нас посетили:
Dennisdam, PMaster, JamesMop, papedHot
Яндекс.Метрика
Главная » Скрипты для ucoz » Скрипты для ucoz

Слайдер новостей для ucoz

Слайдер новостей для ucoz
Функциональный слайдер для ucoz. Начнем с минусов слайдера: к сожалению он не переключается между изображениями автоматически. Зато он переключается между изображениями, благодаря колёсику мыши и красивым графическим кнопкам. Установка слайдера uCoz ниже...
Шаг-1 Устанавливка скриптов
В конец вашей страницы сайта, где хотим видеть слайдер, перед тегом < /body> вставляем скрипты:
Code
<script language="JavaScript" type="text/javascript" src="http://wallaby.ucoz.ru/js/hashslider.js"></script>  
  <script language="JavaScript" type="text/javascript" src="http://wallaby.ucoz.ru/js/jquery.mousewheel.min.js"></script>
Шаг-2 Создание информера
Админ панель => Инструменты => Информеры => Создать информер

И создаём информер для новостей:

Раздел: Новости сайта
Тип данных: Материалы
Способ сортировки: На ваше усмотрение
Количество материалов: например 5
Количество колонок: 1

Теперь в шаблон информера, вставляем следующий html код:
Code
<li><a href="$ENTRY_URL$" target="_blank"><?if($IMG_SMALL_URL1$)?><img src="$IMG_SMALL_URL1$"><?else><?if($IMG_URL1$)?><img src="$IMG_URL1$"><?endif?><?endif?></a></li>
Шаг-3 Устанавливка слайдера
Теперь там где вы хотите видеть слайдер новостей ucoz, устанавливаем следующий html код:
Code
<!-- Начало тегов слайдер-->  
  <div id="slider">  
  <ul>  
  $MYINF_1$  
  </ul>  
  </div>  
   
  <div id="slider_ten">  
  <img src="http://wallaby.ucoz.ru/slider/shadow.png" alt="тень" />  
  </div>  
   
  <div id="buttons">  
  <div id="left"> goLeft </div>  
  <div id="right"> goRight </div>  
  </div>  
  <div style="clear: both;"></div>  

  <ul id="numbers">  
  <li></li>  
  </ul>  
  <!-- /Конец тегов слайдер -->
$MYINF_$ - номер устанавливаем, который получили во 2 шаге.
Шаг-4 Устанавливка CSS
Заходим в П.У - Дизайн - Упр. Дизайном(CSS) и вставляем стили:
Code
/* Основа слайдера  
  ------------------------------------------*/  
  #slider {  
  position: relative;  
  width: 400px; height: 200px;  
  border: 1px solid #999;  
  overflow: hidden;  
  margin: 75px auto 0 auto;  
  z-index: 10;  
  }  

  #slider ul {  
  position: relative;  
  margin:0px;  
  padding:0px;  
  }  
   
  #slider ul li {  
  float: left;  
  list-style-type: none;  
  }  
   
  /* Ширина и высота тени под слайдером  
  ------------------------------------------*/  
  #slider_ten {  
  position: relative;  
  width: 400px;  
  height: 35px;  
  margin: auto auto;  
  z-index: 10;  
  }  

  /* Настройки правой и левой кнопки  
  ------------------------------------------*/  
  #buttons {  
  position: relative;  
  width: 500px; height: 40px;  
  margin: -100px auto;  
  z-index: 100;  
  }  

  #right {  
  width: 105px; height: 40px;  
  background-image: url(http://wallaby.ucoz.ru/slider/next_button.png');  
  text-indent: -99999px;  
  float: right;  
  cursor: pointer;  
  }  
   
  #left {  
  width: 105px; height: 40px;  
  background-image: url('http://wallaby.ucoz.ru/slider/back_button.png');  
  text-indent: -99999px;  
  float: left;  
  cursor: pointer;  
  }  
   
  /* Переключатель в виде кружочков  
  ------------------------------------------*/  
  #numbers {  
  height: auto;  
  margin: 35px auto;  
  text-align: center;  
  }  
   
  #numbers li {  
  position: relative;  
  width: 18px; height: 13px;  
  background-image: url('http://wallaby.ucoz.ru/slider/dot_sprite.png');  
  background-repeat: no-repeat;  
  float: left;  
  margin: 0 0px 5px 0;  
  cursor: pointer;  
  text-indent: -99999px;  
  z-index: 100;  
  list-style-type: none;  
  }  
   
  .activenum {  
  background-position: 0 -13px;  
  }
Дополнительно
Не забываем, что в шаге номер два, изображение новостей будет отображаться в том случае, если в настройках новостей у вас включена опция, Краткое описание материала
Админ панель => Новости сайта => Настройки модуля => Поля для добавления материалов. Источник: Центер-дм

Совет для вебмастеров!.
Внимание, мы настоятельно рекомендуем использовать домены 2-го уровня, такие как ru,com и т.п. стоят они не дорого, ru можно купить за 99 руб, не нужно делать сайт на юкозовском домене! Сайт с юкозовским доменом долеко не уйдет! Если ж у Вас все таки нету жалких 99 рублей, Вы можите зарегистрировать бесплатно домен 2-го уровня tk, по данной ссылке
ЖМИ И РЕГИСТРИРУЙ
С уважением, администрация.
Категория: Скрипты для ucoz | Добавил: Wallaby
Просмотров: 4729
Теги: Слайдер новостей для ucoz - Скрипты для ucoz, новые интересные Скрипты для ucoz - Слайдер новостей для ucoz
Всего комментариев: 0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
wallaby.ucoz.ru
Поиск
Шаблоны для ucoz
Sape
ремонт ноутбуков ижевск
Лучшая коллекция аниме на анимемувие, валлаби рекомендует!) купить кухню в ульяновске
Скрипты для ucoz
Joomla
Cinema 4D
Графика для uCoz
Copyright wallaby.ucoz.ru - Мировой портал - Joomla,Ucoz,Cinema 4D © 2017 Карта сайта | Карта форума