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

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

Скачать 📥

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

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

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

В конец вашей страницы сайта, перед тегом устанавливаем два скрипта, весом в 3 кб и 1 кб:
Код
<script language="JavaScript" type="text/javascript" src="http://center-dm.ru/ucoz/vid_slider/hashSlider/hashslider.js"></script>  
<script language="JavaScript" type="text/javascript" src="http://center-dm.ru/ucoz/vid_slider/hashSlider/jquery.mousewheel.min.js"></script>


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

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

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

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

теперь в шаблон информера, вставляем следующий html код:
Код
<li>  
  <a href="$ENTRY_URL$" target="_blank"><?if($IMG_SMALL_URL1$)?><img src="$IMG_SMALL_URL1$"><?else><?if(/_bl/1/60951923.jpg)?><img src="/_bl/1/60951923.jpg"><?endif?><?endif?></a>  
</li>

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

Теперь там где вы хотите видеть отображение содержимого слайдера, устанавливаем следующий 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$)
- тень под слайдером
- кнопки переключения
- кнопки переключения в виде кружочков

Хочу сразу предупредить,что слайдер будет отображаться не корректно, если вы пропишите информер ссылкой на скрипт, а именно:
Код
<div id="slider">  
<ul>  
  <script type="text/javascript" src="http://www.center-dm.ru/informer/1"></script>  
</ul>  
</div>

Шаг 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, изображение
0 Комментариев