» » >

Hash-slider новостей для uCoz
·
22.09.2013, 16:14

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

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

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

JS

<script language="JavaScript" type="text/javascript" src="http://ucoz-helper.ucoz.com/sliders/hashslider.js"></script>
<script language="JavaScript" type="text/javascript" src="http://ucoz-helper.ucoz.com/sliders/jquery.mousewheel.min.js"></script>
Шаг 2 - Установим HTML:

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

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

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

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

HTML

<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>

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

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

HTML

<!-- Начало тегов слайдер-->
  <div id="slider">
  <ul>
  $MYINF_1$  
  </ul>
  </div>
   
  <div id="slider_ten">
  <img src="http://ucoz-helper.ucoz.com/sliders/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$)
- тень под слайдером
- кнопки переключения
- кнопки переключения в виде кружочков

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

HTML

<div id="slider">
<ul>
  <script type="text/javascript" src="http://www.center-dm.ru/informer/1"></script>
</ul>
</div>
Шаг 3 - Установим CSS:

И так, наш слайдер почти готов, всё что нам осталось, так это прописать 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://ucoz-helper.ucoz.com/sliders/next_button.png);
  text-indent: -99999px;
  float: right;
  cursor: pointer;
}
   
#left {
  width: 105px; height: 40px;
  background-image: url(http://ucoz-helper.ucoz.com/sliders/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://ucoz-helper.ucoz.com/sliders/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), поэтому прописывать дополнительные библиотеки нам не нужно.

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

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

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

Категория: Слайдеры | Добавил: tashkent97
Просмотров: 1038 | Загрузок: 372 | Источник: center-dm.ru | Рейтинг: 5.0/1
Всего комментариев: 0
dth="100%" cellspacing="1" cellpadding="2" class="commTable">
Имя *: Email:
Яндекс.Метрика Яндекс цитирования<