Информер материалов сайта для боковых блоков
сайдбара, с автоматической прокруткой при помощи
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. В стилях информер все параметры были подобраны под определённый шаблон сайта, стили не сложные и поэтому не составит труда более тонко настроить под ваш шаблон бокового сайдбара.
Временное
Демо информера внизу гостевой книги.