Регистрация    Войти
Авторизация

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

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

Всем массовый привет, сегодня мы с вами будем устанавливать на сайт в системе uCoz интересное решение от Ganeshji Marwaha, под названием вертикальная карусель контента, но в нашем с Вами случае, данное решение я адаптировал под информер интересный тем для модуля новости.

Шаг 1 - Установим JS:
Теперь давайте приступим к установке данного решения, для этого нам следует в самый низ страницы вашего сайта пред закрывающим тегом , установить следующий скрипт:

<script type="text/javascript" src="http://www.center-dm.ru/ucoz/informer/news/7/content_jcarousel.js"></script>


Шаг 2 - Установим HTML:
Теперь давайте создадим для данного решения нужным нам информер, для этого заходим

в Админ панель => Инструменты => Информеры => Создать информер

Раздел: Новости сайта
Тип данных: Материалы
Способ сортировки: Количество просмотров А
Количество материалов: 10
Количество колонок: 1

и устанавливаем в шаблон информера следующий 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 каркас данного решения:

<div>  
<img src="http://www.center-dm.ru/ucoz/informer/news/7/angle_top.gif" class="previous" />
<div id="center-dm-carousel">
<ul>$MYINF_1$</ul>
</div>
<img src="http://www.center-dm.ru/ucoz/informer/news/7/angle_bottom.gif" class="next" />
</div>


Шаг 3 - Установим CSS:
Теперь когда мы произвели нужные манипуляции с html кодом, давайте пропишем ему css стили, тем самым закончив установку вертикальной карусели информера для uCoz.

/* Вертикальная карусель контента 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 символов, вы можете поменять это значение на своё.

На этом всё, спасибо за внимание!

Есть вопросы по шаблону или скрипту? так задай их и мы ответим!

Автор: chestr  27-09-2013, 11:23   Просмотров: 2546   
Вертикальная карусель, информера uCoz, информера, информер uCoz
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо зайти на сайт под своим именем.


Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.