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

[Cheren-dow]

Cloud Zoom - jQuery плагин который создает эффект лупы для изображений. Во многих интернет магазинах кто то уже видел что то подобное, а сейчас мы сделаем интеграцию Cloud  Zoom jQuery Plugin с элементом JBImage.
 
1. Скачиваем плагин Cloud Zoom и раскладываем файлы по папкам
Так как последние версии этого плагина платные мы будем использовать более раннюю версию (1.0.2) и она ни чем не хуже.
Скачиваем архив с файлами.  cloud-zoom.zip   7.12К   400 Количество загрузок:
 
В архиве находятся 2 js файла и файл css стилей. Из них нам потребуются:

• cloud-zoom.1.0.2.js
• cloud-zoom.css

Распаковываем архив в папку.
 
Т.к мы будем следовать логике JBZoo давайте переименуем файлы следующим образом:

• cloud-zoom.1.0.2.js в jquery.cloud-zoom.js
• cloud-zoom.css в jbzoo.cloud-zoom.css

Теперь переместим jquery.cloud-zoom.js в папку

сайт\media\zoo\applications\jbuniversal\assets\js\

а jbzoo.cloud-zoom.css в

сайт\media\zoo\applications\jbuniversal\assets\css\

Файлы в нужных местах.
 
 
 
2. Создаем шаблон для Cloud Zoom в файле jbimage.xml
Переходим в папку и открываем фал jbimage.xml

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

Находим блок параметров template

<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>
 </param>

и добавляем option

<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="cloud">JBZOO_CLOUD_ZOOOM</option>
</param>

Теперь добавим константу JBZOO_CLOUD_ZOOOM в файл русской локализации. Открываем файл ru-RU.ini

сайт\media\zoo\applications\jbuniversal\language\ru-RU\ru-RU.com_jbzoo.ini

И в самом низу добавляем строку

JBZOO_CLOUD_ZOOOM = "Cloud Zoom"

Перейдем в тип, например шаблон FULL и в элементе jbimage выберем только что созданный шаблон Cloud Zoom.

Сохраняем.
 
 
 
3. Вывод шаблона Cloud для нашего изображения
Первым делом переходим в папку 

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

и создаем фал jbimage-cloud.php - этот файл будет шаблоном.
 
Теперь нужно добавить немного кода в функции _render в файле:

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

Нам нужен последний elseif - конкретно этот:

} elseif ($template == 'popup') {
 
	$appendClass = 'jbimage-gallery';
	if ((int)$params->get('group_popup', 1)) {
		$rel = 'jbimage-gallery-' . $this->getItem()->id;
	}
 
	$target      = '_blank';
	$widthPopup  = (int)$params->get('width_popup', 0);
	$heightPopup = (int)$params->get('height_popup', 0);
 
	if ($image) {
		$url = $this->_jbimage->getUrl($this->get('file'));
		if ($widthPopup || $heightPopup) {
			$newImg = $this->_jbimage->resize($image->orig, $widthPopup, $heightPopup);
			$url    = $newImg->url;
		}
	}
}

