Модуль JBZoo items новый шаблон carousel (карусель изображений)

Всем привет. Довольно часто встречал сообщения о прокрутке материалов в модуле JBZoo items, поэтому и решил сделать данный рецепт. Полученный результат виден на изображении:

-=Поехали=-

Не выбирал долго я jQuery плагин и остановился, на мой взляд достаточно хорошем плагине jCarousel

1.1 Переходим в папку модуля

сайт\modules\mod_jbzoo_item

создаем нужные файлы и папки - показал на скриншоте

Картинку с изображениями прикрепляю

2.1 Добавляем параметры

Открываем файл:

сайт\modules\mod_jbzoo_item\mod_jbzoo_item.xml

и заменяем содержимое на:

<?xml version="1.0" encoding="utf-8"?>
<!--
    JBZoo App is universal Joomla CCK, application for YooTheme Zoo component

    @package     jbzoo
    @version     2.x Pro
    @author      JBZoo App http://jbzoo.com
    @copyright   Copyright (C) JBZoo.com,  All rights reserved.
    @license     http://jbzoo.com/license JBZoo Licence
    @coder       Vitaliy Yanovskiy <joejoker@jbzoo.com>
    @coder       Alexander Oganov <t_tapak@yahoo.com>
-->
<extension type="module" version="2.5" method="upgrade" client="site">
    <name>JBZoo Item</name>
    <author>JBZoo.com</author>
    <creationDate>2014 08</creationDate>
    <copyright>Copyright (C) JBZoo.com, All rights reserved.</copyright>
    <authorEmail>admin@jbzoo.com</authorEmail>
    <authorUrl>http://jbzoo.com</authorUrl>
    <version>2.1.5 Pro</version>
    <updateUrl>http://server.jbzoo.com/checkupdates</updateUrl>
    <license>http://jbzoo.com/license JBZoo Licence</license>
    <description>JBZOO_ITEM_MODULE_DESCRIPTION</description>

    <files>
        <filename module="mod_jbzoo_item">mod_jbzoo_item.php</filename>
        <filename>helper.php</filename>
        <filename>index.html</filename>
        <folder>types</folder>
        <folder>renderer</folder>
        <folder>tmpl</folder>
    </files>

    <config>
        <fields name="params">
            <fieldset name="basic" addfieldpath="/media/zoo/applications/jbuniversal/joomla/fields">

                <field name="moduleclass_sfx"
                       type="text"
                       default=""
                       label="JBZOO_MODULE_SFX"
                       description="JBZOO_MODULE_SFX_DESC"/>

                <field name="layout"
                       type="modulelayout"
                       label="JFIELD_ALT_LAYOUT_LABEL"
                       description="JFIELD_ALT_MODULE_LAYOUT_DESC"/>

                <field name="item_layout"
                       type="jbfilename"
                       default="default"
                       label="JBZOO_MODITEM_LAYOUT_ITEM"
                       description="JBZOO_MODITEM_LAYOUT_ITEM_DESC"
                       path="/modules/mod_jbzoo_item/renderer/item/" ext="php"/>

                <field name="cache" type="hidden" default="0"/>
                <field name="owncache" type="hidden" default="0"/>
                <field name="cache_time" type="hidden" default="0"/>
                <field name="cachemode" type="hidden" default="itemid"/>
            </fieldset>

            <fieldset name="base" label="JBZOO_MODITEM_BASE">

                <field name="mode"
                       type="list"
                       default="conditions"
                       label="JBZOO_MODITEM_MODE"
                       description="JBZOO_MODITEM_MODE_DESC">

                    <option value="conditions">JBZOO_MODITEM_FILTER</option>
                    <option value="viewed">JBZOO_MODITEM_RECENTLY_VIEWED</option>
                </field>

                <field name="@group-conditions"
                       type="jbdelimiter"
                       default="JBZOO_MODITEM_FILTER_LABEL"
                        group="conditions" />

                <field name="condition_app"
                       type="jbapplist"
                       default=""
                       label="JBZOO_MODITEM_APPLICATIONS"
                       description="JBZOO_MODITEM_APPLICATIONS_DESC"
                       multiple="0"
                       headhide="1"/>

                <field name="condition_type"
                       type="jbtype"
                       default=""
                       label="JBZOO_MODITEM_TYPES"
                       description="JBZOO_MODITEM_TYPES_DESC"
                       multiple="0"
                       headhide="1"/>

                <field name="logic"
                       type="radio"
                       default="and"
                       label="JBZOO_MODITEM_LOGIC"
                       description="JBZOO_MODITEM_LOGIC_DESC">

                    <option value="or">JBZOO_MODITEM_LOGIC_OR</option>
                    <option value="and">JBZOO_MODITEM_LOGIC_AND</option>
                </field>

                <field name="type_search"
                       type="radio"
                       default="1"
                       label="JBZOO_MODITEM_TYPE_SEARCH"
                       description="JBZOO_MODITEM_TYPE_SEARCH_DESC">

                    <option value="0">JBZOO_MODITEM_TYPE_SEARCH_FULL</option>
                    <option value="1">JBZOO_MODITEM_TYPE_SEARCH_DOTTED</option>
                </field>

                <field name="conditions"
                       type="jbkeyvalue"
                       default=""
                       label="JBZOO_MODITEM_CONDITIONS"
                       description="JBZOO_MODITEM_CONDITIONS_DESC"/>

                <field name="@group-viewed"
                       type="jbdelimiter"
                       default="JBZOO_MODITEM_RECENTLY_VIEWED"
                       group="viewed" />

                <field type="jbtype"
                       name="recently_type"
                       description="JBZOO_MODITEM_TYPES_DESC"
                       label="JBZOO_MODITEM_TYPES"
                       default=""
                       headhide="1"
                       multiple="1"/>

                <field name="delete"
                       type="radio"
                       default="1"
                       label="JBZOO_MODITEM_RECENTLY_VIEWED_DELETE_LABEL"
                       description="JBZOO_MODITEM_RECENTLY_VIEWED_DELETE_DESC">

                    <option value="0">JBZOO_NO</option>
                    <option value="1">JBZOO_YES</option>
                </field>

                <field name="@group-close"
                       type="jbdelimiter"
                       default="JBZOO_MODITEM_BASIC_OPTIONS"
                       group="close" />

                <field name="order_default"
                       type="jbitemorderadv"
                       default=""
                       label="JBZOO_MODITEM_ORDER_DEFAULT"
                       description="JBZOO_MODITEM_ORDER_DEFAULT_DESC"/>

                <field name="pages"
                       type="text"
                       default="20"
                       label="JBZOO_MODITEM_PAGES"
                       description="JBZOO_MODITEM_PAGES_DESC"/>
            </fieldset>

            <fieldset name="template" label="JBZOO_MODITEM_TEMPLATE">

                <field name="item_cols"
                       type="list"
                       default="1"
                       label="JBZOO_MODITEM_COLS"
                       description="JBZOO_MODITEM_COLS_DESC">

                    <option value="0">JBZOO_MODITEM_NO_TEMPLATE</option>
                    <option value="1">JBZOO_NUMBERS_1</option>
                    <option value="2">JBZOO_NUMBERS_2</option>
                    <option value="3">JBZOO_NUMBERS_3</option>
                    <option value="4">JBZOO_NUMBERS_4</option>
                    <option value="5">JBZOO_NUMBERS_5</option>
                    <option value="6">JBZOO_NUMBERS_6</option>
                </field>

                <field name="display_border"
                       type="jbbool"
                       default="1"
                       label="JBZOO_MODITEM_DISPLAY_BORDER"
                       description="JBZOO_MODITEM_DISPLAY_BORDER_DESC"/>

                <field name="items_image_align"
                       type="list"
                       default="left"
                       label="JBZOO_MODITEM_ITEMS_IMAGE_ALIGN"
                       description="JBZOO_MODITEM_ITEMS_IMAGE_ALIGN_DESC">

                    <option value="none">JBZOO_MODITEM_IMAGE_ALIGN_NONE</option>
                    <option value="left">JBZOO_MODITEM_IMAGE_ALIGN_LEFT</option>
                    <option value="right">JBZOO_MODITEM_IMAGE_ALIGN_RIGHT</option>
                    <option value="center">JBZOO_MODITEM_IMAGE_ALIGN_CENTER</option>
                </field>

                <field name="column_heightfix"
                       type="jbbool"
                       default="0"
                       label="JBZOO_MODITEM_COLUMN_HEIGHTFIX"
                       description="JBZOO_MODITEM_COLUMN_HEIGHTFIX_DESC"/>
            </fieldset>

            <fieldset name="template-jcarusel" label="Шаблон jCarousel">
                <field name="jc_width"
                       type="text"
                       filter="int"
                       default="200"
                       label="Ширина"
                       description="Ширина блока"/>

                <field name="jc_step"
                       type="text"
                       filter="int"
                       default="1"
                       label="Шаг"
                       description="Шаг прокрутки"/>

                <field name="jc_auto"
                       type="radio"
                       class="btn-group btn-group-yesno"
                       default="0"
                       label="Авто прокрутка"
                       description=""
                        >
                    <option value="1">JYES</option>
                    <option value="0">JNO</option>
                </field>

                <field name="jc_interval"
                       type="text"
                       filter="int"
                       default="1"
                       label="Задержка прокрутки (сек)"
                       description=""/>
            </fieldset>

        </fields>
    </config>
