• Автор:

    Flesha
  • Добавлено:

    фев 01, 2012
  • Комментариев:

    0
  • Просмотров:

    3736

Карусель с автопрокруткой на основе Block.Pro

Карусель с автопрокруткой на основе Block.Pro

Крутиться карусель будет на замечательном плагине для jQuery jCarousel, особенностью которого является гибкая настройка и кастомизация, в чём я лично неоднократно убеждался.

Нам понадобятся:
Внимание! У Вас нет прав для просмотра скрытого текста.

За основу возьмём стандартный шаблон DLE 9.5 - Default.


1. Кладём файл jquery.jcarousel.min.js из скачанного архива в папку js шаблона.
Там же открываем файл libs.js и в самый конец дописываем:
//Карусель
function mycarousel_initCallback(carousel)
{
carousel.clip.hover(function() {
carousel.stopAuto();
}, function() {
carousel.startAuto();
});
};

$(function() {
jQuery('#bp_slider').jcarousel({
wrap: 'circular',
auto: 5, //интервал прокрутки в секундах
scroll: 1, //кол-во элементов, прокручиваемых за один раз
animation: 500, //скорость прокрутки
initCallback: mycarousel_initCallback //вызов функции остановки прокрутки при наведении мышки
});
});


тут немного поясню что это.
Это функция вызова нашего скрипта-карусели и его опции.

2. Создаём новый файл с именем bp_carousel.tpl, кладём его в папку с шаблоном, вставляем туда вот это:
<li class="bp_item">
<strong><a href="{full-link}" title="{title}">{title limit="30"}</a></strong>
<div class="bp_item_img"><img src="{image-1}" alt="{title}" width="50" height="50" /></div>
<div class="bp_item_text">{text limit="70"}</div>
</li>


Думаю объяснять что тут к чему смысла нет, всё наглядно.

3. Открываем main.tpl и перед
<script type="text/javascript" src="{THEME}/js/libs.js"></script>

вставляем:
<script type="text/javascript" src="{THEME}/js/jquery.jcarousel.min.js"></script>



4. Открываем sidebar.tpl. Находим код:
<div id="popular" class="block">
<div class="dtop">&nbsp;</div>
<div class="dcont">
<div class="btl">
<h4>Популярные статьи</h4>
</div>
<ul>
{topnews}
</ul>
</div>
<div class="dbtm">&nbsp;</div>
</div>


заменяем на:
<div class="block">
<div class="dtop">&nbsp;</div>
<div class="dcont">
<div class="btl">
<h4>Карусель + Block.Pro.2</h4>
</div>
<ul id="bp_slider">
&#123;include file="engine/modules/block.pro.2.php?&block_id=carousel&template=bp_carousel&news_num=6&last=y&img_size=50x50"}
</ul>
</div>
<div class="dbtm">&nbsp;</div>
</div>


5. Открываем файл styles.css и в самый конец добавляем:
/*Carousel
-----------------------------------------------------------------------------*/
#bp_slider {
max-height: 100px;
}
#bp_slider .bp_item {
font-size: 12px;
width: 230px;
}
#bp_slider .bp_item strong {
display: block;
}
#bp_slider .bp_item a {
text-decoration: none;
}
#bp_slider .bp_item a:hover {
text-decoration: underline;
color: #9966cc;
}
#bp_slider .bp_item_img {
float: left;
padding: 3px 5px 0 0;
}

.jcarousel-clip {
overflow: hidden;
margin-top: 10px;
}

.jcarousel-container {
width: 230px;
margin-left: 15px;
}
/**
* Horizontal Buttons
*/
.jcarousel-next-horizontal {
position: absolute;
bottom: -10px;
right: -14px;
width: 23px;
height: 23px;
cursor: pointer;
background: url(../images/basenavi.png) no-repeat -26px -32px;
}

.jcarousel-next-horizontal:hover {
background: url(../images/basenavi.png) no-repeat -26px -61px;
}
.jcarousel-next-horizontal:active {
background: url(../images/basenavi.png) no-repeat -26px -90px;
}
.jcarousel-next-disabled-horizontal,
.jcarousel-next-disabled-horizontal:hover {
cursor: default;
}

.jcarousel-prev-horizontal {
position: absolute;
bottom: -10px;
right: 9px;
width: 23px;
height: 23px;
cursor: pointer;
background: url(../images/basenavi.png) no-repeat -3px -32px;
}

.jcarousel-prev-horizontal:hover {
background: url(../images/basenavi.png) no-repeat -3px -61px;
}
.jcarousel-prev-horizontal:active {
background: url(../images/basenavi.png) no-repeat -3px -90px;
}
.jcarousel-prev-disabled-horizontal,
.jcarousel-prev-disabled-horizontal:hover,
.jcarousel-prev-disabled-horizontal:focus,
.jcarousel-prev-disabled-horizontal:active {
cursor: default;
}


Автор: ПафНутиЙ (pafnuty.name)
Вернуться
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.