Jump to content


Photo
* * * * * 2 votes

Шаблон Cloud Zoom для элемента JBImage

рецепт cloud zoom jbimage

67 replies to this topic

#61 Sliapy

Sliapy
  • JBZoo User (rus)
  • User rate: 50.5
  • posts: 6393
  • topics: 15

Posted 07 February 2014 - 14:56

Честно говоря, например я без понятия, что еще Вам тут можно подсказать. Рецепт рабочий - это Вам сказал и автор, и проблемы, как видно из  темы, возникли только у Вас.

 

Проверяйте все ли Вы сделали правильно - больше тут посоветовать нечего. Рецепт, на то и рецепт - это не часть JBZoo и не всем он подойдет/не все его смогут установить. К тех.поддержке JBZoo это никак не относится.


Edited by Sliapy, 07 February 2014 - 14:57.

  • 0
[color=#aa0000]Не забывайте нажимать кнопку "Вопрос Решён" под сообщением, которое решило Вашу проблему.[/color]

#62 Александр

Александр
  • JBZoo User (rus)
  • User rate: 0
  • posts: 162
  • topics: 46

Posted 07 February 2014 - 15:01

Честно говоря, например я без понятия, что еще Вам тут можно подсказать. Рецепт рабочий - это Вам сказал и автор, и проблемы, как видно из  темы, возникли только у Вас.

 

Проверяйте все ли Вы сделали правильно - больше тут посоветовать нечего. Рецепт, на то и рецепт - это не часть JBZoo и не всем он подойдет/не все его смогут установить. К тех.поддержке JBZoo это никак не относится.

Вас понял, спасибо буду пробовать решить проблему.  


  • 0

#63 garri

garri
  • JBZoo User (rus)
  • User rate: ~
  • posts: 4
  • topics: 1

Posted 29 March 2014 - 12:32

спасибо за Вашу работу, установил, все в работает, но есть одно но, всплывающее меню, галерея при активации находится под картинкой, а как сделать что бы было наоборот. вот пример, надеюсь поймете о чем я - http://prokatik.com/...er-price-zhiraf


Edited by garri, 29 March 2014 - 12:32.

  • 0

#64 Cheren-dow

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

Posted 29 March 2014 - 13:18

garri, попробуйте добавить следующий css стиль в шаблон сайта

.jbzoo #wrap {
z-index: 100 !important;
}

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

#65 garri

garri
  • JBZoo User (rus)
  • User rate: ~
  • posts: 4
  • topics: 1

Posted 29 March 2014 - 13:32

 

garri, попробуйте добавить следующий css стиль в шаблон сайта



.jbzoo #wrap {
z-index: 100 !important;
}

помогло, спасибо, добавил в jbzoo.css


  • 0

#66 registr

registr
  • JBZoo User (rus)
  • User rate: 0
  • posts: 1210
  • topics: 345

Posted 18 February 2015 - 17:22

скажите, а можно сделать например готовый элемент с этим функционалом и одновременно с этим: http://forum.jbzoo.c...smotrquickview/

а то не особо разбираясь в кодах я лично наверняка запутаюсь:) а неплохо было бы иметь такой элемент где есть выбор и лупы и функции быстрого просмотра

Есть еще элемент JBZOOM, всем хорош но не выводится на странице оформления заказа и в CSV файлике так что идеально быдло бы в стандартном элементе все осуществить


  • 0

#67 Sandmansss

Sandmansss
  • JBZoo User (rus)
  • User rate: 1.5
  • posts: 111
  • topics: 26

Posted 15 January 2018 - 14:44

У меня тут еще одно рабочее решение получилось, может кому пригодится.

Заказчик захотел эффект как на сайте 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 эффект"

И вуаля - эффект заработал.

 

Возможно это не самый элегантный способ и тут есть что еще изменить, но он работает. 

Файлы я прикреплю к посту 

Attached Files


Edited by Sandmansss, 15 January 2018 - 14:53.

  • 3

#68 mr.varhola

mr.varhola
  • JBZoo User (rus)
  • User rate: 1.9
  • posts: 514
  • topics: 116

Posted 02 March 2018 - 18:51

Уважаемый Cheren-dow спасибо вам за проделанный труд!

Только ваше решение смог связать вместе со slick slider в спаренном виде: http://joxi.ru/p274nepC0PLjXA

 

У меня один вопрос:

Возможно ли сделать приближение/отдаление картинки при прокручивании колесика мышки как показано сейчас в примерах свежего плагина CloudZoom ?

 

Пример того о чем я говорю можно посмотреть тут: http://www.starplugi...udzoom/examples

наведите на любую картинку и покрутите колесико мышки.

 

P.S. пытался к вашему решению прикрутить свежий плагин этого зума но ничего не вышло.


  • 0





Also tagged with one or more of these keywords: рецепт, cloud zoom, jbimage

Click to return to top of page in style!