Информер с автоматической прокруткой - Информеры - UCOZ - Каталог файлов - Каморка
kamorka
Menu
Правила чата
Пользователи онлайн
Мини-чат
+Мини-чат
0
Онлайн всего: 1
Гостей: 1
Пользователей: 0
   Категории

Комментарии

KaMoRkA.uCoz.com -- uCoz -- Информеры


Информер материалов сайта для боковых блоков сайдбара, с автоматической прокруткой при помощи jQuery, в исполнение светлом дизайне.

Описание материала пропустим (Демо прилагается), сразу к установке...

Создаётся Инлформер с параметрами: допустим это будет Каталог статей, далее · Материалы · далее предположим вы выбираете Дату добавления материала D · ну и в конце Материалы: 10 · Колонки: 1.

Визуально на самом информере будет выводится 5 материалов, но для полноты эффекта прокрутки всё таки указываем для вывода 10 материалов.

На демонстраций вы можете посмотреть в работе его.



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

Меняем код по умолчанию информера на этот:

Код
<?if($NUMBER$='1')?>  
<ul id="listticker">  
<li>  
<img src="$IMG_URL1$" />  
<a href="$ENTRY_URL$" class="news-title"><?if(len($TITLE$)>25)?><?substr($TITLE$,0,25)?>...<?else?>$TITLE$<?endif?></a>  
<span class="news-text"><?if(len($MESSAGE$)>50)?><?substr($MESSAGE$,0,50)?>...<?else?>$MESSAGE$<?endif?></span>  
</li>  
<?endif?>  

<?if($NUMBER$='2')?>  
<li>  
<img src="$IMG_URL1$" />  
<a href="$ENTRY_URL$" class="news-title"><?if(len($TITLE$)>25)?><?substr($TITLE$,0,25)?>...<?else?>$TITLE$<?endif?></a>  
<span class="news-text"><?if(len($MESSAGE$)>50)?><?substr($MESSAGE$,0,50)?>...<?else?>$MESSAGE$<?endif?></span>  
</li>  
<?endif?>  

<?if($NUMBER$='3')?>  
<li>  
<img src="$IMG_URL1$" />  
<a href="$ENTRY_URL$" class="news-title"><?if(len($TITLE$)>25)?><?substr($TITLE$,0,25)?>...<?else?>$TITLE$<?endif?></a>  
<span class="news-text"><?if(len($MESSAGE$)>50)?><?substr($MESSAGE$,0,50)?>...<?else?>$MESSAGE$<?endif?></span>  
</li>  
<?endif?>  

<?if($NUMBER$='4')?>  
<li>  
<img src="$IMG_URL1$" />  
<a href="$ENTRY_URL$" class="news-title"><?if(len($TITLE$)>25)?><?substr($TITLE$,0,25)?>...<?else?>$TITLE$<?endif?></a>  
<span class="news-text"><?if(len($MESSAGE$)>50)?><?substr($MESSAGE$,0,50)?>...<?else?>$MESSAGE$<?endif?></span>  
</li>  
<?endif?>  

<?if($NUMBER$='5')?>  
<li>  
<img src="$IMG_URL1$" />  
<a href="$ENTRY_URL$" class="news-title"><?if(len($TITLE$)>25)?><?substr($TITLE$,0,25)?>...<?else?>$TITLE$<?endif?></a>  
<span class="news-text"><?if(len($MESSAGE$)>50)?><?substr($MESSAGE$,0,50)?>...<?else?>$MESSAGE$<?endif?></span>  
</li>  
<?endif?>  

<?if($NUMBER$='6')?>  
<li>  
<img src="$IMG_URL1$" />  
<a href="$ENTRY_URL$" class="news-title"><?if(len($TITLE$)>25)?><?substr($TITLE$,0,25)?>...<?else?>$TITLE$<?endif?></a>  
<span class="news-text"><?if(len($MESSAGE$)>50)?><?substr($MESSAGE$,0,50)?>...<?else?>$MESSAGE$<?endif?></span>  
</li>  
<?endif?>  