</extension>

2.2 Добавляем содержимое в нужные файлы:

В файл carousel.css

сайт\modules\mod_jbzoo_item\assets\css\carousel.css

Добавляем следующие стили:

.jcarousel {
    position: relative;
    overflow: hidden;
}

.jcarousel ul {
    width: 20000em;
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}

.jcarousel li {
    float: left;
    text-align: center;
}

.jcarousel li.rborder {
    margin-right: 10px;
}

.jcarousel .wrapper-item-carousel {
    padding: 6px;
}

.jcarousel .jcarousel-control {
    display: block;
    position: absolute;
    z-index: 2;
    top: 50%;
    width: 50px;
    height: 50px;
    margin-top: -25px;
    background: url("../img/buttons.png") no-repeat;
}

.jcarousel .jcarousel-control.prev {
    background-position: 0 100%;
}

.jcarousel .jcarousel-control.next {
    right: 0;
}

Переносим картику в папку img и называем ее buttons.png

Далее ложим файл jquery.jcarousel.js в

сайт\modules\mod_jbzoo_item\assets\js\jcarousel\jquery.jcarousel.js

jquery.jcarousel.js 16.94К 246 Количество загрузок:

В файл carousel.php который расположен в

сайт\modules\mod_jbzoo_item\renderer\item\carousel.php

