Cloud Zoom - jQuery плагин который создает эффект лупы для изображений. Во многих интернет магазинах кто то уже видел что то подобное, а сейчас мы сделаем интеграцию Cloud Zoom jQuery Plugin с элементом JBImage.
1. Скачиваем плагин Cloud Zoom и раскладываем файлы по папкам
Так как последние версии этого плагина платные мы будем использовать более раннюю версию (1.0.2) и она ни чем не хуже.
Скачиваем архив с файлами.
cloud-zoom.zip 7.12KB
380 downloads
В архиве находятся 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.91KB
336 downloads
Распаковать в корень сайта с заменой файлов.
ВНИМАНИЕ!!!
- Будьте внимательны при замене файлов.
- Проверьте с начало на тестовом сайте а уже потом загружайте на рабочий сайт.
- Хак тестировался на JBZoo 2.0.2, подойдут так же ранние версии начиная с v 2.0.X.
- Не забывайте - это хак и при следующих обновлениях эти изменения могут пострадать.
- При появлении проблем Тех.Поддержка ответственности не несет.
Edited by Cheren-dow, 25 September 2013 - 07:56.
Answered
