Скрипты-სკრიპტები

მთავარი » 2012 » მაისი » 11 » Последние движущиеся комментарии
19:22
Последние движущиеся комментарии
Красивый блок, с последними движущимися комментария для 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 легко настраивается, и вы сможете без труда подогнать, размеры ячеек с комментариями, под свой шаблон сайта.
კატეგორია: Вид материала | ნანახია: 351 | დაამატა: nukria | რეიტინგი: 0.0/0
სულ კომენტარები: 0
კომენტარის დამატება შეუძლიათ მხოლოდ დარეგისტრირებულ მომხმარებლებს
[ რეგისტრაცია | შესვლა ]
მოგესალმები Гость