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

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

29.01
29
22 416
Карусель с автопрокруткой на основе 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

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

Комментарии

bratoz
bratoz 30 января 2012 11:05
Пора делать свой p-blocks 2.0 :D
ПафНутиЙ
ПафНутиЙ 30 января 2012 15:44
Я делаю только то, чем пользуюсь сам))) и на поток ставить не собираюсь.
Те, кто знают для чего и о чём модуль - юзают и наслаждаются, а тем кому важнее описание - дорога лесом))) ведь по "обёртке" модули не судят)))
lenin
lenin 30 января 2012 23:23
Модуль вообще супер!!! Только плохо что некоторые потребности нельзя реализовать в версиях где шаблон вывода стал TPL файл, так иногда и приходится пользоваться самой первой версией, в которой настройка вывода настраивалась в самом файле мода!
smile
ПафНутиЙ
ПафНутиЙ 30 января 2012 23:33
приведите пример того, что нельзя вывести новой версией.
lenin
lenin 2 февраля 2012 22:14
Например вот такой код:

Здесь для каждой новости выводится два массива: один с маленькой картинкой для превьюшек, другое - с большой картинкой для слайдера, плюс к ним выводится титл и описание новости. В результате получается код, которые нельзя реализовать последней версией имея под рукой один шаблон-файл tpl. В итоге пришлось реализовать все это кодом выше в старой версии.

Этот код выводит слайдер http://demo.webdeveloperplus.com/featured-content-slider/
ПафНутиЙ
ПафНутиЙ 3 февраля 2012 01:33
Пролема тут только в выводе оригинального изображения, остальное выводится оч легко.
ну а переменную ещё одну можно и дописать) кстати мысль неплохая, будет желание - сделаю отдельнй тег на полную картинку.
lenin
lenin 3 февраля 2012 11:05
ПафНутиЙ,
не так немного понял меня! Я сделал ссылку на полую картинку ( http://www.nulled.cc/posts/1898109/ ) , по умолчанию можно сделать только одну уменьшенную копию изображения $t_img_*, я добавил ещё одно изображение $t_img_*_big, по размеру оно получается не как оригинал, а также урезанное как и первое изображение, но немного больше (для левого изображения слайдера), также для него соответственно добавил ещё один crop чтобы можно было резать два разных размера изображения. Далее идет вывод кода, который никак нельзя сделать одним шаблоном, посмотри внимательнее код исходника (ссылку на сам слайдер давал выше), и там просто никак не реализовать вывод через шаблон, потому как получается что:
1. генерируется 4 новости с маленькими картинками (шаблон!)
2. генерируется 4 новости с картинками побольше (шаблон!)
3. предыдущие коды новостей объединяются в один код, где присутствует ещё код начала и конца слайдера, если его добавить в шаблон - то этот код будет повторяться столько раз, сколько выводится новостей. А этот код нужен только один раз: в начале и в конце самого слайдера.
Была мысль сделать вставку в main.tpl так:
1. код для начала слайдера.
2. сам инклуд мода (вывод данных по шаблону, пункты 1-2 выше)
3. код для конца слайдера.
Но так больше телодвижений нужно делать и больше файлов править. Проще если в одном сделать и потом его просто инклудом например в main.tpl пихать winked
ПафНутиЙ
ПафНутиЙ 3 февраля 2012 12:23
Ты сейчас говоришь о частном случаи и конкретным решением определённой ситуации.
И к тому же уже модифицировал исходный модуль.
Что мешает добавить функционал обрезки тега {image-X} не один, а два раза (а вообще нужно изначально для слайдера грузить нужный размер картинки в допполе чтоы двиг как раз не делал лишних движений по кропу картинок), при этом увеличенная копия пусть выводится например тегом {big_image}. а уменьшенная {image-1}, ну или наоборот ))) и будет генерироваться 4 новости с маленькими и большими картинками
код начала и конца слайдера НУЖНО класть в шаблон а не генерировать на php ибо у другого пользователя начало и конец могут быть другими. Да и вставить всё можно в езд файл, который будет подключаться к main.tpl

Опять же, что мешает сделать подключение модуля 2 раза и "рассановку" блоков в нужном порядке через jquery (один фиг слайдер на jq работает) по моему решение гораздо элегантнее, чем старая версия модуля). А главное наверняка будет нести меньшу. нагрузку (хотя по хорошему надо тестироватьв сравнении). С другой стороны если не говнохостинг - и старая версия будет нормально ходить)))
lenin
lenin 3 февраля 2012 15:28
ГХ давно уже не пользуюсь, часто тупят они.
Ради одного слайдера подключать блок два раза? В общем то выход, но из разряда "инженеры не ищут простых путей" lol
Если не секрет, что в новых версиях было сделано касательно оптимизации нагрузки на сервер в данном моде? Может быть лучше стоит дописать этот код оптимизации из новых версий в старую и слайдер будет выводится одним инклудом в шаблон сайта? fellow

