Информер материалов в виде фотографий


Информер материалов в виде фотографий


Предлагаю Вашему вниманию информер для сайтов uCoz в виде фотографий. Этот информер для тех, кому нужно сделать акцент именно на фотографии из статей модуля Каталог статей.


  


Особенности:

  • Изображение берется из первого загруженного изображения при добавлении новой статьи.
  • Все изображения абсолютно одинаковые по размеру. Если изображение иное, чем указано в параметрах рамки, оно выравнивается по ширине и обрезается по высоте.
  • При нажатии на изображение, его можно увидеть полностью, не обрезанным, так что пользователь ничего не теряет.
  • Если у Вашего материала нет пока еще комментариев это поле не выводится вовсе.

    • Установка информера

    Файловый архив:
    - Создать в корне Вашего сайта папку inf_mat.
    - Скачать файлы из файлового архива(нажмите на кнопку слева), разархивировать и загрузить в папку inf_mat.
    -в папку нажно загружать только картинки, исходники - просто для Вас.

    HTML
    Перейти: Панель управления - Информеры и создать новый Информер с любым названием:
    • Раздел: Каталог статей 
    • Тип данных: Материалы 
    • Способ сортировки: Количество просмотров A 
    • Количество материалов: 16 (или на Ваше усмотрение) 
    • Количество колонки: 4 (или на Ваше усмотрение) 
    Далее нажать на ссылку Шаблон информера, стереть полностью код в нем, и вставить следующий:


    <div class="informer opacity">  
      <a href="$ENTRY_URL$"><div class="informer_title"><b><?if(len($TITLE$)>35)?><?substr($TITLE$,0,33)?>...<?else?>$TITLE$<?endif?></b></div> 
      <div class="informer_img"> 
      <span><img align="left" title="$TITLE$" src="$IMG_URL1$"></span> 
      </div> 
    </a> 
    <div class="informer_bottom">  
      <ul class="informer_statistics">  
      <li><span>$RATING$ ($RATED$)</span><img src="/inf_mat/ico_like.png" alt="рейтинг"></li>  
      <li><span>$READS$</span><img src="/inf_mat/ico_Eye.png" alt="просмотров"></li>  
      <?if($COMMENTS_NUM$)?><li><span>$COMMENTS_NUM$</span><imgsrc="/inf_mat/ico_comment.png" alt="комментарий"></li> <?endif?> 
      </ul>  
      </div>  
      </div> 


    CSS
    Для работы информера нужно добавить стили CSS.
    Перейти: Панель управления - Дизайн - Управление дизайном (CSS)

    В самом конце всех стилей ставим следующие:


    /*--Информер--*/ 

      .informer {  
      width:160px;  
      margin: 5px;  
      overflow:hidden; 
      background: #fff;  
      border: 2px solid #ACACAC;  
      font:11px Verdana,Arial,Helvetica, sans-serif; 
      text-shadow: 1px 1px 1px #fff;  
      color: #0A2526; 
      border-radius:5px;  
    }  

    .informer a { 
    color: #737272; 
    } 

    .informer a:hover { 
    color: #c9c4c4; 
    } 
    .informer_title {  
      height: 30px; 
      float:left;  
      width:160px;  
      background:#f4f4f4;  
      padding: 4px 4px;  
      font: 125% Verdana,Arial,Helvetica, sans-serif; font-weight: 700; 
      font-color: #737272; 
      border-bottom: 1px solid #d1d1d1;  
    }  

    .informer_img span 
    {display: block; 
      height: 120px; 
    width: 160px; 
    overflow: hidden;} 

    .informer_img span img 
    {width: 160px;} 

       
    .informer_bottom {  
      float:left;  
      width:100%;  
      background:#f4f4f4;  
      border-top: 1px solid #d1d1d1;  
    }  

    .informer_category{  
      float:left;  
    }  

    .informer_statistics{  
      float:right;  
      margin:0;  
      padding: 0;  
      margin-right: -2px;  
      list-style:none;  
      border-left: 1px solid #d1d1d1;  
    }  

    .informer_statistics li {  
      float:left;  
      height:20px;  
      padding: 3px 3px 2px 3px;  
      border-right: 1px solid #d1d1d1;  
      border-left: 1px solid #fff;  
    }  

    .informer_statistics span{  
      float:left;  
      margin: 0px 5px 0px 0px;  
    } 

    .opacity a:hover img {filter: progid: DXImageTransform.Microsoft.Alpha(opacity=85);-moz-opacity: 0.7; opacity: 0.7; filter: alpha(opacity=85);} 

    /*--END-Информер--*/