После этой проверки добавляем ещё одну. Должно быть так:

} elseif ($template == 'popup') {
 
	$appendClass = 'jbimage-gallery';
	if ((int)$params->get('group_popup', 1)) {
		$rel = 'jbimage-gallery-' . $this->getItem()->id;
	}
 
	$target      = '_blank';
	$widthPopup  = (int)$params->get('width_popup', 0);
	$heightPopup = (int)$params->get('height_popup', 0);
 
	if ($image) {
		$url = $this->_jbimage->getUrl($this->get('file'));
		if ($widthPopup || $heightPopup) {
			$newImg = $this->_jbimage->resize($image->orig, $widthPopup, $heightPopup);
			$url    = $newImg->url;
		}
	}
} elseif($template == 'cloud'){ // если выбранный шаблон есть наш cloud
 
	$appendClass = 'cloud-zoom'; // устанавливаем необходимы class
/**
*       $rel - это атрибут rel для ссылки которая ссылается на большое изображение.
*       Именно в нем будут находится все настройки для плагина.
*       Чуть ниже в статье мы сделаем 3 основных параметра(настройки)
*       для нашего шаблона которыми будем управлять из админки. А пока оставим так. 
*       Обо всех параметрах в атрибуте rel будет написано ниже.
*/
	$rel = 'adjustX: 10 , adjustY: -4, softFocus: true';
 
	$target      = '_blank';
	$widthPopup  = (int)$params->get('width_popup', 0);
	$heightPopup = (int)$params->get('height_popup', 0);
 
	if ($image) {
		$url = $this->_jbimage->getUrl($this->get('file'));
		if ($widthPopup || $heightPopup) {
			$newImg = $this->_jbimage->resize($image->orig, $widthPopup, $heightPopup);
			$url    = $newImg->url;
		}
	}
}

Сохраним файл.
 
Теперь открываем недавно созданный шаблон(вид) - это файл jbimage-cloud.php находится по адресу:

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

И вставляем в него следующие строки:

defined('_JEXEC') or die('Restricted access');
 
echo '<a ' . $linkAttrs . '><img ' . $imageAttrs . ' /></a> ' . "\n";

Сохраним и посмотрим на сайте что  у нас получилось. Сейчас видно что наш шаблон cloud для JBImage работает. 

Но ни какой "лупы" мы не наблюдаем. Все потому что мы не подключили jquery.cloud-zoom.js и jbzoo.cloud-zoom.css.
 
 
 
4. Подключаем jquery.cloud-zoom.js и jbzoo.cloud-zoom.css
Эти файлы можно на прямую подключить в файле:

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

Но так как мы придерживаемся логике JBZoo мы сделаем немножко по другому.
 
Открываем файл jbassets.php. Он располагается тут:

сайт\media\zoo\applications\jbuniversal\framework\helpers\jbassets.php

Добавляем следующий код(функцию подключения файлов) где нибудь после функции public function fancybox() (не принципиально)

/**
* Include Cloud Zoom
*/
public function cloudzoom(){
	$this->jQuery();
	$this->_include(array('jbassets:css/libraries.css'), 'css');
	$this->_include(array('jbassets:js/jquery.cloud-zoom.js',), 'js');
}

public function jbimageCloudZoom(){
    $this->jQuery();
    $this->cloudzoom();
}

Сохраняем. Переходим на страницу сайта с изображением, обновим и опять ничего не работает. А не работает потому что не вызвали функцию jbimageCloudZoom в файле шаблона(вида) jbimage-cloud.php. Перейдем в файл jbimage-cloud.php и вызовем эту функцию. Теперь файл должен иметь следующий вид:

<?php
defined('_JEXEC') or die('Restricted access');
/**
* Подключаем css и js файлы
*/
App::getInstance('zoo')->jbassets->jbimageCloudZoom();
 
echo '<a ' . $linkAttrs . '><img ' . $imageAttrs . ' /></a> ' . "\n";

Теперь "Лупа" должна работать. Проверяем и видим:

 
Все работает.
 
 
 
5. Совершенствуем 
Сейчас добавим несколько параметров для управления элементом из админ панели.
1. Открываем файл локализации:

сайт\media\zoo\applications\jbuniversal\language\ru-RU\ru-RU.com_jbzoo.ini

Добавляем вниз:

