Модуль прокрутки новостей колесиком мыши Instantcms

Тема в разделе "InstantCMS", создана пользователем slavik11, 5 сен 2014.

Модераторы: Maybe
  1. slavik11

    slavik11 ------------

    Регистр.:
    7 июл 2014
    Сообщения:
    212
    Симпатии:
    156
    q.jpg
    Простой модуль с изначальным функционалом и дизайном, добавляет функцию прокрутки новостей. Тестировалось на 1.10.3
    Скачать:


    Так же вы можете сделать подобную функцию с любым из ваших модулей самостоятельно.
    Рассмотрим на примере модуля Последние Новости

    Открываем файл mod_latest.tpl
    В конец файла добавляем скрипт и стили(по желанию можете вынести отдельно) для работы прокрутки:
    Код:
    Код PHP:
    {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 это высота блока новостей. все что не умещается будет скрываться для прокрутки.
    Находим строку:
    Код:
    Код PHP:
    {foreach key=aid item=article from=$articles}
    Заменяем на:
    Код:
    Код PHP:
    <div id="res_good_news" class="last-news">
            <ul>
    {foreach key=aid item=article from=$articles}<li>
    
    Находим строку:
    Код:
    Код PHP:
    {/foreach}
    Заменяем на:
    Код:
    Код PHP:
    </li>{/foreach}
    </ul>
    </div>
    
    п.с.
    если у Вас будет несколько модулей с прокруткой то id res_good_news должен быть разным.
     
    KirilBLR нравится это.