DataLife Engine > Версия для печати > Карусель с автопрокруткой на основе Block.Pro и jCarousel

13.02.2014
Datalife Engine

Сегодня речь пойдёт об очередном применении модуля Block.Pro Применять модуль будем для вывода последних новостей в виде небольшого слайдера с автоматической прокруткой новостей по кругу (что по сути и является каруселью) и остановкой прокрутки при наведении мышки на новость. Крутиться карусель будет на замечательном плагине для jQuery jCarousel, особенностью которого является гибкая настройка и кастомизация, в чём я лично неоднократно убеждался.

Итак

Нам понадобятся:

Скрипт карусели (во вкладке СКАЧАТЬ), Модуль Block.Pro и конечно же прямые руки. За основу возьмём стандартный шаблон 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, кладём его в папку с шаблоном, вставляем туда вот это:

  • {title limit="30"} {title} {text limit="70"}
    •

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

    3. Открываем main.tpl и перед


    вставляем:

    4. Открываем sidebar.tpl. Находим код:

    Популярные статьи
      {topnews}

    заменяем на:

    Карусель + Block.Pro.2
      {include file=»engine/modules/block.pro.2.php?&block_id=carousel&template=bp_carousel&news_num=6&last=y&img_size=50×50″}

    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. Фантазируем и придумываем своё оформление и использование

    Автор: ПафНутиЙ

    Метки: