Многостраничный виджет "Новости" [Pun]

Живое демо:



Вариант отображения виджета "Новости" на портале. Выводится девять последних новостей, которые можно последовательно пролистать + еще одна ссылка на общий новостной раздел (кнопка "Все новости"). Из каждой новости можно быстро перейти в тему с обсуждениями (кнопка "Читать целиком").

Подразумевается, что у Вас уже включен портал и на нем установлен виджет "Новости".
Укажите в его настройках:
Число новостей: 9
Длина новостей: 500
Сохраните эти изменения.

Вариант для Pun.

1. Откройте ПА > Оформление > Шаблоны — Портал > шаблон mod_news (Новости)
Замените все его содержимое на этот код:

Код:

<div id="example-content-container">

   <div id="example-links">
      <p>1</p>
      <p>2</p>
      <p>3</p>
      <p>4</p>
      <p>5</p>
      <p>6</p>
      <p>7</p>
      <p>8</p>
      <p>9</p>
      <a class="allnews" href="/f1-forum">все новости</a>
   </div>

   <div style="clear: both;"></div>
   
    <div id="example-content">
      <!-- BEGIN post_row -->

<div class="module main">
   <a name="news_{post_row.ID}"></a>

   <div class="module mod_news">
      <div class="main-head" style="text-align:{LEFT};">{post_row.TITLE}</div>
      <div class="main-content" style="padding:0;">
         <p class="author">{post_row.TIME} {BY} <strong>{post_row.POSTER}</strong></p>
         <div class="body">
            {post_row.TEXT}<br /><br />
            
            <div class="clear"></div>
            [ {L_COMMENTS}: {post_row.REPLIES} ] [ <a class="fullnews" href="{post_row.U_VIEW_COMMENTS}">Читать целиком</a> ]
         </div>
      </div>
   </div>

</div>
<!-- END post_row -->
    </div>   
            
</div>   



<!-- BEGIN switch_image_resize -->
<script type="text/javascript">
//<![CDATA[
$(resize_images({ 'selector' : '.mod_news', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} }));
//]]>
</script>
<!-- END switch_image_resize -->

В строке

Код:

<a class="allnews" href="/f1-forum">все новости</a>

замените /f1-forum на ссылку на ваш новостной раздел.

Сохраните и опубликуйте (!) шаблон.

2. Добавьте в CSS настройки для обновленного виджета:

Код:

/* блок с кнопками и новостями */
#example-content-container {
width: 550px;
height: 460px;
margin: 0 auto 0;
border: none;
overflow: hidden;
}

/* внутренний блок новостей, ширина = сумма всех новостных блоков */
#example-content {
display: block;
width: 5000px;
overflow: hidden;
}


/* кнопки 1-9 и 'все новости' */
#example-links p, #example-links a.allnews {
display: block;
border: 1px solid #18405e;
float: left;
text-align: center;
line-height: 20px;
margin: 0 5px 10px 0;
cursor: pointer;
background-color: #18405e;
color: #fff;
text-decoration: none !important;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}

#example-links p {
height: 20px;
width: 20px;
}

#example-links a.allnews {
height: 20px;
width: 90px;
}

/* кнопки 1-9 и 'все новости' при наведении */
#example-links p:hover, #example-links a.allnews:hover {
background-color: #ddd;
color: #18405e;
}

/* выстраиваем новости в линию */
#example-content .module.main {
display: block;
float: left;
width: 548px;
padding-right: 2px;
}

/* максимальная ширина и высота картинок в новостях */
#example-content .module.main img {
max-width: 535px !important;
max-height: 300px;
}

/* кнопки 'читать целиком' */
.module.main .fullnews {
color: #DB0C1B !important;
text-decoration: none !important;
}

Сохраните.

3. В ПА > Модули > Управление кодами JS укажите Активировать управление кодами JS : да
Создайте новый файл и заполните следующим образом:
Название: любое, например, новостной виджет
Расположение: на портале
Код:

Код:

jQuery(document).ready(function() {

jQuery('#example-links p').click(function(){
var index = jQuery("#example-links p").index(this);
jQuery('#example-content').animate({"marginLeft" : -index*550 + "px"});
return false;
});

});

Сохраните.