» »

Новостная карусель на информер uCoz

Новостная карусель на информер uCoz

Если у вас на сайте подключен модуль новости, то под него создан оригинальный информер карусель, что означает, он содержит много информации. А сам по себе стандартной величины и его можно поставить в любой блок сайта. И когда вы добавляете новость, то на нем автоматически она появляется. И вам не нужно будет заходить на каталог, а просто промотать и посмотреть какие темы и выйти через него. Все очень удобно в этом случай для пользователя. А если новости еще не на главной странице находятся, то думаю этот скрипт как раз пригодится для функциональности сайта.

Переходим к установке:

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

Потом заходим в админ панель и на странице в самом низу, под модуль находим /body и только перед ним нужно прописать.

Код
<script type="text/javascript" src="/content_jcarousel.js"></script>


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

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

По умолчанию там уже будет код, его убираем и ставим свой.

Код
<li>  
<a href="$ENTRY_URL$" target="_blank">  
<?if($TITLE$)?><?if(len($TITLE$)>28)?><?substr($TITLE$,0,28)?>...<?else?>$TITLE$<?endif?><?endif?><?else?>  
<span>$CATEGORY_NAME$</span>  
</li>


Здесь TITLE,0,30 обозначает, сколько знаков в название материала будет выводить, сами выставляем.

CSS:

Код
#center-dm-carousel {  
  float:left;  
  width:230px;  
  height:300px;  
  overflow:hidden;  
  padding:0px 10px;  
  background: #fff;  
  border: 1px solid #CAD3DA;  
  border-radius:5px;  
}  

#center-dm-carousel li {  
  float:left;  
  width:100%;  
  height:30px;  
  list-style:none;  
  display:block;  
  padding:5px 0px;  
  border-bottom: 1px solid #CAD3DA;  
}  

#center-dm-carousel li a {  
  float:left;  
  width:100%;  
  margin-bottom: 3px;  
}  

#center-dm-carousel span {  
  float:left;  
  color:#999;  
  width:100%;  
  font:9px Verdana,Arial,Helvetica, sans-serif;  
  text-align:right;  
}  

.previous {  
  outline:none;  
  cursor:pointer;  
  margin-left:125px;  
  vertical-align: bottom;  
}  

.next {  
  outline:none;  
  cursor:pointer;  
  margin-left:125px;  
  vertical-align: top;  
}


И остается нам поставить, там где вы хотите видет информацию, но и не забываем прописать созданный номер по информер.

Код
<div>  
  <img src="/angle_top.gif" class="previous" />  
  <div id="center-dm-carousel">  
  <ul>$MYINF_Ваш номер$</ul>  
  </div>  
  <img src="/angle_bottom.gif" class="next" />  
  </div>


На этом вся установка, перед тем как все делать, желательно сохранить "Резервное копирование (backup)" это вообще делается всегда, когда что то меняете или добавляете, чтоб всегда можно откатить на заданную точку.

Источник: ucoz-helper.ucoz.com
28.11.2016 Загрузок: 5 Просмотров: 827 Комментарий: (5)

Поделиться в социальных сетях

Материал разместил

Комментарий: 5
Kolinkor
Kolinkor 28.11.2016 14:251
0
Но здесь бы и под файлы бы сделать сразу, а так очень удобно.
Советник
Советник 28.11.2016 14:353
0
В информер выберете не новости а файлы и все.
FeStemBer
FeStemBer 28.11.2016 14:312
0
Здесь все очень понятно и просто, больше всего каталог файлов можно увидеть на главной, вот потому и создали для новостей.
iMadeas
iMadeas 28.11.2016 15:454
0
Хорошая карусель, но есть лишние части, такие как float: left + если сделать width:100%, то у стрелок margin-left:125px теряет смысл, проще сразу заменить на 50%
Kosten
Kosten 28.11.2016 15:495
+1
Спасибо за подсказку, но думаю кто читать комментарий будет, то может все отрегулировать как написали.
avatar