→ При разработке сайта лендинг в подарок! ЖМИ! ←
Апр
12

Прикручиваем Fancybox к DJ-Catalog

http://ridel.ru/ .

Продолжаем серию статей по расширению функционала компонента Джумлы DJ-Catalog. Не буду в Н-ный раз описывать что это за каталог, это можно почитать на сайте разработчика. Ранее я уже писал о том, как добавить дополнительные поля в каталог товаров, сегодня же посвятим статью прикручиванию fancybox к этому каталогу.

Для этого нам понадобится: библиотека fancybox (скачать можно здесь), немного свободного времени и ровные руки.

Для начала заливаем либку в папку js нашего шаблона Джумлы. У вас папка может быть другой, тогда подправите пути к нужным файлам. Подключаем нужные файлы в head шаблона.

1
2
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/js/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/js/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />

Оживляем библиотеку

1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript">
$(window).load(function() {
        $("a.group").fancybox({
        'transitionIn'  :   'elastic',
        'transitionOut' :   'elastic',
        'speedIn'       :   600,
        'speedOut'      :   200,
        'overlayShow'   :   true
    });

});
</script>

Теперь редактируем файл вывода отдельного товара components/com_djcatalog/views/item/tmpl/default.php. Сразу сделаем, чтобы выводилась галерея картинок. К примеру, если вы продаете джинсы оптом, то будет замечательно на одну товарную позицию загрузить несколько картинок, чтобы пользователь мог просмотреть все цветовые вариации в виде галереи без лишних кликов на картинки.

Правим строки 40-51. Я приведу свой кусок кода, в котором уже внесены правки

1
2
3
4
5
6
7
8
9
10
11
12
<?php if ($item->images = $this->images->getImages($item->image_url)) { ?>
            <div class="djcat_image" style="width: <?php echo $this->params->get('th_width'); ?>px;">
                <a class="group" rel="group1" title="<?php echo $item->name?>" href="<?php echo $item->images[0]['original']?>"><img alt="<?php echo $item-/>name; ?>" src="<?php echo $item->images[0]['medium']; ?>"/></a>
                <?php if (count($item->images) > 1) {?>
                    <div class="djcat_thumbnails">
                        <?php for($i = 1; $i < count($item->images); $i++) {?>
                            <a class="group" rel="group1" title="<?php echo $item->name?>" href="<?php echo $item->images[$i]['original']?>"><img alt="<?php echo $item-/>name; ?>" src="<?php echo $item->images[$i]['small']; ?>" style="width: <?php echo ($this->params->get('smallth_width') - 4); ?>px; margin-left: 2px; margin-right: 2px;"/></a>
                        <?php } ?>
                    </div>
                    <?php } ?>
            </div>
        <?php } ?>

Обратите внимание, что здесь на ссылки указан класс group и rel group1. Имя класса связывает ссылку с фансибоксом, а параметр rel говорит, что мы картинки группируем для создания галереи.

И убираем подключение встроенного слимбокса в файле components/com_djcatalog/controller.php (комментим строки 84-93)

1
2
3
4
5
6
7
8
9
10
// include SlimBox
        /*
            Slimbox v1.58 - The ultimate lightweight Lightbox clone
            (c) 2007-2009 Christophe Beyls <http: //www.digitalia.be>
            MIT-style license.
        */

        //$slimboxJs = JURI::base().'components/com_djcatalog/theme/js/slimbox-1.58/js/slimbox.js';
        //$slimboxCss = JURI::base().'components/com_djcatalog/theme/js/slimbox-1.58/css/slimbox.css';
        //$document->addScript($slimboxJs);
        //$document->addStyleSheet($slimboxCss);

Всё, готово! Теперь будет DJ-Catalog работать с модной библиотекой Fancybox.

Прокомментировать

Рубрики

Наши услуги

В прямом эфире