JBZOO_RESIZE_CLOUD_X = "Положение по X"
JBZOO_RESIZE_CLOUD_X_DESCRIPTION = "Позволяет точно установить положение окна в px большого изображение по оси Х"
JBZOO_RESIZE_CLOUD_Y = "Положение по Y"
JBZOO_RESIZE_CLOUD_Y_DESCRIPTION = "Позволяет точно установить положение окна в px большого изображение по оси Y"
JBZOO_JBIMAGE_CLOUD_POSITION = "Позиция"
JBZOO_JBIMAGE_CLOUD_POSITION_DESCRIPTION = "Определяет положение окна большого изображения по отношению к уменьшенной копии. Возможные занчения: 'left', 'right', 'top', 'bottom', 'inside' или можно задать ID элемента HTML, например, position: 'element1'"
JBZOO_JBIMAGE_CLOUD_LEFT = "Слева"
JBZOO_JBIMAGE_CLOUD_RIGHT = "Справа"
JBZOO_JBIMAGE_CLOUD_TOP = "Сверху"
JBZOO_JBIMAGE_CLOUD_BOTTOM = "Снизу"
JBZOO_JBIMAGE_CLOUD_INSIDE = "Внутри"
JBZOO_RESIZE_CLOUD_TITLE = "Показать заголовок"
JBZOO_RESIZE_CLOUD_TITLE_DESCRIPTION = "Выводить содержание тега title. True или false."

2. Открываем файл jbimage.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       Denis Smetannikov <denis@jbzoo.com>
-->
<element type="jbimage" group="JBZoo">
    <name>JBZoo Image</name>
    <description>JBZoo image element</description>
    <author>JBZoo.com</author>
    <creationDate>2013 07</creationDate>
    <copyright>Copyright (C) JBZoo.com,  All rights reserved.</copyright>
    <authorEmail>admin@jbzoo.com</authorEmail>
    <authorUrl>http://jbzoo.com</authorUrl>
    <version>1.0</version>
    <params>
        <param name="upload_directory" type="text" default="images/uploads/" label="JBZOO_UPLOAD_DIRECTORY"
               description="JBZOO_UPLOAD_DIRECTORY_DESC"/>
 
        <param name="max_upload_size" type="text" default="512" label="JBZOO_MAX_UPLOAD_SIZE"
               description="JBZOO_MAX_UPLOAD_SIZE_DESC"/>
 
        <param name="upload_by_user" type="jbbool" default="0" label="JBZOO_JBIMAGE_UPLOAD_BY_USER"
               description="JBZOO_JBIMAGE_UPLOAD_BY_USER_DESC"/>
 
        <param name="default_enable" type="jbbool" default="0" label="JBZOO_JBIMAGE_DEFAULT_ENABLE"
               description="JBZOO_JBIMAGE_DEFAULT_ENABLE_DESC"/>
 
        <param name="default_image" type="text" default="" label="JBZOO_JBIMAGE_DEFAULT"
               description="JBZOO_JBIMAGE_DEFAULT_DESC"/>
 
    </params>
    <params group="render">
        <param name="separated_by" type="zoolist" default="Space" label="Separated by"
               description="CHOOSE_SEPARATOR_REPEATED_ELEMENTS">
            <option name="Space"><![CDATA[separator=[ ]]]></option>
            <option name="Break"><![CDATA[separator=[<br />]]]></option>
            <option name="Span"><![CDATA[tag=[<span>%s</span>]]]></option>
            <option name="Paragraph"><![CDATA[tag=[<p>%s</p>]]]></option>
            <option name="Div"><![CDATA[tag=[<div>%s</div>]]]></option>
            <option name="List Item"><![CDATA[tag=[<li>%s</li>]]]></option>
            <option name="Unordered List"><![CDATA[tag=[<li>%s</li>] enclosing_tag=[<ul>%s</ul>]]]></option>
            <option name="Ordered List"><![CDATA[tag=[<li>%s</li>] enclosing_tag=[<ol>%s</ol>]]]></option>
            <option name="Warp Item"><![CDATA[tag=[<article class="item">%s</article>]]]></option>
        </param>
 
        <param name="display" type="list" default="all" label="Display"
               description="CHOOSE_RENDERING_MODE_ELEMENT_POSITION">
            <option value="all">all</option>
            <option value="first">first</option>
            <option value="all_without_first">all without first</option>
        </param>
 
        <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="cloud">JBZOO_CLOUD_ZOOOM</option>
        </param>
 
        <param name="group_popup" type="jbbool" default="1" label="JBZOO_GROUP_POPUP"
               description="JBZOO_GROUP_POPUP_DESC"/>
 
        <param name="width" type="text" default="400" label="JBZOO_RESIZE_WIDTH"
               description="JBZOO_RESIZE_WIDTH_DESC"/>
 
        <param name="height" type="text" default="300" label="JBZOO_RESIZE_HEIGHT"
               description="JBZOO_RESIZE_WIDTH_DESC"/>
 
        <param name="@advanced_label" type="jbspacer" default="JBZOO_JBPRICE_FOR_POPUP_TEMPLATE"/>
 
        <param name="width_popup" type="text" default="1280" label="JBZOO_RESIZE_POPUP_WIDTH"
               description="JBZOO_RESIZE_WIDTH_POPUP_DESC"/>
 
        <param name="height_popup" type="text" default="800" label="JBZOO_RESIZE_POPUP_HEIGHT"
               description="JBZOO_RESIZE_WIDTH_POPUP_DESC"/>
 
        <param name="@advanced_label2" type="jbspacer" default="JBZOO_JBPRICE_FOR_CLOUD_ZOOM_TEMPLATE"/>
 
        <param name="cloud_width" type="text" default="400" label="JBZOO_RESIZE_WIDTH"
               description="JBZOO_RESIZE_WIDTH_DESC"/>
 
        <param name="cloud_height" type="text" default="300" label="JBZOO_RESIZE_HEIGHT"
               description="JBZOO_RESIZE_WIDTH_DESC"/>
 
        <param name="show_cloud_title" type="radio" default="1" label="JBZOO_RESIZE_CLOUD_TITLE"
               description="JBZOO_RESIZE_CLOUD_TITLE_DESCRIPTION">
            <option value="0">JNO</option>
            <option value="1">JYES</option>
        </param>
 
        <param name="x_cloud" type="text" default="10" label="JBZOO_RESIZE_CLOUD_X"
               description="JBZOO_RESIZE_CLOUD_X_DESCRIPTION"/>
 
        <param name="y_cloud" type="text" default="-4" label="JBZOO_RESIZE_CLOUD_Y"
               description="JBZOO_RESIZE_CLOUD_Y_DESCRIPTION"/>
 
        <param name="cloud_position" type="list" default="default" label="JBZOO_JBIMAGE_CLOUD_POSITION"
               description="JBZOO_JBIMAGE_CLOUD_POSITION_DESCRIPTION">
            <option value="left">JBZOO_JBIMAGE_CLOUD_LEFT</option>
            <option value="right">JBZOO_JBIMAGE_CLOUD_RIGHT</option>
            <option value="top">JBZOO_JBIMAGE_CLOUD_TOP</option>
            <option value="bottom">JBZOO_JBIMAGE_CLOUD_BOTTOM</option>
            <option value="inside">JBZOO_JBIMAGE_CLOUD_INSIDE</option>
        </param>
 
    </params>
