Всем привет. Довольно часто встречал сообщения о прокрутке материалов в модуле 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К 203 Количество загрузок:
В файл 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К 273 Количество загрузок:
Сообщение отредактировал Cheren-dow: 17 March 2015 - 17:59