Сообщений в теме: 42

[Cheren-dow]

Всем привет. Довольно часто встречал сообщения о прокрутке материалов в модуле 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К   213 Количество загрузок:

 

В файл 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К   289 Количество загрузок:

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

[Ёшкин Кот]

Вот всегда волновала сама по себе система 5 вижу, 15 в уме. 

 

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

[Cheren-dow]

Ёшкин Кот сказал(а) 07 Ноя 2014 - 17:11:

себе система 5 вижу, 15 в уме. 

это уже тема отдельно рецепта   

Ёшкин Кот, я так понял это о недано просмотренных?  

[Ёшкин Кот]

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

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

 

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

 

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

 

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

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

[Cheren-dow]

Добавил патч. Не проверял, но должно работать

[Na_uM]

Cheren-dow сказал(а) 07 Ноя 2014 - 17:19:

это уже тема отдельно рецепта   

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

[rihter2001]

попытался прикрутить его к бета версии он у меня почему то тянет defolt шаблон из новой авансе http://ergobed.info/ergobed-basic

[Cheren-dow]

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

[hasanchemerzaev]

Что надо сделать для того что бы выводило в 2 строки?

[Sliapy]

Не знаю ни одной карусели, которая бы умела листать 2 строки.