Вставляем следующий код

<?php
/**
 * JBZoo App is universal Joomla CCK, application for YooTheme Zoo component
 *
 * @package     jbzoo
 * @version     2.x Pro
 * @author      JBZoo App http://jbzoo.com
 * @copyright   Copyright (C) JBZoo.com,  All rights reserved.
 * @license     http://jbzoo.com/license-pro.php JBZoo Licence
 * @coder       Vitaliy Yanovskiy <joejoker@jbzoo.com>
 */

// no direct access
defined('_JEXEC') or die('Restricted access');

?>
<div class="wrapper-item-carousel">
    <?php if ($this->checkPosition('image')) : ?>
        <div class="item-image align-<?php echo $params->get('items_image_align', 'left') ?>">
            <?php echo $this->renderPosition('image'); ?>
        </div>
    <?php endif; ?>

    <?php if ($this->checkPosition('title') || $this->checkPosition('price')) : ?>
        <div class="item-wrapper-desc">
            <?php if ($this->checkPosition('title')) : ?>
                <div class="item-title"><?php echo $this->renderPosition('title'); ?></div>
            <?php endif; ?>

            <?php if ($this->checkPosition('price')) : ?>
                <div class="item-price"><?php echo $this->renderPosition('price'); ?></div>
            <?php endif; ?>
        </div>
    <?php endif; ?>
</div>

Тут определены на вывод 3 позиции которые указываем в файле

сайт\modules\mod_jbzoo_item\renderer\item\positions.xml

Полное содержимое его имеет вид

<?xml version="1.0" encoding="utf-8"?>
<!--
    JBZoo App is universal Joomla CCK, application for YooTheme Zoo component

    @package     jbzoo
    @version     2.x Pro
    @author      JBZoo App http://jbzoo.com
    @copyright   Copyright (C) JBZoo.com,  All rights reserved.
    @license     http://jbzoo.com/license-pro.php JBZoo Licence
    @coder       Vitaliy Yanovskiy <joejoker@jbzoo.com>
-->
<renderer>
    <positions layout="default">
        <position name="image">Image</position>
        <position name="title">Title</position>
        <position name="price">Price</position>
        <position name="description">Description</position>
        <position name="properties">Properties</position>
        <position name="links">Links</position>
    </positions>

    <!--Позции для нового шаблона-->
    <positions layout="carousel">
        <position name="image">Image</position>
        <position name="title">Title</position>
        <position name="price">Price</position>
    </positions>
    <!-- -->
    
    <positions layout="table">
        <position name="cell1">Table cell #1</position>
        <position name="cell2">Table cell #2</position>
        <position name="cell3">Table cell #3</position>
        <position name="cell4">Table cell #4</position>
        <position name="cell5">Table cell #5</position>
    </positions>
</renderer>

Так же нужно сказать ZOO что у нас есть новый шаблон в файле metadata.xml он расположен в тойже папке где файл с позициями. Теперь файл имеет вид

