16.04.13, 12:24
0 комментарий
  DLE Модули

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

Сегодня речь пойдёт об очередном применении модуля 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, кладём его в папку с шаблоном, вставляем туда вот это:
<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;
    } 



6. Фантазируем и придумываем своё оформление и использование

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

СКАЧАТЬ

Вес файла
131.28 Kb

Напишите своё мнение