Вертикальная карусель информера uCoz

·	29.09.2013, 15:25
Всем массовый привет, сегодня мы с вами будем устанавливать на сайт в системе uCoz интересное решение от Ganeshji Marwaha, под названием вертикальная карусель контента, но в нашем с Вами случае, данное решение я адаптировал под информер интересный тем для модуля новости, но чтобы не тянуть кота за хвост посмотрим на демо пример. Шаг 1 - Установим JS: Теперь давайте приступим к установке данного решения, для этого нам следует в самый низ страницы вашего сайта пред закрывающим тегом </body>, установить следующий скрипт: JS `<script type="text/javascript" src="http://ucoz-helper.ucoz.com/vid_info/content_jcarousel.js"></script>` Шаг 2 - Установим HTML: Теперь давайте создадим для данного решения нужным нам информер, для этого заходим в Админ панель => Инструменты => Информеры => Создать информер Раздел: Новости сайта Тип данных: Материалы Способ сортировки: Количество просмотров А Количество материалов: 10 Количество колонок: 1 и устанавливаем в шаблон информера следующий html код: HTML `<li> <a href="$ENTRY_URL$" target="_blank"> if($TITLE$)?>if(len($TITLE$)>30)?>substr($TITLE$,0,30)?>...else?>$TITLE$endif?>endif?>else?> <span>$CATEGORY_NAME$</span> </li>` а теперь в нужном месте на сайте прописываем данный информер в общий html каркас данного решения: HTML `<div> <img src="http://ucoz-helper.ucoz.com/vid_info/angle_top.gif" class="previous" /> <div id="center-dm-carousel"> <ul>$MYINF_1$</ul> </div> <img src="http://ucoz-helper.ucoz.com/vid_info/angle_bottom.gif" class="next" /> </div>` Шаг 3 - Установим CSS: Теперь когда мы произвели нужные манипуляции с html кодом, давайте пропишем ему css стили, тем самым закончив установку вертикальной карусели информера для uCoz. CSS /* Вертикальная карусель контента uCoz ------------------------------------------*/ #center-dm-carousel { float:left; width:230px; height:300px; overflow:hidden; padding:0px 10px; background: #fff; border: 1px solid #CAD3DA; border-radius:5px; } #center-dm-carousel li { float:left; width:100%; height:30px; list-style:none; display:block; padding:5px 0px; border-bottom: 1px solid #CAD3DA; } #center-dm-carousel li a { float:left; width:100%; margin-bottom: 3px; } #center-dm-carousel span { float:left; color:#999; width:100%; font:9px Verdana,Arial,Helvetica, sans-serif; text-align:right; } .previous { outline:none; cursor:pointer; margin-left:125px; vertical-align: bottom; } .next { outline:none; cursor:pointer; margin-left:125px; vertical-align: top; } Обратите внимание, что в данном решении в шаге номер два, мы сокращаем заголовок новости до 30 символов, вы можете поменять это значение на своё. На этом всё, спасибо за внимание!
1 2 3 4 5 Категория: Вид информеров \| Добавил: tashkent97
Просмотров: 1082 \| Загрузок: 406 \| Источник: center-dm.ru \| Рейтинг: 5.0/1

Всего комментариев: 0