ПафНутиЙ-Блог » Статьи » jQuery » Карусель с автопрокруткой на основе Block.Pro.2 и jCarousel

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

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

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

  • Вывод последних сообщений из phpBB3 в DLE 9
  • Модуль iComm (Последние комментарии) jQuery Edition
  • Воскресные сниппеты №4
  • Выводим дополнительные поля в похожих новостях или немного о новых возможностях модуля Block.Pro.2
Закрыть

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

+

Комментарии

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

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

Этот код выводит слайдер http://demo.webdeveloperplus.com/featured-content-slider/
ПафНутиЙ
ПафНутиЙ 3 февраля 2012 01:33
Ответов: 0 #1383
Пролема тут только в выводе оригинального изображения, остальное выводится оч легко.
ну а переменную ещё одну можно и дописать) кстати мысль неплохая, будет желание - сделаю отдельнй тег на полную картинку.
lenin
lenin 3 февраля 2012 11:05
Ответов: 0 #1384
ПафНутиЙ,
не так немного понял меня! Я сделал ссылку на полую картинку ( 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
Ответов: 0 #1385
Ты сейчас говоришь о частном случаи и конкретным решением определённой ситуации.
И к тому же уже модифицировал исходный модуль.
Что мешает добавить функционал обрезки тега {image-X} не один, а два раза (а вообще нужно изначально для слайдера грузить нужный размер картинки в допполе чтоы двиг как раз не делал лишних движений по кропу картинок), при этом увеличенная копия пусть выводится например тегом {big_image}. а уменьшенная {image-1}, ну или наоборот ))) и будет генерироваться 4 новости с маленькими и большими картинками
код начала и конца слайдера НУЖНО класть в шаблон а не генерировать на php ибо у другого пользователя начало и конец могут быть другими. Да и вставить всё можно в езд файл, который будет подключаться к main.tpl

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

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

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

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

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

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

спасибо.
ПафНутиЙ
ПафНутиЙ 31 марта 2012 13:23
Ответов: 0 #1567
Нужно смотреть сайт. Возможно конфликт с чемнибудь.
Den1
Den1 23 апреля 2012 17:01
Ответов: 1 #1649
Привет,
Не так хорошо понимаю, как реализовать, но задача сделать несколько новостей в ленте, в данный момент реализована одна с последующей сменой, если возможность увеличить до 5-10 новостей в одном окне?
За ранее благодарен.
ПафНутиЙ
ПафНутиЙ 24 апреля 2012 00:21
Ответов: 0 #1650
Да. Достаточно выставить ширину блока равную трём дочерним элементам.
fantom19
fantom19 21 октября 2012 13:23
Ответов: 1 #2290
на dle 9.7 не выводится описание
ПафНутиЙ
ПафНутиЙ 21 октября 2012 15:03
Ответов: 0 #2291
http://blockpro.ru/documentation.html#changelog смотрите 2.6.5, там теги заменены.
Николай
Николай 22 ноября 2012 14:06
Ответов: 1 #2384
а как сделать чтобы карусель выводилась не только на главной странице а допустим на какой нибудь другой?
ПафНутиЙ
ПафНутиЙ 22 ноября 2012 19:05
Ответов: 0 #2385
убрать теги not-aviable=main
vvv_k
vvv_k 28 ноября 2012 01:04
Ответов: 2 #2390
Подскажите, пожалуйста, как изменить ширину блока, текст растягивается, а рамки блока на месте.
ПафНутиЙ
ПафНутиЙ 28 ноября 2012 01:26
Ответов: 1 #2391
рамки блока - это картинки (в дефолтном шаблоне) поэтому нужно изменять саму картинку.
vvv_k
vvv_k 28 ноября 2012 01:48
Ответов: 0 #2392
Спасибо огромное, понял. feel
vvv_k
vvv_k 29 ноября 2012 02:03
Ответов: 1 #2399
Приветствую. Подскажите, возможно ли вывести одновременно 3 «блока-каруселей», с отображением новостей из разных заданных категорий? В двух сбивается форматирование,(это связанно с необходимостью перезапускать js-скрипт?) или есть какое-то другое решение. Пытаюсь разместить горизонтально, в столбиках таблицы.
ПафНутиЙ
ПафНутиЙ 29 ноября 2012 10:38
Ответов: 0 #2400
Возможно.
$(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
Ответов: 0 #2401
Спасибо получилось, пока не до конца, но это мой первый сайт, не коммерческий делается в свободное время.
Николай
Николай 4 декабря 2012 01:00
Ответов: 1 #2404
не выводятся стрелочки как указано на картинке.подскажите что делать??

Информация

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