У меня тут еще одно рабочее решение получилось, может кому пригодится.
Заказчик захотел эффект как на сайте loverepublic.ru
Вот собственно пример - https://loverepublic...tya/129222/#50
При наведении на картинку эффект cloud zoom.
Я сохранил страницу на комп и разобрал её по косточкам. За эффект отвечают 4 файла.
script.js
jquery-1.11.1.min.js
core.js
cloud-zoom.3.0.0.js
Собственно с самого сайта я их и позаимствовал.
Дальше нужна правильная html верстка.
Выглядит она так.
<figure>
<img src="(фото видимое на сайте)" alt="" width="667" height="1000" id="zoom-126441-70" class="cloudzoom" data-cloudzoom="zoomImage: '(ссылка на фото большого размера)'"/>
</figure>
У меня эффект нужен был только в шаблоне full поэтому я положил файлы а папку шаблона - js , и подключил их в шаблоне full.php
<script src="/templates/jblank/js/core.js" type="text/javascript"></script>
<script src="/templates/jblank/js/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="/templates/jblank/js/script.js" type="text/javascript"></script>
<script src="/templates/jblank/js/cloud-zoom.3.0.0.js" type="text/javascript"></script>
Именно в таком порядке !!! И обязательно подключать в КОНЦЕ full.php.
Затем в папке "media\zoo\applications\jbuniversal\elements\jbimage\tmpl" я создал файл "jbimage-cloudzoom.php"
вот его код:
<?php
defined('_JEXEC') or die('Restricted access');
if (substr_count($imageAttrs, "full")>0) {
$url = JUri::root();
$Origimage=$url.'/images/katalog/'.substr(strrchr($image->orig, "\\"), 1);
//$Origimage=$url.'images/katalog/'.substr(strrchr($image->orig, "/"), 1);
$Currentimage=$image->url;
$CurrentWidth=$image->width;
$CurrentHeight=$image->height;
echo '<figure> <img src="' . $Currentimage. '" ' . 'alt="lalalal" width="'. $CurrentWidth .'" height="' . $CurrentHeight . '" id="zoom-126441-70" class="cloudzoom" data-cloudzoom="zoomImage: \'' . $Origimage. '\'"/></figure>';
}else{
echo '<img ' . $imageAttrs . '/>';
}
В папке "/images/katalog/" лежат мои фото с большим разрешением.
Строки :
$Origimage=$url.'/images/katalog/'.substr(strrchr($image->orig, "\\"), 1);
//$Origimage=$url.'images/katalog/'.substr(strrchr($image->orig, "/"), 1);
Работают либо на локальном хосте, либо на реальном хостинге, по необходимости комментируется либо та, либо другая.
Далее я изменил "jbimage.xml" добавив
-<param type="list" description="JBZOO_JBIMAGE_TEMPLATE_DESC" label="JBZOO_JBIMAGE_TEMPLATE" default="default" name="template">
<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="cloudzoom">JBZOO_CLOUDZOOM</option>
</param>
Добавил я параметр <option value="cloudzoom">JBZOO_CLOUDZOOM</option>, соответственно JBZOO_CLOUDZOOM я внес в языковые файлы.
JBZOO_CLOUDZOOM = "CloudZoom эффект"
Далее я изменил "jbimage.php"
Добавил
} elseif ($template == 'cloudzoom') {
if ($this->getItem()->getState()) {
$url = $this->app->jbrouter->externalItem($this->_item);
$title = empty($title) ? $this->getItem()->name : $title;
}
Это прописало новый темплейт для элемента jbimage.
В общем с кодом - все. Далее в шаблоне Full, я добавил JBZoo Image и в шаблоне выбрал - "CloudZoom эффект"
И вуаля - эффект заработал.
Возможно это не самый элегантный способ и тут есть что еще изменить, но он работает.
Файлы я прикреплю к посту
Сообщение отредактировал Sandmansss: 15 January 2018 - 14:53