Перейти к содержимому


Фотография
- - - - -

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

рецепт jbzoo jbzoo 2.0+ items карусель изображений

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

#1 Cheren-dow

Cheren-dow

Отправлено 07 November 2014 - 18:00

*
Популярное сообщение!

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

s9u1_200x0.jpg

 

 

-=Поехали=-

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

 

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

сайт\modules\mod_jbzoo_item 

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

ofbf_200x0.png

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

Прикрепленный файл  buttons.png   2.18К   0 Количество загрузок:

 

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

 

В файл 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;

}

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

d46k_200x0.png

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

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

e6yx_200x0.png

 

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

Прикрепленный файл  mod_jbzoo_item(carousel_patch).zip   13.91К   55 Количество загрузок:


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

  • 7
Изображение
 

#2 Ёшкин Кот

Ёшкин Кот

Отправлено 07 November 2014 - 18:11

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

 

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


  • 0

#3 Cheren-dow

Cheren-dow

Отправлено 07 November 2014 - 18:19

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

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

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


  • 0
Изображение
 

#4 Ёшкин Кот

Ёшкин Кот

Отправлено 07 November 2014 - 18:48

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

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

 

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

 

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

 

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


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


  • 0

#5 Cheren-dow

Cheren-dow

Отправлено 07 November 2014 - 18:57

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


  • 1
Изображение
 

#6 Na_uM

Na_uM

Отправлено 13 November 2014 - 21:43

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

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


  • 0

#7 rihter2001

rihter2001

Отправлено 14 November 2014 - 12:49

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


  • 0

#8 Cheren-dow

Cheren-dow

Отправлено 14 November 2014 - 13:05

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

#9 hasanchemerzaev

hasanchemerzaev

Отправлено 21 November 2014 - 21:27

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


  • 0

#10 Sliapy

Sliapy

Отправлено 21 November 2014 - 22:15

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


  • 0
[color=#aa0000]Не забывайте нажимать кнопку "Вопрос Решён" под сообщением, которое решило Вашу проблему.[/color]





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

Click to return to top of page in style!