Слайдер для uCoz с миниатюрами

Украшения 2012-Мар-23 zeffier 4.3k 1

Красивый слайдер для модуля новости на uCoz. Этот слайдер с миниатюрами сделан с пмощью Jquery и HTML, но у этого есть большой минус - сложная установка, потому что придется ставить два информера, за место одного.

Инструкция по установке скрипта:
Шаг 1 - Установим JS:

Все пользователи юкоза знают, что на веб-сайтах uCoz уже встроена библиотека jQuery, потому нам, стало быть, следует установить в конец странички перед тегом последующие два скрипта:

Code

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

Непревзойденно, сейчас нам нужно сделать 2 схожих информера, но с различным html кодом в шаблоне:
Заходим в Администраторскую панель => Инструменты => Информеры => Сделать информер
Раздел: Новости сайта
Тип данных: Материал
Метод сортировки: Количество просмотров (a или d/ любое)
Количество материалов: 5
Количество колонок:1
и устанавливаем в 1-ый информер последующий html код:

Code

<div class="panel" title="Panel $NUMBER$">
  <div class="wrapper">
  <img src="$IMG_SMALL_URL1$" alt="temp"><img src="$IMG_URL1$" alt="temp">
  <div class="photo-meta-data">
  <a href="$ENTRY_URL$">$TITLE$</a>
  </div>
  </div>
</div>

Теперь нам нужно создать второй такой же информер ,но вот с этаким кодом:

Code

сейчас установим в необходимое место на странички вашего веб-сайта, последующий код слайдера уже со встроенными информерами в него:

Code

<div id="page-wrap">
  <div class="slider-wrap">
  <div id="center_dm-ru_photoslider" class="csw">
  <div class="panelContainer">$MYINF_1$</div>
  </div>
  <div id="movers-row">$MYINF_2$</div>
  </div>
</div>

Шаг 3 - Установим CSS:
Наш слайдер практически готов, все что нам, вообщем то, осталось, так это прописать css стили:

Code

/* Слайдер с миниатюрами
------------------------------------------*/
#page-wrap {
  position: relative;
  width: 502px;
}

#page-wrap a {outline: none; text-decoration:none;}
#page-wrap a:link,
#page-wrap a:visited {color:#cbcbcb; text-shadow: 1px 1px 1px #000;}
#page-wrap a:hover {color:#8cea87;}

.slider-wrap {
  position: absolute;
  overflow: hidden;
  width:502px;
  height: 150px;
}

  .panelContainer {
  position: relative;

}

.stripViewer {
  position: relative;
  overflow: hidden;
  width: 502px;
  height: 150px;
}

.panel {
  float: left;
  position: relative;
  width: 502px;
}

.wrapper {
  border: 1px solid #333;
}

.photo-meta-data {
  position: relative;
  font: 110%/1.5 Verdana,Arial,Helvetica, sans-serif; font-weight: bold;
  color:#cbcbcb; text-shadow: 1px 1px 1px #000;
  background: url(http://www.center-dm.ru/ucoz/ContentSlider/transpBlack.png);
  padding: 5px 5px 5px 5px;
  margin-top: -30px;
  z-index: 9999;
}

.stripNavL,
.stripNavR,
.stripNav {display: none; }

#movers-row {
  width: 502px;
  margin: -43px 0 0 0;
}

#movers-row div {
  float: left;
  width: 90px;
  height: 30px;
  margin: 0px 5px 10px 5px;
}

#movers-row img {
  width: 90px;
  height: 30px;
  border: 1px solid #333;
}

.cross-link {
  position: relative;
  display: block;
  width: 90px;
  margin-top: -8px;
  padding-top: 10px;
  z-index: 9999;
}

.active-thumb {
  background: transparent url(http://www.center-dm.ru/ucoz/ContentSlider/icon-uparrowsmallwhite.png) top center no-repeat;
}/* -------------------------------------- */

Желаю также напомнить, что следует устанавливать конкретно системную переменную информера такового вида ($MYINF_1$), а не прописывать ссылкой, в неприятном случае информер может показывать контент ошибочно либо вообщем закончит работать как показано на страничке демо.
Скорость слайдера меняем во 2-м скрипте, меняем значение 2000 на свое.

Демо

Источник: не указан

1 комментарий

Порядок вывода комментариев:

Спам

1 [33_RUS]Wolf • 13:19, 2012-Мар-27

спасибо! опробую =)

Вы не авторизованы!

Вакансии

Слайдер для uCoz с миниатюрами