</element>
 

Были добавлены параметры, увидеть разницу с начальным вариантом не составит труда.
 
3. Открываем файл:

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

и ищем наше условие elseif($template == 'cloud'). Тут у нас есть переменная $rel замените ее на следующею строку:

 $rel = 'position:\''.$params->get('cloud_position', 'right').'\' , zoomWidth: '.$params->get('cloud_width', 400).' , zoomHeight: '.$params->get('cloud_height', 300).' , showTitle: '.$params->get('show_cloud_title', 1).', adjustX: '.$params->get('x_cloud', 10).' , adjustY: '.$params->get('y_cloud', -4).', softFocus: true';

Тут мы принимаем и выводим установленные значения. 
 
Теперь перейдем в админку и посмотрим что у нам появилось в настройках элемента.

 
Как видите настройки разделены на 2 "блока" и элемент дополнился дополнительными настройками для Cloud Zoom. Это основные параметры плагина, а если кому то нужно больше(из всех возможных в плагине) вы можете добавить свои параметры по аналогии.
 
Для самых ленивых прикрепляю архив со всеми изменениями.  jbimage+cloud_zoom.zip   16.91К   355 Количество загрузок:
Распаковать в корень сайта с заменой файлов.
 
ВНИМАНИЕ!!!

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

Сообщение отредактировал Cheren-dow: 25 September 2013 - 07:56