<?if($NUMBER$='7')?>  
<li>  
<img src="$IMG_URL1$" />  
<a href="$ENTRY_URL$" class="news-title"><?if(len($TITLE$)>25)?><?substr($TITLE$,0,25)?>...<?else?>$TITLE$<?endif?></a>  
<span class="news-text"><?if(len($MESSAGE$)>50)?><?substr($MESSAGE$,0,50)?>...<?else?>$MESSAGE$<?endif?></span>  
</li>  
<?endif?>  

<?if($NUMBER$='8')?>  
<li>  
<img src="$IMG_URL1$" />  
<a href="$ENTRY_URL$" class="news-title"><?if(len($TITLE$)>25)?><?substr($TITLE$,0,25)?>...<?else?>$TITLE$<?endif?></a>  
<span class="news-text"><?if(len($MESSAGE$)>50)?><?substr($MESSAGE$,0,50)?>...<?else?>$MESSAGE$<?endif?></span>  
</li>  
<?endif?>  

<?if($NUMBER$='9')?>  
<li>  
<img src="$IMG_URL1$" />  
<a href="$ENTRY_URL$" class="news-title"><?if(len($TITLE$)>25)?><?substr($TITLE$,0,25)?>...<?else?>$TITLE$<?endif?></a>  
<span class="news-text"><?if(len($MESSAGE$)>50)?><?substr($MESSAGE$,0,50)?>...<?else?>$MESSAGE$<?endif?></span>  
</li>  
<?endif?>  

<?if($NUMBER$='10')?>  
<li>  
<img src="$IMG_URL1$" />  
<a href="$ENTRY_URL$" class="news-title"><?if(len($TITLE$)>25)?><?substr($TITLE$,0,25)?>...<?else?>$TITLE$<?endif?></a>  
<span class="news-text"><?if(len($MESSAGE$)>50)?><?substr($MESSAGE$,0,50)?>...<?else?>$MESSAGE$<?endif?></span>  
</li>  
</ul>  
<?endif?>


Стили (CSS) информера, все параметры размеров были настроены под определённый шаблон, поэтому возможно понадобится более точная настройка:

Код
#listticker{  
  width: 98%;  
  height:335px;  
  background-color: #FFFFFF;  
  overflow:hidden;  
  border:solid 1px #DEDEDE;  
  padding:1%;  
  }  
  #listticker li{  
  height:60px;  
  padding:4px;  
  list-style:none;  
  overflow:hidden;  
  }  
  #listticker a{  
  color:#000000;  
  }  
  #listticker .news-title{  
  display:block;  
  font-weight:500;  
  font-size:13px;  
  }  
  #listticker .news-text{  
  display:block;  
  font-size:13px;  
  color:#666666;  
  }  
  #listticker img{  
  float:left;  
  margin: 0 4px;  
  padding:4px;  
  border:solid 1px #DEDEDE;  
  width: 80px;  
  height: 50px;  
  object-fit: cover;  
  }


И наконец выводим в блоке сайдбара информер таким образом, подключаем js скрипт в head верхней части сайта, (для ленивых рядом) с информером. Ну и сам оператор вывода информера $MYINF_1$ устанавливаем в боковой блок:

Код
<script type="text/javascript">  
$(document).ready(function(){  
   
  var first = 0;  
  var speed = 1500;  
  var pause = 7500;  
   
  function removeFirst(){  
  first = $('ul#listticker li:first').html();  
  $('ul#listticker li:first')  
  .animate({opacity: 0}, speed)  
  .fadeOut('slow', function() {$(this).remove();});  
  addLast(first);  
  }  
   
  function addLast(first){  
  last = '<li style="display:none">'+first+'</li>';  
  $('ul#listticker').append(last)  
  $('ul#listticker li:last')  
  .animate({opacity: 1}, speed)  
  .fadeIn('slow')  
  }  
   
  interval = setInterval(removeFirst, pause);  
});  
</script>  

$MYINF_1$


P.S. В стилях информер все параметры были подобраны под определённый шаблон сайта, стили не сложные и поэтому не составит труда более тонко настроить под ваш шаблон бокового сайдбара.

Временное Демо информера внизу гостевой книги.

Важно!

При копировании материала указывать ссылку на источник.

- 445
- 25-Марта-2017
- 0
Материал разместил:

Похожий материал
Статьи сайта