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

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

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

Сегодня речь пойдёт об очередном применении модуля 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">&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">
            {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. Фантазируем и придумываем своё оформление и использование Block.Pro.2

ВНИМАНИЕ!

Все обсуждения модуля теперь только в этой теме или на сайте blockpro.ru

Похожие материалы

Комментарии

ПафНутиЙ
ПафНутиЙ 4 декабря 2012 01:07
Шаблон Default?
sergeyps
sergeyps 20 мая 2013 16:03
Здраствуйте !!!!! установил Карусель с автопрокруткой на основе Block.Pro.2 и jCarousel осталась одна проблема с выводом картинок на новости показывает стандартную картинку (нет картинки). Картинки на новости взяты со сторонних сайтов. Помогите пожалуйста,
заранее блогодарен !!!!!
ПафНутиЙ
ПафНутиЙ 20 мая 2013 16:09
Здраствуйте !!!!! установил Карусель с автопрокруткой на основе Block.Pro.2 и jCarousel осталась одна проблема с выводом картинок на новости показывает стандартную картинку (нет картинки). Картинки на новости взяты со сторонних сайтов. Помогите пожалуйста,
заранее блогодарен !!!!!

модуль не выводит картинки со сторонних серверов, воспользуйтесь последней версией модуля.
djinn
djinn 27 марта 2014 23:28
Вопрос, а с помощью блок про 3, возможен данный слайдер как на картинке? Если да, то пожалуйста укажите что и как (возможно)надо делать по другому.
Спасибо.
ПафНутиЙ
ПафНутиЙ 28 марта 2014 09:42
Вопрос, а с помощью блок про 3, возможен данный слайдер как на картинке? Если да, то пожалуйста укажите что и как (возможно)надо делать по другому.
Спасибо.

всё тоже самое, просто посмотреть внимательно на теги и составить строку подключения с желаемыми параметрами
djinn
djinn 4 апреля 2014 01:16
Здравствуйте.
Существует некая проблема с каруселью by ПафНутиЙ.
Проблема заключается в том, что при обновлении страницы или при заходе на нее, на которой выводиться карусель, на секунду выстраиваются в вертикальный ряд, вниз, весь список постов, которые подключены относительно настройкам кода вывода новостей в данном модуле, тем самым загораживая все что находится под блоком с каруселью, что бы там не находилось.
Есть ли какой то метод избежать подобную бяку?, как то немного не эстетично что ли...
ПафНутиЙ
ПафНутиЙ 4 апреля 2014 09:01
Здравствуйте.
Существует некая проблема с каруселью by ПафНутиЙ.
Проблема заключается в том, что при обновлении страницы или при заходе на нее, на которой выводиться карусель, на секунду выстраиваются в вертикальный ряд, вниз, весь список постов, которые подключены относительно настройкам кода вывода новостей в данном модуле, тем самым загораживая все что находится под блоком с каруселью, что бы там не находилось.
Есть ли какой то метод избежать подобную бяку?, как то немного не эстетично что ли..

да, достаточно задать карусельке фиксированную высоту, тогда скачков не будет.

P.S. с комментариями какая то байда. Комментарий есть, но не отображается на странице. наверное пришло время обновлять блог.
djinn
djinn 4 апреля 2014 09:31
да, достаточно задать карусельке фиксированную высоту, тогда скачков не будет.

P.S. с комментариями какая то байда. Комментарий есть, но не отображается на странице. наверное пришло время обновлять блог.


Я прописал вот так:
#bp_slider {
    height: 120px;  
    }
#bp_slider img {
    height: 100px;
    	}
#bp_slider .bp_item {
    font-size: 12px;
    height: 120px;
    width: 280px;
    }
#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: #B00;
            }
    #bp_slider .bp_item_img {
        float: left;
        padding: 3px 5px 0 0;
        }

.jcarousel-clip {
    overflow: hidden; 

    }

.jcarousel-container {
    width:  280px;    
    }


Но не помогает. В css не спец, иначе и не спрашивал бы.
Пожалуйста поправьте как надо...

На счет блога, видимо вы правы, комменты в этой новости вообще не видны, постранично.
aibar
aibar 15 января 2015 06:57
Павел. Помощь нужна была небольшая.
Слайдер подключил. Из вертикального сделал горизонтальный. Но теперь новости листаются, только они столбиком стоят, поэтому листается только самая первая новость. Подскажи, пожалуйста, что нужно изменить, чтобы новости листались правильно?

Добавить комментарий

Комментировать могут только зарегистрированные пользователи

Информация

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