[xatberg]

Респект за проделанную работу! побольше бы людей которые делятся наработками

 

Кто воспользовался ленивым вариантом из файла 

<?php
defined('_JEXEC') or die('Restricted access');
 
App::getInstance('zoo')->jbassets->jbimageCloudZoom();     <---- надо удалить
 
echo '<a ' . $linkAttrs . '><img ' . $imageAttrs . ' /></a> ' . "\n";
 

я не стал подключать через jbassets.php так как  были ошибки 

[Cheren-dow]

европа Что за ошибки? 

[xatberg]

Cheren-dow сказал(а) 25 Сен 2013 - 12:30:

европа Что за ошибки? 

если пользоватся quickwiev то там слетает шаблон тизера и фулла из за

<?php $this->app->jbassets->jbzooLinks();?>

[ilham76]

Спасибо огромное за труды! сделал всё ручками всё замечательно работало) потом дошёл до пункта 

5. Совершенствуем

 

и в админке пошла белиберда.....дошёл до конца поста и увидел что были файлики для ленивых))) залил их....теперь ошибок нет но и не работает + страница поехала...табы исчезли и всё такое. разбираюсь.

[Cheren-dow]

ilham76 сказал(а) 25 Сен 2013 - 12:43:

Спасибо огромное за труды! сделал всё ручками всё замечательно работало) потом дошёл до пункта 

5. Совершенствуем

 

и в админке пошла белиберда.....дошёл до конца поста и увидел что были файлики для ленивых))) залил их....теперь ошибок нет но и не работает + страница поехала...табы исчезли и всё такое. разбираюсь.

 

По внимательнее - ошибок не должно быть все проверял сам делал)))) Что там в админке за белеберда? Несколько параметров добавили и все. И приняли их в шаблоне. 

 

 

.....странная сказка...)

Сообщение отредактировал Cheren-dow: 25 September 2013 - 13:55

[ilham76]

с админкой разобрался, сорри, мой косяк. такая ситуация сейчас. если все файлы залиты на сайт то не работает, и на карточке товара исчезают табы, фильтр смещается. Правлю файл jbimage.php до 5 пункта (Совершенствуем) и всё работает...заливаю обратно из топика этот файлик и сразу перестаёт....что может быть не так? получается после

3. Открываем файл:
сайт\media\zoo\applications\jbuniversal\elements\jbimage\jbimage.php
и ищем наше условие elseif($template == 'cloud'). Тут у нас есть переменная $rel замените ее на следующею строку:

у меня всё ломается

[xatberg]

ilham76

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

из файла  

media\zoo\applications\jbuniversal\elements\jbimage\tmpl\jbimage-cloud.php

попробуй удалить

[Cheren-dow]

Попробуйте параметры по одному добавлять и посмотрите в чем дело

[ilham76]

европа сказал(а) 25 Сен 2013 - 13:30:

попробуй удалить

если удаляю то отображение карточки товара исправляется, но лупы нет. возвращаю обратно удалённую строчку.

 в коде

 $rel = 'position:\''.$params->get('cloud_position', 'right').'\' , zoomWidth: '.$params->get('cloud_width', 400).' , zoomHeight: '.$params->get('cloud_height', 300).' , showTitle: '.$params->get('show_cloud_title', 1).', adjustX: '.$params->get('x_cloud', 10).' , adjustY: '.$params->get('y_cloud', -4).', softFocus: true';

меняю обратно на

$rel = 'adjustX: 10 , adjustY: -4, softFocus: true';

и карточка товара как обычно и лупа появилась. но я так понял из админки теперь не управляется...