Регистрация    Войти
Авторизация

Слайдер для ucoz

Слайдер для ucoz

Слайдер для ucoz. Давайте рассмотрим пример установки слайдера для uCoz, под названием Slider, который будет отображать на вашем сайте последние изображения новостей.
Шаг-1 JS:

следует установить на страницу сайта, после тега body, следующие скрипты:


<script type="text/javascript" src="jquery.nivo.slider.pack.js"></script> 
<script type="text/javascript">
  $(window).load(function() {
  $('#slider').nivoSlider();
  });
</script>



Шаг-2 Html:

Заходим в админ панель => Инструменты => Информеры => Создать информер

И создаём информер новостей, с нужными вам параметрами, советую установить количество материалов: 5 или 7

теперь копируем в информер следующий код:


<a href="$ENTRY_URL$"><?if($IMG_SMALL_URL1$)?><img src="$IMG_SMALL_URL1$" title="$TITLE$"><?else><?if($IMG_URL1$)?><img src="$IMG_URL1$" title="$TITLE$"><?endif?><?endif?></a>


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


<div id="slider" class="nivoSlider"> 
$MYINF_1$
  </div>



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


<div id="slider" class="nivoSlider"> 
<script type="text/javascript" src="http://www.center-dm.ru/informer/1"></script>
  </div>


Шаг-3 CSS:

<style> 

/* меняем размер изображений высоту и ширину */
#slider {  
  position:relative;
  width:500px;
  height:100px;
  background:url('loading.gif') no-repeat 50% 50%;
}

#slider img {
  position:absolute;
  top:0px;
  left:0px;
  display:none;
}

#slider a {
  border:0px;
  display:block;
}

/* выравниваем по центру квадраты переключателя */
.nivo-controlNav {
  position:absolute;
  left:180px;
  bottom:-25px;
}

.nivo-controlNav a {
  display:block;
  width:22px;
  height:22px;
  background:url('bullets.png') no-repeat;
  text-indent:-9999px;
  border:0;
  margin-right:3px;
  float:left;
}

.nivo-controlNav a.active {
  background-position:0 -22px;
}

.nivo-directionNav a {
  display:block;
  width:30px;
  height:30px;
  background:url('arrows.png') no-repeat;
  text-indent:-9999px;
  border:0;
}
a.nivo-nextNav {
  background-position:-30px 0px;
  right:15px;
}

a.nivo-prevNav {
  left:15px;
}

.nivo-caption {
  text-shadow:none;
  font-family: Helvetica, Arial, sans-serif;
}
.nivo-caption a {  
  color:#efe9d1;
  text-decoration:underline;
}

.clear {
  clear:both;
}

.nivoSlider {
  position:relative;
}

.nivoSlider img {
  position:absolute;
  top:0px;
  left:0px;
}

.nivoSlider a.nivo-imageLink {
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  border:0;
  padding:0;
  margin:0;
  z-index:6;
  display:none;
}

.nivo-slice {
  display:block;
  position:absolute;
  z-index:5;
  height:100%;
}

.nivo-box {
  display:block;
  position:absolute;
  z-index:5;
}

/* Полупрозрачный чёрный фон */
.nivo-caption {
  position:absolute;
  left:0px;
  bottom:0px;
  background: url('fon_nivo-caption.png') repeat;
  font:11px Verdana,Arial,Helvetica, sans-serif; color:#fff; font-weight: bold;
  width:100%;
  z-index:8;
}

.nivo-caption p {
  padding:6px;
  margin:0;
}
.nivo-caption a {
  display:inline !important;
}
.nivo-html-caption {
  display:none;
}

.nivo-directionNav a {
  position:absolute;
  top:25%;
  z-index:9;
  cursor:pointer;
}

.nivo-prevNav {
  left:0px;
}
.nivo-nextNav {
  right:0px;
}

.nivo-controlNav a {
  position:relative;
  z-index:9;
  cursor:pointer;
}
.nivo-controlNav a.active {
  font-weight:bold;
}
</style>


Примечание:


Для тех кто впервые сталкивается со слайдером, хочу сказать, что данный слайдер будет отображать изображения новостей в том случае, если вы добавляете картинку новостей через функцию добавить изображение, которое находиться в Добавлении новостей, к которым вы переходи с главной странице своего сайта, нажав на ссылку Добавить новость! (надеюсь не запутал).


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

Скачать: nivoslider_dla-ucoz.rar [98,52 Kb] (cкачиваний: 868)
Новые скрипты для ucoz

Есть вопросы по шаблону или скрипту? так задай их и мы ответим!

Автор: chestr  24-03-2011, 09:21   Просмотров: 29316   
ucoz, Слайдер
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо зайти на сайт под своим именем.

Zombine 10 апреля 2011 15:31
Не подскажите, что за ошибка, у меня на первом слайде показывает текст title снизу, а уже далее при перелистывании - не показывает , у вас точно всё правильно в кодах?

          1
Sergey Sivagin 10 апреля 2011 17:55
Я так понимаю ошибка в том что вы не правильно добавили картинку, либо нужно изменять код. Вы заголовок задали? Я попробую его сейчас поставить.

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

          2
Zombine 10 апреля 2011 19:28
правильно всё добавил, заголовок титл вписан, а информер не ссылкой , а напрямую с сайта, у Автора пример стоит без встраивания в ucoz новости, так что мб недочеты не замечены были.
Вот собственно и слайдер
ссылка

          3
Sergey Sivagin 10 апреля 2011 20:18
Вроде бы все отлично работает.

          4
Zombine 10 апреля 2011 20:22
Отлично работает на моём сайте или ты уже попробовал у себя там поставить?

          5
Sergey Sivagin 10 апреля 2011 20:48
Zombine, На твоем сайте. Какой у тебя браузер ? Если Opera то естественно оно будет плохо работать. У меня Mozilla FireFox и та хня красиво переливается.

          6
Zombine 10 апреля 2011 21:56
Ты кажется забыл про что я спрашивал)
Вопрос:
Не подскажите, что за ошибка, у меня на первом слайде показывает текст title снизу, а уже далее при перелистывании - не показывает , у вас точно всё правильно в кодах?
Слайдер - он и в африке слайдер), а брузер - google chrome

          7
Пользователь offline zomatsa 11 апреля 2011 07:35
Zombine скинь ссылку на сайт в лс посмотрю че там у тебя

          8
Zombine 12 апреля 2011 06:30
Люди, проснитесь laughing , zomatsa , я уже давал ссылку выше) . Да и кстати, не пойму, я отправил сообщение или нет

          9
Пользователь offline Woldor 7 марта 2012 17:15
скрипт работает но нетак карасива как хотелось
картинки не изменаюца в розмере и вапше какаята хрень он нехочет ставать посередине

          10

Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.