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