Hash-slider новостей для uCoz

7783 просмотров Alan_Writer 14.05.2013

Здравствуйте дорогие друзья, читатели и просто гости моего блога, сегодня я предлагаю вам рассмотреть один из вариантов слайдера для uCoz.

Хочу сказать сразу, что у данного слайдера имеется один существенный минус, он не переключается между изображениями автоматически, пользователю придётся самому нажимать на кнопки вперёд и назад, зато он переключается между изображениями, благодаря колёсику мышки, с точки зрения юзабилити - это огромный плюс слайдеру, но довольно слов, давайте посмотрим демо.

Шаг 1 - Установим JS:

В конец вашей страницы сайта, перед тегом устанавливаем два скрипта, весом в 3 кб и 1 кб:

Код

Шаг 2 - Установим HTML:

Теперь давайте создадим информер новостей, для этого заходим в Админ панель => Инструменты => Информеры => Создать информер

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

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

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

Код

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

Теперь там где вы хотите видеть отображение содержимого слайдера, устанавливаем следующий html код на вашей страницы сайта.

Код

<div id="slider">
  <ul>
  $MYINF_1$
  </ul>
  </div>

  <div id="slider_ten">
  <img src="http://center-dm.ru/ucoz/vid_slider/hashSlider/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>

Как вы понимаете, в нашем html коде мы используем 4 контейнера:

- отображение изображений новостей ($MYINF_1$)
- тень под слайдером
- кнопки переключения
- кнопки переключения в виде кружочков

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

Код

Шаг 3 - Установим CSS:

И так, наш слайдер почти готов, всё что нам осталось, так это прописать css стили:

Код

/* Основа слайдера
  ------------------------------------------*/
#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://center-dm.ru/ucoz/vid_slider/hashSlider/next_button.png);
  text-indent: -99999px;
  float: right;
  cursor: pointer;
}

#left {
  width: 105px; height: 40px;
  background-image: url(http://center-dm.ru/ucoz/vid_slider/hashSlider/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://center-dm.ru/ucoz/vid_slider/hashSlider/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;
}

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

Примечание:

Незабываем, что в систему uCoz уже вшита библиотека jQuery (версия 1.3.2 и 1.6.1), поэтому прописывать дополнительные библиотеки нам не нужно.

Также не забываем, что в шаге номер два, изображение новостей будет отображаться в том случае, если в настройках новостей у вас включена опция, Краткое описание материала

Админ панель => Новости сайта => Настройки модуля => Поля для добавления материалов:

Вот и всё, наш с вами слайдер готов.

Теги: новости, Hash-slider, для uCoz, Slider, Hash-slider новостей для uCoz, ucoz, изображение