Jump to content


Photo
- - - - -

JBImage - Быстрый просмотр(QuickView)

рецепт jbimage quick view jbzoo 2.0+

4 replies to this topic

#1 Cheren-dow

Cheren-dow
  • JBZoo User (rus)
  • User rate: 95.7
  • posts: 5060
  • topics: 31

Posted 06 March 2014 - 07:58

Помню, где то читал сообщение от i001 где он сделал предварительный просмотр по нажатию на изображение. Все вроде работает, но реализация "кривоватая" - потому что используются CSS(слои) и элемент JBQuickView. А ведь можно доработать элемент JBImage и управлять им из админки O0 .

 

 

 

-= 1. Добавляем параметр для выбора шаблона =-

Открываем файл

сайт\media\zoo\applications\jbuniversal\elements\jbimage\jbimage.xml

В список параметров template добавляем еще 1 значение

<param name="template" type="list" default="default" label="JBZOO_JBIMAGE_TEMPLATE"
       description="JBZOO_JBIMAGE_TEMPLATE_DESC">
    <option value="default">JBZOO_DEFAULT</option>
    <option value="link">JBZOO_LINK</option>
    <option value="itemlink">JBZOO_ITEM_LINK</option>
    <option value="popup">JBZOO_POPUP</option>
    <option value="quickview">Быстрый просмотр</option>
</param>

мы добавили следующую строку

<option value="quickview">Быстрый просмотр</option>

 

 

-= 2. Корректируем Render для нашего шаблона =-

Открываем файл

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

В методе _render находим проверку на шаблон itemlink - строка начинается с 

} elseif ($template == 'itemlink'){
....
}

Весь elseif меняем на 

} elseif ($template == 'itemlink' || $template == 'quickview') {
    if ($this->getItem()->getState()) {
        $url = JRoute::_($this->app->route->item($this->_item, false), false, 2);
        $title = empty($title) ? $this->getItem()->name : $title;
        if ($template == 'quickview') {
            $appendClass = 'jbimage-quickview';
            $url .= '?tmpl=component&amp;jbquickview=quickview';
        }
    }
}

Теперь передадим параметры в шаблон - Находим условие

// render layout
if ($image && $layout = $this->getLayout('jbimage-' . $template . '.php')) {
...
}

И меняем его на

if ($image && $layout = $this->getLayout('jbimage-' . $template . '.php')) {
    return $this->renderLayout($layout, array(
            'imageAttrs' => $this->_buildAttrs(array(
                'class'  => 'jbimage',
                'alt'    => $alt,
                'title'  => $title,
                'src'    => $image->url,
                'width'  => $image->width,
                'height' => $image->height,
            )),
            'linkAttrs'  => $this->_buildAttrs(array(
                'class'  => 'jbimage-link ' . $appendClass,
                'title'  => $title,
                'href'   => $url,
                'rel'    => $rel,
                'target' => $target,
                'id'     => uniqid('jbimage-link-'),
            )),
            'link'       => $url,
            'image'      => $image,
            'params'     => $params // передаем параметры
        )
    );
}

 

 

-= 3. Создание файла шаблона =-

В папке 

сайт\media\zoo\applications\jbuniversal\elements\jbimage\tmpl

создаем файл с именем jbimage-quickview.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');

echo '<a ' . $linkAttrs . '><img ' . $imageAttrs . ' /></a>';

$this->app->jbassets->addScript('jQuery(function($){
	$("a.jbimage-quickview").fancybox({
        type       : "iframe",
        fitToView  : true,
        width      : "' . $params->get('width_popup') . '",
        height     : "' . $params->get('height_popup') . '",
        iframe     : {
            preload   : true
        },
        closeClick : false,
        title      : null,
        helpers    : {
            overlay: { locked: false }
        }
    });
});');

Вот и все....

 

Переходим в админку в любой из шаблонов(full,teaser...) и настраиваем

ui0_200x0.png

 

 

 

ВНИМАНИЕ!!!

  • Будьте внимательны при замене файлов.
  • Проверьте с начало на тестовом сайте а уже потом загружайте на рабочий сайт.
  • Это решение(модификация) тестировалось на 
    Joomla: 3.1.5
    JBZoo: 2.1.2 Pro
    Zoo: 3.0.13,

    подойдут так же ранние версии начиная с v 2.0.X.
  • Не забывайте - это решение(модификация) и при следующих обновлениях эти изменения могут пострадать.
  • При появлении проблем Тех.Поддержка ответственности не несет. 

Attached File  jbimage_patch_for_quickview.zip   7.79KB   155 downloads


Edited by Cheren-dow, 06 March 2014 - 08:00.

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

#2 web

web
  • JBZoo User (rus)
  • User rate: 0
  • posts: 34
  • topics: 5

Posted 28 January 2015 - 11:00

Рецепт супер! Как раз очень надо было :) Но не работал попап. При подключении обычного квиквью все работало. 

Таким образом добавив строчку 

App::getInstance('zoo')->jbassets->jbimagePopup();

в jbimage-quickview.php имеем правильный вывод модального окна при нажатии на картинку. Теперь jbimage-quickview.php выглядит так

defined('_JEXEC') or die('Restricted access');

App::getInstance('zoo')->jbassets->jbimagePopup();

echo '<a ' . $linkAttrs . '><img ' . $imageAttrs . ' /></a>';

