В предыдущем рецепте 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=""/>
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">« Previous</a>
<a id="<?php echo $galleryId; ?>-next" href="#">Next »</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>
Теперь мы получим следующий результат
ВНИМАНИЕ!!!
- Будьте внимательны при замене файлов.
- Проверьте с начало на тестовом сайте а уже потом загружайте на рабочий сайт.
- Это решение(модификация) тестировалось на
Joomla: 3.3.3
JBZoo: 2.1.5 Pro
Zoo: 3.2.1, - Не забывайте - это решение(модификация) и при следующих обновлениях эти изменения могут пострадать.
- При появлении проблем Тех.Поддержка ответственности не несет.
Edited by Cheren-dow, 17 February 2015 - 12:32.
Answered