PS Кстати, если картинки кешируются, то почему они должны резаться каждый раз при обновлении страниц каким-то пользователем? Блок же должен обновляться после очистки кеша на сайте, или в этом я не прав?
PS2 Вообще помимо всего, в старой версии довольно просто на пхп написать несколько вариантов слайдеров, а потом всего лишь нужный выводить инклудом, ну и при желании совсем не трудно будет поравить КСС для вида, а также заменить один слайдер на другой - всего лишь изменить размеры картинок в инклуде, а также вариант выводимого блока. Лично мне кажется такой вариант более оптимальным, но единственно интересует как перенести оптимизацию нагрузки из новой версии bully
ПафНутиЙ
ПафНутиЙ 4 февраля 2012 04:32
Нового много, собственно от старого модуля остались крохи.
Основное - работа с картинками и допполями.
Сейчас дотачиваю вывод новостей только из просматриваемой категории, думаю будет удобно.

Старая версия простая как электровеник и легко поддаётся дресировки под конкретный сайт. Новая версия более универсальна и поэтому в дрессировке не нуждается, а за счёт шаблонов можно гораздо разнообразнее оформить новости. Как говорится, на вкус и цвет фломастеры разные)))
OKyJIucT
OKyJIucT 13 февраля 2012 18:22
Подскажите, уважаемый, а basenavi.png где можно взять такой, как у вас на скрине?
OKyJIucT
OKyJIucT 13 февраля 2012 18:28
Нашел в гугл картинках подходящий, допилить пару пикселей и сгодится))
ПафНутиЙ
ПафНутиЙ 13 февраля 2012 21:06
Это стандартный спрайт в дефолтном шаблоне ))))
я его взял т.к. не видел смысла рисовать отдельные картинки навигации при уже имеющихся готовых ))
Drakeno
Drakeno 19 февраля 2012 16:45
К сожалению карусель может стать адом для сайта, хочу предупредить всех.
Скрипт, который вставляется в libs.js неведомым образом конфликтует со многими скриптованными плагинами, в частности: DataTables, форум Bullet Energy, и некоторыми чатами. Да и сама карусель из-за конфликта не работает.

Я конечно был ленив, чтобы как-то переименовывать функции, копатья в ява-скриптах, и дальше пробовать не стал, поживу лучше как-то без карусели...

Может стоит както разнообразить названия и тип функций, раз где-то встречаются похожие?
ПафНутиЙ
ПафНутиЙ 19 февраля 2012 17:57
Нужно просто правильно подключать скрипты и всё будет ок.
luckybuy
luckybuy 31 марта 2012 00:18
Привет,

поставил себе карусел, все ОК во всех браузерах , кроме chrome. Не работает автопрокрутка и прокрутка через кнопки.
В чем может быть проблема ?

спасибо.
ПафНутиЙ
ПафНутиЙ 31 марта 2012 13:23
Нужно смотреть сайт. Возможно конфликт с чемнибудь.
Den1
Den1 23 апреля 2012 17:01
Привет,
Не так хорошо понимаю, как реализовать, но задача сделать несколько новостей в ленте, в данный момент реализована одна с последующей сменой, если возможность увеличить до 5-10 новостей в одном окне?
За ранее благодарен.
ПафНутиЙ
ПафНутиЙ 24 апреля 2012 00:21
Да. Достаточно выставить ширину блока равную трём дочерним элементам.
fantom19
fantom19 21 октября 2012 13:23
на dle 9.7 не выводится описание
ПафНутиЙ
ПафНутиЙ 21 октября 2012 15:03
http://blockpro.ru/documentation.html#changelog смотрите 2.6.5, там теги заменены.
Николай
Николай 22 ноября 2012 14:06
а как сделать чтобы карусель выводилась не только на главной странице а допустим на какой нибудь другой?
ПафНутиЙ
ПафНутиЙ 22 ноября 2012 19:05
убрать теги not-aviable=main
vvv_k
vvv_k 28 ноября 2012 01:04
Подскажите, пожалуйста, как изменить ширину блока, текст растягивается, а рамки блока на месте.
ПафНутиЙ
ПафНутиЙ 28 ноября 2012 01:26
рамки блока - это картинки (в дефолтном шаблоне) поэтому нужно изменять саму картинку.
vvv_k
vvv_k 28 ноября 2012 01:48
Спасибо огромное, понял. feel
vvv_k
vvv_k 29 ноября 2012 02:03
Приветствую. Подскажите, возможно ли вывести одновременно 3 «блока-каруселей», с отображением новостей из разных заданных категорий? В двух сбивается форматирование,(это связанно с необходимостью перезапускать js-скрипт?) или есть какое-то другое решение. Пытаюсь разместить горизонтально, в столбиках таблицы.
ПафНутиЙ
ПафНутиЙ 29 ноября 2012 10:38
Возможно.
$(function() {
    jQuery('#bp_slider, #bp_slider2, #bp_slider3').jcarousel({
        wrap: 'circular',
        auto: 5, //интервал прокрутки в секундах
        scroll: 1, //кол-во элементов, прокручиваемых за один раз
        animation: 500, //скорость  прокрутки
        initCallback: mycarousel_initCallback //вызов функции остановки прокрутки при наведении мышки
    });
});

#bp_slider, #bp_slider2, #bp_slider3 - ID нужных блоков.
Насчёт сбивания форматирования не понял, нужно видеть сайт.
vvv_k
vvv_k 29 ноября 2012 23:54
Спасибо получилось, пока не до конца, но это мой первый сайт, не коммерческий делается в свободное время.
Николай
Николай 4 декабря 2012 01:00
не выводятся стрелочки как указано на картинке.подскажите что делать??

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

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

Информация

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