Модуль 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.94KB 210 downloads

В файл 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.91KB 282 downloads

Edited by Cheren-dow, 17 March 2015 - 17:59.

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

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

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

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

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

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

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

Also tagged with one or more of these keywords: рецепт, jbzoo, jbzoo 2.0+, items, карусель изображений

Jbzoo На Joomla 4

Lazyload Для Image

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

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

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