<?xml version="1.0" encoding="utf-8"?>
<!--
    JBZoo App is universal Joomla CCK, application for YooTheme Zoo component

    @package     jbzoo
    @version     2.x Pro
    @author      JBZoo App http://jbzoo.com
    @copyright   Copyright (C) JBZoo.com,  All rights reserved.
    @license     http://jbzoo.com/license-pro.php JBZoo Licence
    @coder       Vitaliy Yanovskiy <joejoker@jbzoo.com>
-->
<metadata>
    <layout name="default">
        <name>Default</name>
        <description>This is the default layout to render jbzoo items module themes</description>
    </layout>

    <layout name="table">
        <name>Table</name>
        <description>This is the table layout to render jbzoo items module themes</description>
    </layout>

    <!--Добавили новый шаблон-->
    <layout name="carousel">
        <name>Carousel</name>
        <description>This is the table carousel to render jbzoo items module themes</description>
    </layout>
    <!-- -->
</metadata>

Далее вставляем следующий код в шаблон модуля это файл

сайт\modules\mod_jbzoo_item\tmpl\carousel.php

<?php
/**
 * JBZoo App is universal Joomla CCK, application for YooTheme Zoo component
 *
 * @package     jbzoo
 * @version     2.x Pro
 * @author      JBZoo App http://jbzoo.com
 * @copyright   Copyright (C) JBZoo.com,  All rights reserved.
 * @license     http://jbzoo.com/license-pro.php JBZoo Licence
 * @coder       Vitaliy Yanovskiy <joejoker@jbzoo.com>
 */

// no direct access
defined('_JEXEC') or die('Restricted access');

$zoo->document->addScript('mod_jbzoo_item:assets/js/jcarousel/jquery.jcarousel.js');
$zoo->document->addStylesheet('mod_jbzoo_item:assets/css/carousel.css');

$count = count($items);
$columns = (int)$params->get('item_cols', 1);
$border = (int)$params->get('display_border', 1) ? 'rborder' : '';

$jCWidth  = (int)$params->get('jc_width', 200);
$jCStep   = (int)$params->get('jc_step', 1);
$jCInterval = (int)$params->get('jc_interval', 1);
?>

<style type="text/css">
    #<?php echo $unique; ?> li{
        width: <?php echo $jCWidth; ?>px ;
    }
</style>

<script type="text/javascript">
    jQuery(function($){
        $('.jcarousel').jcarousel({}).on('jcarouselautoscroll:destroyend', function() {
            alert('p');
        });;

        <?php if ((int)$params->get('jc_auto', 0)) : ?>
        $('.jcarousel').jcarouselAutoscroll({
                interval: <?php echo $jCInterval * 1000; ?>,
                target: '+=<?php echo $jCStep; ?>',
                autostart: true
            });
        <?php endif; ?>

        $('#<?php echo $unique; ?> .prev')
            .on('jcarouselcontrol:active', function() {
                $(this).removeClass('inactive');
            })
            .on('jcarouselcontrol:inactive', function() {
                $(this).addClass('inactive');
            })
            .jcarouselControl({
                // Options go here
                target: '-=<?php echo $jCStep; ?>'
            });

        $('#<?php echo $unique; ?> .next')
            .on('jcarouselcontrol:active', function() {
                $(this).removeClass('inactive');
            })
            .on('jcarouselcontrol:inactive', function() {
                $(this).addClass('inactive');
            })
            .jcarouselControl({
                // Options go here
                target: '+=<?php echo $jCStep; ?>'
            });
    });
</script>

