ZorNet.Ru — сайт для вебмастера » Скрипты для 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. В стилях информер все параметры были подобраны под определённый шаблон сайта, стили не сложные и поэтому не составит труда более тонко настроить под ваш шаблон бокового сайдбара.

Временное Демо информера внизу гостевой книги.
23 Марта 2017 Просмотров: 1682 Комментариев: (15)
Поделиться в социальных сетях

Материал разместил
Angerfist
Похожие материалы

Оставь свой отзыв

Комментарии: 15
Kosten
Kosten 23 Марта 2017 19:461
0
Так можно его на файлы поставить и подключить комментарий, который также бы их гонял, просто на демонстраций посмотрел, что отлично смотрится.
Kolinkor
Kolinkor 23 Марта 2017 19:502
0
Мне напоминает некоторые сайты, где также комментарий поставлены на поток, но только там все с хорошим отзывом и одним человеком видать написаны, не думаю, что на простой паблик подойдет, так он подойдет, но просто на прокаченый сайт ему место.
Kosten
Kosten 23 Марта 2017 20:235
0
Это кино сайты, на развод, где типа оплати, и посмотришь полностью фильм, не попадайтесь, этот скрипт совершенно другой, он по информации больше.
Scheme
Scheme 23 Марта 2017 19:573
0
Как т о приходилось такого типа ставить на сайт одному человеку, тоже только с положительными отзывами, не чего не получилось, здесь как видно все работает и только реальные посты выводит будет, один минус вижу в нем, это его вес.
Kosten
Kosten 23 Марта 2017 20:114
0
Здесь не комментарий, а добавленный материал и его название с кратким описание, что к примеру если есть контейнер на форуме, будет функционально для сайта и по теме там установлен.
Сафрон
Сафрон 23 Марта 2017 20:256
0
Согласен, просто на главной странице и так видно весь обновленный материал, на других модулях нет, его также можно настроить и под другие каталоги.
Марковичь
Марковичь 23 Марта 2017 20:307
0
Заметил на сайте интересный информер с тенями, здесь как понял его нет, не нашел, возможно автор поделиться.

osirisbog1
osirisbog1 25 Марта 2017 21:578
0
Я уже попросил у этого автора сам не ставил, пробуйте, поделитесь как в работе) Завтра тоже буду ставить.

Установка:
Создаём информер - [ Каталог статей · Материалы · Количество просмотров D · Материалы: 10 · Колонки: 2 ]

Код
<div style="width:100%;">  
<div class="vidnews">  
<div class="imgbigload" style="background-image: url('$IMG_URL1$');">
<a href="$ENTRY_URL$"> <div class="brief">
<p class="name-title">$TITLE$</p>
<p class="name-reads">Просмотры: $READS$</p>
</div>
</div></div></div>

<style>
.name-title {
color:#CCCCCC;
font-weight: bold;
text-shadow: black 0.1em 0.1em 0.1em;
margin: 2px 5px;
}
.name-reads {
color:#CCCCCC;
font-weight: bold;
text-shadow: black 0.1em 0.1em 0.1em;
position: absolute;
left: 5px;
bottom: 0;
}
.vidnews {
  margin: 3px 3px;
}
.imgbigload {
  z-index: 1;
  border-radius:3px;
  border: 1px solid #EEEEEE;
  display: block;
  position: relative;
  padding-bottom: 65%;
  overflow: hidden;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  box-shadow:0 5px 5px #000;
-moz-box-shadow:0 5px 5px #000;
-webkit-box-shadow:0 5px 5px #000;
}
.imgbigload:hover {
  opacity: 1;
}
  .brief {
  opacity: 0;
  position: absolute;
  background-color: rgba(0,0,0,0.7);
  -webkit-transition: all 0.7s ease;
  -moz-transition: all 0.7s ease;
  -o-transition: all 0.7s ease;
  -ms-transition: all 0.7s ease;
  transition: all 0.7s ease;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}
.brief:hover {
  opacity: 1;
}
.brief a {
  color: #FFFFFF;
}
</style>
Kosten
Kosten 25 Марта 2017 22:349
0
Проверим, если все нормально, то выведем как материал, хотя у этого автора всегда все шикарно.
maniacvn
maniacvn 25 Марта 2017 23:4010
0
На комментарий поставил)

11a
Kosten
Kosten 25 Марта 2017 23:5111
0
maniacvn, это прото вывод комментарий, или перелистывает их.
maniacvn
maniacvn 25 Марта 2017 23:5212
0
10 последних коментов листает
Kosten
Kosten 25 Марта 2017 23:5313
0
Также попробуй ссылку или смайл поставить в комментариях и посмотри, слетит информер или нет.
maniacvn
maniacvn 26 Марта 2017 00:0114
0
Да на4инает не коректно работать)
Angerfist
Angerfist 27 Марта 2017 15:1715
+1
Решил внести несколько поправок в этот материал, а именно:
Убрал сокращения текста условными операторами:
Код
<?if(len($TITLE$)>25)?><?substr($TITLE$,0,25)?>...<?else?>$TITLE$<?endif?>


Вместо этого текст обрезается при помощи CSS, конечно применив свойство white-space: nowrap; текст описания стал в одну строку как и название материала, стало как то скудновато, но для этого применяем при наведении курсора на текст (hover), эффект полного отображения описания
(в рамках блока пока не действует overflow: hidden;) и меняем свойство white-space: nowrap; на white-space: normal;.

Пример изменённых участков стилей и кода информера:
Код

  #listticker .news-title{
  display:block;
  font-weight:500;
  font-size:13px;
  white-space: nowrap;
  overflow: hidden;  
  padding: 0 4px 0 0;
  text-overflow: ellipsis;
  }
  #listticker .news-text{
  display:block;
  font-size:13px;
  color:#666666;
  white-space: nowrap;
  overflow: hidden;  
  padding: 0 4px 0 0;
  text-overflow: ellipsis;
  }
  #listticker .news-text:hover{
  white-space: normal;
  padding: 0 4px 6px 0;
}

<a href="$ENTRY_URL$" class="news-title">$TITLE$
<span class="news-text">$MESSAGE$</span></a>
Войдите:
avatar