Карусель с автопрокруткой на основе Block.Pro.2 и jCarousel
29.01
29
30 821
Сегодня речь пойдёт об очередном применении модуля Block.Pro.2 в свете очередного же обновления до версии 2.4
Применять модуль будем для вывода последних новостей в виде небольшого слайдера с автоматической прокруткой новостей по кругу (что по сути и является каруселью) и остановкой прокрутки при наведении мышки на новость. Крутиться карусель будет на замечательном плагине для jQuery jCarousel, особенностью которого является гибкая настройка и кастомизация, в чём я лично неоднократно убеждался.
Итак
Нам понадобятся:
Скрипт карусели, Модуль Block.Pro.2 и конечно же прямые руки. За основу возьмём стандартный шаблон 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="Карусель с автопрокруткой на основе Block.Pro.2 и jCarousel">{title limit="30"}</a></strong>
<div class="bp_item_img"><img src="{image-1}" alt="Карусель с автопрокруткой на основе Block.Pro.2 и jCarousel" 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"> </div>
<div class="dcont">
<div class="btl">
<h4>Популярные статьи</h4>
</div>
<ul>
{topnews}
</ul>
</div>
<div class="dbtm"> </div>
</div>заменяем на:
<div class="block">
<div class="dtop"> </div>
<div class="dcont">
<div class="btl">
<h4>Карусель + Block.Pro.2</h4>
</div>
<ul id="bp_slider">
{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"> </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;
} 6. Фантазируем и придумываем своё оформление и использование Block.Pro.2
ВНИМАНИЕ!
Все обсуждения модуля теперь только в этой теме или на сайте blockpro.ru
Комментарии
Добавить комментарий
Комментировать могут только зарегистрированные пользователи