$this->app->jbassets->addScript('jQuery(function($){
	$("a.jbimage-quickview").fancybox({
        type       : "iframe",
        fitToView  : true,
        width      : "' . $params->get('width_popup') . '",
        height     : "' . $params->get('height_popup') . '",
        iframe     : {
            preload   : true
        },
        closeClick : false,
        title      : null,
        helpers    : {
            overlay: { locked: false }
        }
    });
});');


  • 0

#3 Cheren-dow

Cheren-dow
  • Topic Starter
  • JBZoo User (rus)
  • User rate: 95.7
  • posts: 5060
  • topics: 31

Posted 28 January 2015 - 12:36

App::getInstance('zoo')->jbassets->jbimagePopup();

лучше использовать

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


Edited by Cheren-dow, 28 January 2015 - 12:37.

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

#4 Михаил

Михаил
  • JBZoo User (rus)
  • User rate: 5.3
  • posts: 158
  • topics: 39

Posted 17 September 2015 - 15:20

Небольшая правка рецепта для версии JBZoo 220 v
 
-= 1. Добавляем параметр для выбора шаблона =-

 

Открываем файл

сайт\media\zoo\applications\jbuniversal\elements\jbimage\jbimage.xml

В список параметров template добавляем еще 1 значение

<param name="template" type="list" default="default" label="JBZOO_JBIMAGE_TEMPLATE"
description="JBZOO_JBIMAGE_TEMPLATE_DESC">
<option value="default">JBZOO_DEFAULT</option>
<option value="link">JBZOO_LINK</option>
<option value="itemlink">JBZOO_ITEM_LINK</option>
<option value="popup">JBZOO_POPUP</option>
<option value="quickview">Быстрый просмотр</option>
</param>

 
Мы добавили следующую строку

<option value="quickview">Быстрый просмотр</option>

 
-= 2. Корректируем Render для нашего шаблона =-

 

Открываем файл

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

В методе _render находим проверку на шаблон itemlink - строка начинается с 

} elseif ($template == 'itemlink'){
....
}

 
Весь elseif меняем на 

} elseif ($template == 'itemlink' || $template == 'quickview') {
            if ($this->getItem()->getState()) {
                $url = $this->_getParamsLink($layout);
                $title = empty($title) ? $this->getItem()->name : $title;
                if ($template == 'quickview') {
                    $appendClass = 'quickview jsQuickView';
                }
            }
        }

 
Теперь передадим параметры в шаблон - Находим условие 

// render layout
if ($image && $layout = $this->getLayout('jbimage-' . $template . '.php')) {
...
}

 
И меняем его на

        // render layout
        if ($image && $layout = $this->getLayout('jbimage-' . $template . '.php')) {
            return $this->renderLayout($layout, array(
                    'imageAttrs' => $this->_buildAttrs(array(
                        'class'  => 'jbimage',
                        'alt'    => $alt,
                        'title'  => $title,
                        'src'    => $image->url,
                        'width'  => $image->width,
                        'height' => $image->height,
                    )),
                    'linkAttrs'  => $this->_buildAttrs(array(
                        'class'  => 'jbimage-link ' . $appendClass,
                        'title'  => $title,
                        'href'   => $url,
                        'rel'    => 'nofollow',
                        'target' => $target,
                    )),
                    'link'       => $url,
                    'image'      => $image,
                    'params'     => $params // передаем параметры
                )
            );
        }

 
Также ищем где заканчивается метод _render и после него вставляем

protected function _getParamsLink($layout = 'quickview')
    {
        $itemLink = $this->app->route->item($this->_item);

        return $this->app->jbrouter->addParamsToUrl($itemLink, array(
            'tmpl'        => 'component',
            'jbquickview' => 'quickview',
            'modal'       => 1
        ));
    }

 
-= 3. Создание файла шаблона =-

 

В папке

сайт\media\zoo\applications\jbuniversal\elements\jbimage\tmpl

 
создаем файл с именем jbimage-quickview.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');

$uniqId = $this->app->jbstring->getId('quickview');

echo $this->app->jbassets->widget('#' . $uniqId, 'fancybox', array(
            'type'       => "iframe",
            'fitToView'  => false,
            'width'      => '900', //ширина окна
            'height'     => '450', //высота окна
            'autoSize'   => false, //авторазмер
            'iframe'     => array(
                'scrolling' => no, //прокрутка
                'preload'   => true,
            ),
            'closeClick' => false,
            'title'      => false,
            'helpers'    => array(
                'overlay' => array(
                    'locked' => true,
                )
            ),
        ), true);

echo '<a id="' . $uniqId . '"' . $linkAttrs . '><img ' . $imageAttrs . ' /></a>';

 
Вот и собственно все.

 
ВНИМАНИЕ!!!

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

Edited by Михаил, 17 September 2015 - 15:23.

  • 3

#5 Ильнар

Ильнар
  • JBZoo User (rus)
  • User rate: 0.4
  • posts: 39
  • topics: 15

Posted 31 January 2016 - 17:03

Небольшая правка рецепта для версии JBZoo 220 v

 

на Joomla: 3.4.8 JBZoo: 2.2.4 Pro rev3086 Zoo: 3.3.14

 

Не работает при клике на фото выходит всплывала с содержимом:

"The requested content cannot be loaded. Please try again later."


  • 0





Click to return to top of page in style!