Главная » Скрипты для ucoz » Ucoz-комментарии

Последние движущиеся комментарии


Скрипт коментарий для uCoz

Скрипт коментарий для uCoz - Последние движущиеся комментарии



Красивый блок, с последними движущимися комментария для uCoz, фишка скрипта в том, что можно настроить плавное исчезание первого комментария, но об этом позже.

Установка скрипта Последние движущиеся комментарии

Скрипт использует библиотеку jQuery, все знают, что на ucoze уже она установлена, поэтому пропустим этот пункт, и приступим к установке главного скрипта, который отвечает именно за плавное исчезновение первого комментария в блоке.

Ставим следующий код после тега :
Code
<script type="text/javascript">  
  $(document).ready(function(){  
   var first = 0;  
   var speed = 700;  
   var pause = 3500;  
     
   function removeFirst(){  
   first = $('ul#center_dm_ru li:first').html();  
   $('ul#center_dm_ru li:first')  
   .animate({opacity: 0}, speed)  
   .fadeOut('slow', function() {$(this).remove();});  
   addLast(first);  
   }  
     
   function addLast(first){  
   last = '<li style="display:none">'+first+'</li>';  
   $('ul#center_dm_ru').append(last)  
   $('ul#center_dm_ru li:last')  
   .animate({opacity: 1}, speed)  
   .fadeIn('slow')  
   }  
     
   interval = setInterval(removeFirst, pause);  
  });  
  </script>


var speed = 700; - скорость исчезновение первого сообщения
var pause = 3500; - сколько должно пройти времени, перед исчезновением сообщения

Далее идем в админку и создаем информер со следующими настройками:

Раздел: Комментарии
Модуль: Все модули
Количество материалов: 10
Количество колонок: 1

Меняем код стандартного информера на этот:
Code
<li>  
  <a href="$PROFILE_URL$" target="_blank"><img class="coment_avatar" src="$USER_AVATAR_URL$" /></a><img class="coment_avatar" src="http://www.rusfantast.ru/imgg/no_avatar.jpg" alt="no" /><a class="massage_link" href="$ENTRY_URL$" target="_blank">$MESSAGE$</a>  
  </li>


Теперь в самом шаблоне там где хотите видеть эти последние комментарии, ставим сам информер:
Code
<ul id="center_dm_ru">  
   $MYINF_1$  
   </ul>


CSS:
Code
#center_dm_ru {  
   overflow:hidden;  
   height:250px;  
   width:250px;  
   border:solid 1px #C8D9E5;  
   padding: 0px 0px 0px 0px;  
   background: #F8FCFF;  
  }  

  #center_dm_ru li {   
   list-style:none;  
   overflow:hidden;  
   border-top: 1px solid #fff;  
   border-bottom: 1px solid #C8D9E5;  
   padding: 10px 5px 10px 5px;  
  }  

  .coment_avatar {  
   float:right;  
   width:25px;   
   height:25px;  
   background: #F3F3F3;   
   margin-left: 5px;  
   padding: 2px;  
   border:1px solid #C8D9E5;  
  }   

  .massage_link:link,  
  .massage_link:visited {  
   text-decoration: none;  
   color:#555;   
  }  

  .massage_link:hover {  
   color:#999;  
  }   

  #center_dm_ru li a:hover img {  
   filter: progid: DXImageTransform.Microsoft.Alpha(opacity=50);   
   -moz-opacity: 0.5;  
   opacity: 0.5;   
   filter: alpha(opacity=50);  
  }


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


  Категория: Ucoz-комментарии | Добавил: AID | Дата: 03.10.2011

Другие новости

Поделиться ссылкой

Ссылка:
BB-code:
HTML:
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Хостинг от uCoz