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


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

Добавляем pagination в элементе JBGallery

хак элемент jbgallery

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

#1 Cheren-dow

Cheren-dow

Отправлено 17 February 2015 - 10:29

В предыдущем рецепте Na_uM предложил отличную идею, сделать pagination для элемента JBGallery. Найдя простенький JS плагин решил привязать к нашему элементу.

 

1. Скачиваем и ложим файл jquery.paginate.min.js в 

сайт\media\zoo\applications\jbuniversal\elements\jbgallery\assets\js\jquery.paginate.min.js

2. Добавляем 2 параметра в xml файл конфига в группу render 

<param name="paginate" type="radio" default="0" label="Показать навигацию" description="">
    <option value="0">No</option>
    <option value="1">Yes</option>
</param>
<param name="paginate_limit" type="text" default="10" label="Количество на странице" description=""/>

mmk8_200x0.png

 

3. Передаем параметры в шаблон

В файле  

сайт\media\zoo\applications\jbuniversal\elements\jbgallery\jbgallery.php

в методе render находим

// render layout
if ($layout = $this->getLayout()) {
    return self::renderLayout($layout, compact('thumbs', 'galleryId', 'rel'));
} 

и меняем на 

// render layout
if ($layout = $this->getLayout()) {
    return self::renderLayout($layout, compact('thumbs', 'galleryId', 'rel', 'parameter'));
} 

4. Заменяем код шаблона

сайт\media\zoo\applications\jbuniversal\elements\jbgallery\tmpl\jbgallery.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       Denis Smetannikov <denis@jbzoo.com>
 */

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


$this->app->jbassets->fancybox();

?>

<?php if (!$parameter->get('paginate', 0)) : ?>
    <div id="<?php echo $galleryId; ?>">

        <?php foreach ($thumbs as $thumb) { ?>

            <a href="<?php echo $thumb['img']; ?>"
               rel="<?php echo $rel; ?>"
               title="<?php echo $thumb['name']; ?>"
               class="jbgallery"><img src="<?php echo $thumb['thumb']; ?>"
                                      alt="<?php echo $thumb['name']; ?>"
                                      title="<?php echo $thumb['name']; ?>"
                                      width="<?php echo $thumb['thumb_width']; ?>"
                                      height="<?php echo $thumb['thumb_height']; ?>"
                    /></a>

        <?php } ?>

        <div class="clear clr"></div>
    </div>
<?php else :
    $this->app->document->addScript('elements:jbgallery/assets/js/jquery.paginate.min.js');
    ?>
    <style>
        .jbgallery-list {
            list-style: none;
        }
    </style>
    <ul id="<?php echo $galleryId; ?>" class="jbgallery-list" style="">
        <?php foreach ($thumbs as $thumb) { ?>
            <li>
                <a href="<?php echo $thumb['img']; ?>"
                   rel="<?php echo $rel; ?>"
                   title="<?php echo $thumb['name']; ?>"
                   class="jbgallery"><img src="<?php echo $thumb['thumb']; ?>"
                                          alt="<?php echo $thumb['name']; ?>"
                                          title="<?php echo $thumb['name']; ?>"
                                          width="<?php echo $thumb['thumb_width']; ?>"
                                          height="<?php echo $thumb['thumb_height']; ?>"
                        /></a>
            </li>
        <?php } ?>
    </ul>
    <div class="clear clr"></div>
    <div id="<?php echo $galleryId; ?>-pagination" style="display:none">
        <a id="<?php echo $galleryId; ?>-previous" href="#" class="disabled">&laquo; Previous</a>
        <a id="<?php echo $galleryId; ?>-next" href="#">Next &raquo;</a>
    </div>
<?php endif; ?>

<script type="text/javascript">
    jQuery(function ($) {
        $('#<?php echo $galleryId; ?> .jbgallery').fancybox({
            helpers: {
                "title"  : { type: "outside" },
                "buttons": { position: "top" },
                "thumbs" : { width: 80, height: 80 },
                "overlay": { locked: false}
            }
        });

        $('#<?php echo $galleryId; ?>').paginate({itemsPerPage: 10});
    });
</script>

Теперь  мы получим следующий результат

ihtr_200x0.jpg

 

ВНИМАНИЕ!!!

  • Будьте внимательны при замене файлов.
  • Проверьте с начало на тестовом сайте а уже потом загружайте на рабочий сайт.
  • Это решение(модификация) тестировалось на 
    Joomla: 3.3.3
    JBZoo: 2.1.5 Pro
    Zoo: 3.2.1,
  • Не забывайте - это решение(модификация) и при следующих обновлениях эти изменения могут пострадать.
  • При появлении проблем Тех.Поддержка ответственности не несет. 

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

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

#2 Na_uM

Na_uM

Отправлено 17 February 2015 - 11:37

что то не выходит

правда на 2.2.0 пробую

Fatal error: Call to a member function get() on a non-object in /media/zoo/applications/jbuniversal/elements/jbgallery/tmpl/jbgallery.php on line 21

  • 0

#3 Cheren-dow

Cheren-dow

Отправлено 17 February 2015 - 12:33

Na_uM, забыл дописать что нужно параметры в щаблон передать. Посмотрите 3 - й пункт


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

#4 Na_uM

Na_uM

Отправлено 17 February 2015 - 12:53

да, так все работает - ну это немного не то что хотелось бы, нет ни разбивки на страницы не иже с ним

да и в popup показывает все миниатюры...

для уменьшения занимаемого места - решение хорошее но для галереи...

Спасибо!


  • 0

#5 Cheren-dow

Cheren-dow

Отправлено 17 February 2015 - 13:15

Na_uM, по ищите аналогичные плагины и привяжите его к галереи по аналогии. Я всего лишь показал пример.


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

#6 netmannp

netmannp

Отправлено 08 March 2015 - 09:11

а есть ли решение "Пагинация" для модуля JBZoo Item ?


  • 0

#7 Cheren-dow

Cheren-dow

Отправлено 12 March 2015 - 10:30

netmannp, можете по аналогии с этим рецептом внедрить в модуль. Должно работать. 


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

#8 netmannp

netmannp

Отправлено 12 March 2015 - 10:46

попробую но мне кажется самому модулю JBZoo Item  явно не хватает в настройках возможности выводить элементы с пагинацией


  • 0

#9 Cheren-dow

Cheren-dow

Отправлено 12 March 2015 - 11:22

netmannp, думаю модель сам по себе не предназначен для вывода большого кол-ва материалов и что бы была еще навигация в нем.


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

#10 netmannp

netmannp

Отправлено 12 March 2015 - 12:36

netmannp, думаю модель сам по себе не предназначен для вывода большого кол-ва материалов и что бы была еще навигация в нем.

большое количество это сколько?(многое зависит от дизайна сайта)  какая есть альтернатива вывода по произвольному фильтру материалов? В голову приходит JBZoo Search но насколько я помню там нет возможности выводить с "пред заданными"  параметрами


  • 0





Темы с аналогичным тегами хак, элемент, jbgallery

Click to return to top of page in style!