Не сложный модуль с простым дизайном и возможностью прокрутки контента с помощью колесика
Скачать:
О том, как сделать подобную прокрутку для любого из модулей
На примере модуля Последние Новости
Открываем файл mod_latest.tpl
В конец файла добавляем скрипт и стили(по желанию можете вынести отдельно) для работы прокрутки:
Код:
{literal}
<style>
.last-news{height:400px;overflow:hidden;}
.last-news ul, .last-news li{ list-style: none;margin:0;padding:0}
.last-news li{ position: relative; min-height: 30px;}
</style>
<script type="text/javascript">
$('#res_good_news').bind('mousewheel DOMMouseScroll',function(e){
if($(this).is(':animated'))return false;
var delta = e.originalEvent.wheelDelta/120||-e.originalEvent.detail/3;
if(delta > 0){$(this).animate({scrollTop:$(this).scrollTop()-300},500);}else{$(this).animate({scrollTop:$(this).scrollTop()+300},500);}
return false;
});
</script>
{/literal}п.с.
height:400px это высота блока новостей. все что не умещается будет скрываться для прокрутки.
Находим строку:
Код:
{foreach key=aid item=article from=$articles}Заменим на:
Код:
<div id="res_good_news" class="last-news">
<ul>
{foreach key=aid item=article from=$articles}<li>Находим строку:
Код:
{/foreach}Заменим на:
Код:
</li>{/foreach}
</ul>
</div>п.с.
если у Вас будет несколько модулей с прокруткой то id res_good_news должен быть разным.
Теги: модули instantcms скачать