<?php
if ($count) {

    echo '<div id="' . $unique . '" class="jbzoo yoo-zoo jcarousel-wrapper">';
    echo '<div class="jcarousel">';
    echo '<ul class="module-items jbzoo-rborder module-items-col-' . $columns . '">';

    if ($params->get('delete') && $params->get('mode') == 'viewed') {
        echo '<a href="index.php?option=com_zoo&controller=viewed&task=clear&format=raw" class="jsRecentlyViewedClear recently-viewed-clear">' . JText::_('JBZOO_MODITEM_DELETE') . '</a>';
    }

    if ($columns) {

        $j = 0;

        foreach ($items as $item) {

            $app_id = $item->application_id;
            $j++;

            $isLast = $j % $columns == 0;

            echo '<li class="' . $border . '">';
            echo $renderer->render('item.' . $params->get('item_layout', 'default'),
                array(
                    'item'   => $item,
                    'params' => $params
                )
            );

            echo '</li>';

        }

    } else {

        foreach ($items as $item) {
            $app_id = $item->application_id;
            echo $renderer->render('item.' . $params->get('item_layout', 'default'),
                array(
                    'item'   => $item,
                    'params' => $params
                )
            );
        }
    }

    echo '</ul>';

    echo '<a href="#" class="jcarousel-control prev"></a>' .
        '<a href="#" class="jcarousel-control next"></a>';

    echo '</div></div>';

    if ($params->get('delete') && $params->get('mode') == 'viewed') : ?>
        <script type="text/javascript">
            jQuery(document).ready(function ($) {
                $('#<?php echo $unique; ?>').JBZooViewed({
                    'message': '<?php echo JText::_('JBZOO_MODITEM_RECENTLY_VIEWED_DELETE_HISTORY'); ?>',
                    'app_id' :  <?php echo $app_id; ?>
                });
            });
        </script>
    <?php endif; ?>

    <?php if ($params->get('column_heightfix')) : ?>
        <script type="text/javascript">
            jQuery(document).ready(function ($) {
                $('.module-items').JBZooHeightFix();
            });
        </script>
    <?php endif;

}

Теперь можно перейти в настройки модуля и увидинь новую вкладку с параметрами для карусели изображений

Оставляем как есть или устанавливаем свои параметры

Выбираем наши шаблоны

Выводим модуль в позиции и проверяем. Если все сделали правильно - должно работать

mod_jbzoo_item(carousel_patch).zip 13.91К 318 Количество загрузок:

Сообщение отредактировал Cheren-dow: 17 March 2015 - 17:59

нет, я вообще о выводе элементов.

Вот например витрину делать на главке или где то еще - я обычно использую тот же виджеткит. Делаю слайдсет. Удобно это, в пределах какого то типа товара можно не тыкаясь полистать как карусельку.

Вот вырубает то, что это все дело грузится на страничку всегда цельно. То есть если я выбрал просмотреть следующие пять популярных товаров - у меня они красиво скользнут. ... из скрытого состояния. А до этого они все заливаются на страничку.. а если я захочу дать человеку шагов 7 полистать популярное - представить страшно сколько будет грузится в этот слайдсет..

А еще у меня есть витринка с популярными товарами и так далее.. Это ж сколько грузится за раз..

Хорошо бы подгружать следующие элементы карусельки по требованию.

Но вообще конечно круто, что решение простое сделано. Виджеткит не надо теперь будет для витрин. файлы бы еще готовые пульнуть на загрузку

Основной форум JBZoo → Разное → Jbzoo На Joomla 4 Автор CB9TOIIIA , 24 May 2023 jbzoo, joomla4, joomla 4 00	Горячая тема 9 Ответов 2870 Просмотров	df1 18 Feb 2024
Вопрос решен English public forum → Support JBZoo Free & Joomla → Lazyload Для Image Автор sanek2281 , 18 Mar 2021 lazyload, jbzoo, jbzoo item 00	7 Ответов 3260 Просмотров	sanek2281 22 Mar 2021
Русский мини форум → Ищу разработчика за вознаграждение! → Куплю Сайт С Коробки Автор Danser , 10 Jul 2020 jbzoo, демо сайт, куплю сайт 00	5 Ответов 2453 Просмотров	isay777 04 Sep 2020
Русский мини форум → Открытый форум JBZoo & YOOtheme Zoo → Убираем Jquery.ui Из Вариантов Цены И Фильтра Автор Raven23 , 13 Apr 2020 фильтр, карточка товара, рецепт 00	1 Ответ 3177 Просмотров	Raven23 23 Nov 2020
Вопрос решен Русский мини форум → Открытый форум JBZoo & YOOtheme Zoo → После Уcтановки Zoo3.3 И Jbzoo4.10.2 Не Могу Найти Кнопку Создать Автор info@spmash.ru , 09 Apr 2019 jbzoo, zoo 00	2 Ответов 5630 Просмотров	info@spmash.ru 09 Apr 2019

#1 Cheren-dow

#2 Ёшкин Кот

#3 Cheren-dow

#4 Ёшкин Кот

#5 Cheren-dow

#6 Na_uM

#7 rihter2001

#8 Cheren-dow

#9 hasanchemerzaev

#10 Sliapy

Темы с аналогичным тегами рецепт, jbzoo, jbzoo 2.0+, items, карусель изображений

Jbzoo На Joomla 4

Lazyload Для Image

Куплю Сайт С Коробки

Убираем Jquery.ui Из Вариантов Цены И Фильтра

После Уcтановки Zoo3.3 И Jbzoo4.10.2 Не Могу Найти Кнопку Создать