Эффекты увеличения (лупа: cloud-zoom и zoomer) изображения товара

maxituning

Осваиваюсь на форуме
17
0 / 0

Re: Эффекты увеличения (лупа: cloud-zoom и zoomer) изображения товара

« Ответ #30 : 19.06.2013, 19:04:55 »

Делал все по инструкции. Скачал файл zoomsl-3.0.min.js создал папку /js/в папке с шаблоном и закинул туда файл. Вставил

Код

<script type="text/javascript" src="<?php echo $this->baseurl ;?>/templates/<?php echo $this->template ?>/js/zoomsl-3.0.min.js">
</script>

в шаблоне в файл index.php перед </head>
Затем в материале в режиме "Вставить html" вставил

Код

<!-- JAVASCRIPT -->
<script type="text/javascript">// <![CDATA[
jQuery(function(){   
      $(".my-foto").imagezoomsl({        
         zoomrange: [3, 3]
      });
   });
// ]]></script>
<!-- HTML -->
<p><img class="my-foto" src="images/gallery categories/fata/Skazka_l.jpg" title="Фото" data-large="images/gallery categories/fata/Skazka_b.jpg" /></p>

Но скрип почему то не срабатывает при наведении на картинку ничего не происходит
Вот ссылка на страницу
http://vladimir-mezentsev.com/index.php/11-svadebnye-perchatki

Записан

THE KILLERS

Давно я тут
915
28 / 0

Re: Эффекты увеличения (лупа: cloud-zoom и zoomer) изображения товара

« Ответ #31 : 20.06.2013, 02:03:22 »

maxituning возможно у вас конфликт скриптов как и у меня (долго мучался, прежде чем подсказали), читайте мой пост в этой теме - http://joomlaforum.ru/index.php/topic,262485.msg1332933.html#msg1332933 - последняя строчка.

Записан

Один из лучших хостингов

mihey2011

Осваиваюсь на форуме
39
1 / 0

Re: Эффекты увеличения (лупа: cloud-zoom и zoomer) изображения товара

« Ответ #32 : 20.06.2013, 07:58:13 »

Пробовал, ставил, но мой шаблон весь перекосило, и все равно не помогло, этот плагин как я понял для шаблонов joomlabamboo, а у меня от YooTheme.

Записан

THE KILLERS

Давно я тут
915
28 / 0

Re: Эффекты увеличения (лупа: cloud-zoom и zoomer) изображения товара

« Ответ #33 : 20.06.2013, 12:30:31 »

Нет, это для любого шаблона. У меня например стоит шаблон от JoomShaper. Не знаю почему у вас перекосило...

Записан

Один из лучших хостингов

mihey2011

Осваиваюсь на форуме
39
1 / 0

Re: Эффекты увеличения (лупа: cloud-zoom и zoomer) изображения товара

« Ответ #34 : 20.06.2013, 13:22:30 »

Перекосило, это конечно громко сказано, просто счетчики из футера оказались наверху страницы. Но это хрен с ним, можно поковырятся и поставить их на место, а вот то что плагин zoomer не работает, это конечно проблема, мне без него никак, я на нем хотел сделать большой раздел сайта. Cloud zoom вроде ничего, но он не увеличивает колесиком мыши, а мне это очень надо.

Записан

maxituning

Осваиваюсь на форуме
17
0 / 0

Re: Эффекты увеличения (лупа: cloud-zoom и zoomer) изображения товара

« Ответ #35 : 20.06.2013, 13:44:25 »

У меня шаблон сделанный артистиром. Эта штука не помогла http://www.joomlabamboo.com/joomla-extensions/jb-library-plugin-a-free-joomla-jquery-plugin. Ничего в макете не перекосило но и плагин не работа.
Кто то пробовал вот эту штуку http://extensions.joomla.org/extensions/photos-a-images/images/image-magnifier/21151 платный плагин но я уже подумываю его купить.

Записан

mihey2011

Осваиваюсь на форуме
39
1 / 0

Re: Эффекты увеличения (лупа: cloud-zoom и zoomer) изображения товара

« Ответ #36 : 20.06.2013, 13:50:56 »

Не вижу смысла в этом плагине, скачай бесплатную версию Cloud Zoom, там все тоже самое.

Записан

THE KILLERS

Давно я тут
915
28 / 0

Re: Эффекты увеличения (лупа: cloud-zoom и zoomer) изображения товара

« Ответ #37 : 20.06.2013, 14:40:55 »

Цитата: maxituning от 20.06.2013, 13:44:25

У меня шаблон сделанный артистиром. Эта штука не помогла http://www.joomlabamboo.com/joomla-extensions/jb-library-plugin-a-free-joomla-jquery-plugin.

А вы в плагинах включили его после установки?

Записан

Один из лучших хостингов

maxituning

Осваиваюсь на форуме
17
0 / 0

Re: Эффекты увеличения (лупа: cloud-zoom и zoomer) изображения товара

« Ответ #38 : 20.06.2013, 16:27:10 »

Цитата: THE KILLERS от 20.06.2013, 14:40:55

А вы в плагинах включили его после установки?

Да конечно включил. Никаких настроек не вносил.

Записан

maxituning

Осваиваюсь на форуме
17
0 / 0

Re: Эффекты увеличения (лупа: cloud-zoom и zoomer) изображения товара

« Ответ #39 : 20.06.2013, 16:30:19 »

Цитата: mihey2011 от 20.06.2013, 13:50:56

Не вижу смысла в этом плагине, скачай бесплатную версию Cloud Zoom, там все тоже самое.

Из бесплатного я нашел только вот это http://ideas.forjoomla.net/downloads/view.download/11/2 там плагин под Joomla 1.5 и модуль.
И vtem image zoom нашел но с ним другая проблема возникла

Записан

maxituning

Осваиваюсь на форуме
17
0 / 0

Re: Эффекты увеличения (лупа: cloud-zoom и zoomer) изображения товара

« Ответ #40 : 20.06.2013, 16:54:27 »

Нашел вот тут версию для скачивания плагина 2.5
Как мне настроить его как указать превьюшку и большую картинку

« Последнее редактирование: 20.06.2013, 17:11:17 от nevigen »

Записан

pyh

Захожу иногда
117
11 / 0

Re: Эффекты увеличения (лупа: cloud-zoom и zoomer) изображения товара

« Ответ #41 : 01.07.2013, 16:12:32 »

Для тех, кто использует плагин Zoomer v3.0

Существует проблема при наличии нескольких фото в товаре.
Каждому среднему изображению создается div class="tracker", при наведении на который и идет подгрузка большого изображения, их позиция точно над средней картинкой.
При переключении на второе и далее изображение, первый div class="tracker" теряет точку отсчета и получает left: 0px; top: 0px;

Соответственно если над ним (в верхней левой части сайта) провести мышом, выскакивает зум.

Исправленная версия уже на сайте, перезалейте для дальнейшего использования.

Спасибо SergeLand.

Записан

viktorchp

Осваиваюсь на форуме
34
5 / 0

Re: Эффекты увеличения (лупа: cloud-zoom и zoomer) изображения товара

« Ответ #42 : 18.08.2013, 20:23:35 »

подскажите как в первом варианте cloud-zoom версии 1.0.2
сделать более детальный вид а то почти одинаковый размер увеличение
хотябы в 3 раза .. а то в js не силен пока....

Виктор.

Записан

denben777

Захожу иногда
157
78 / 1

Re: Эффекты увеличения (лупа: cloud-zoom и zoomer) изображения товара

« Ответ #43 : 18.08.2013, 23:39:10 »

Эффект "увеличения" cloud-zoom напрямую зависит от оригинального размера картинки. Чем больше размер, загружаемой картинки товара, тем сильнее эффект "увеличения". Другими словами, никакого увеличения нет - вы просто видите часть изображения-оригинала. Для более-менее эффективной работы плагина, желательно загружать изображение не менее 800 и не более 2000 пикселей.

Записан

viktorchp

Осваиваюсь на форуме
34
5 / 0

Re: Эффекты увеличения (лупа: cloud-zoom и zoomer) изображения товара

« Ответ #44 : 19.08.2013, 09:26:07 »

Спасибо понял

и правда у меня фото было примерно 250px

+ в карму

Записан

skydimas

Осваиваюсь на форуме
27
0 / 0

Re: Эффекты увеличения (лупа: cloud-zoom и zoomer) изображения товара

« Ответ #45 : 19.09.2013, 08:37:19 »

Реализовал cloud-zoom версии 1.0.2 по Вашей инструкции на JoomShopping все отлично работает, но возникает одна проблема. Если к товару назначить несколько зависимых атрибутов, и для каждого атрибута назначить свое изображение, то в карточке товара после смены атрибута (и смены изображения соотвественно) "лупа" перестает работать, хотя ссылки на изображения с классами и id cloud-zoom остаются...

Можете подсказать, как решить вопрос?

Записан

denben777

Захожу иногда
157
78 / 1

Re: Эффекты увеличения (лупа: cloud-zoom и zoomer) изображения товара

« Ответ #46 : 19.09.2013, 13:58:39 »

Цитата: skydimas от 19.09.2013, 08:37:19

...если к товару назначить несколько зависимых атрибутов, и для каждого атрибута назначить свое изображение, то в карточке товара после смены атрибута (и смены изображения соответственно) "лупа" перестает работать...

В вашем случае необходимо провести изменения в файле: http://ваш_сайт/components/com_jshopping/js/functions.js

На примере главного изображения:

Ищем код (строка ~1306):

Код

html_middle_img+='<a class="lightbox" id="main_image_full_'+j+'" href="'+liveproductimgpath+'/full_'+json.images[j]+'" '+tmp+'><img id="main_image_'+j+'" src="'+liveproductimgpath+'/'+json.images[j]+'" />'+html_zoom_img+'</a>';

и заменяем на:

Код

html_middle_img+='<a class="cloud-zoom" id="zoom1" rel="adjustX: 10, adjustY:-4, showTitle:false" href="'+liveproductimgpath+'/full_'+json.images[j]+'" '+tmp+'><img id="main_image_'+j+'" src="'+liveproductimgpath+'/'+json.images[j]+'" />'+html_zoom_img+'</a>';

далее (строка ~1313) находим:

Код

initJSlightBox();

и ниже с новой строки добавляем:

Код

jQuery(".cloud-zoom, .cloud-zoom-gallery").CloudZoom();

Код для значков и

Увеличить изображение изменяем по тому же принципу.

« Последнее редактирование: 19.09.2013, 14:10:11 от denben777 »

Записан

skydimas

Осваиваюсь на форуме
27
0 / 0

Re: Эффекты увеличения (лупа: cloud-zoom и zoomer) изображения товара

« Ответ #47 : 22.09.2013, 19:20:46 »

Большое спасибо, работает, проблема решена.

Записан

codjer

Новичок
8
0 / 0

Re: Эффекты увеличения (лупа: cloud-zoom и zoomer) изображени&

« Ответ #48 : 05.10.2013, 14:37:30 »

Спасибо, я прикрутил первый вариант, но мне нужен другой эффект Inner Zoom что и где в коде поменять?

Записан

denben777

Захожу иногда
157
78 / 1

Re: Эффекты увеличения (лупа: cloud-zoom и zoomer) изображения товара

« Ответ #49 : 05.10.2013, 18:22:04 »

Цитата: codjer от 05.10.2013, 14:37:30

Спасибо, я прикрутил первый вариант, но мне нужен другой эффект Inner Zoom что и где в коде поменять?

Нужно вернуться сюда и еще раз (но уже внимательно и вдумчиво) прочитать мой ответ:

Цитата: denben777 от 05.10.2013, 03:48:12

Аналог: интеграция Cloud-Zoom → атрибут rel (код для главного изображения):
Код
position: 'inside' , showTitle: false, adjustX:-4, adjustY:-4
_{Результат}

Записан

codjer

Новичок
8
0 / 0

Re: Эффекты увеличения (лупа: cloud-zoom и zoomer) изображения товара

« Ответ #50 : 05.10.2013, 21:47:01 »

спасибо большое, получилось:)

Записан

ugrumy

Осваиваюсь на форуме
27
1 / 0

Re: Эффекты увеличения (лупа: cloud-zoom и zoomer) изображени&

« Ответ #51 : 12.10.2013, 08:58:14 »

Добрый день. Ребята почему то этот эффект(лупы) не работает на J3 и JS 4.3.3 (шаблон на div), все варианты перепробовал, работает только тот, который в виде готового плагина(JoomShopping Product Loupe). Сначала я думал что это из-за YooTheme вского шаблона, потом поставил чистую Joomla со стандартным шаблоном, JS 4.3.3 и шаблон на div. Результат такой же. Файер баг в консоли пишет "$(...).imagezoomsl is not a function ". Подскажите в чем проблема и в какую сторону копать, а то два дня уже голову ломаю.

Проблему решил. Установил плагин Jquery_easy. Вроде бы заработало

« Последнее редактирование: 21.10.2013, 11:05:11 от ugrumy »

Записан

ugrumy

Осваиваюсь на форуме
27
1 / 0

Re: Эффекты увеличения (лупа: cloud-zoom и zoomer) изображени&

« Ответ #52 : 28.10.2013, 05:25:48 »

Цитата: denben777 от 19.09.2013, 13:58:39

В вашем случае необходимо провести изменения в файле: http://ваш_сайт/components/com_jshopping/js/functions.js

На примере главного изображения:

Ищем код (строка ~1306):
Код
html_middle_img+='<a class="lightbox" id="main_image_full_'+j+'" href="'+liveproductimgpath+'/full_'+json.images[j]+'" '+tmp+'><img id="main_image_'+j+'" src="'+liveproductimgpath+'/'+json.images[j]+'" />'+html_zoom_img+'</a>';
и заменяем на:
Код
html_middle_img+='<a class="cloud-zoom" id="zoom1" rel="adjustX: 10, adjustY:-4, showTitle:false" href="'+liveproductimgpath+'/full_'+json.images[j]+'" '+tmp+'><img id="main_image_'+j+'" src="'+liveproductimgpath+'/'+json.images[j]+'" />'+html_zoom_img+'</a>';
далее (строка ~1313) находим:
Код
initJSlightBox();
и ниже с новой строки добавляем:
Код
jQuery(".cloud-zoom, .cloud-zoom-gallery").CloudZoom();
Код для значков и Увеличить изображение изменяем по тому же принципу.

Ребята подскажите, зум с атрибутами по этому принципу работает отлично, только теперь, если для каждого атрибута есть больше чем одно изображение, то при выборе другого атрибута изображения в окне "midle" выстраиваются вниз и превьюшки вверху уже не выбираются. Здесь написано что надо их поменять по тому же принципу, только я не могу понять этот принцип и найти где и на что поменять. Ткните носом пожалуйста. Ссылка на проблему http://ask.promesite.ru/index.php?option=com_jshopping&controller=product&task=view&category_id=24&product_id=872&Itemid=128 выбрать другой цвет.

Записан

denben777

Захожу иногда
157
78 / 1

Re: Эффекты увеличения (лупа: cloud-zoom и zoomer) изображения товара

« Ответ #53 : 28.10.2013, 16:18:04 »

Ну как еще подробней?
Возьмите не измененный шаблон http://ваш_сайт/components/com_jshopping/templates/product_default.php - посмотрите на HTML и php код где формируется вывод изображения, затем откройте http://ваш_сайт/components/com_jshopping/js/functions.js (строки 1293 - 1314 на JS 3.15.3) и посмотрите на принцип обновления Java.

html_middle_img - это основное изображение.
html_thumb_img - это значок-миниатюра.
html_zoom_img -

Увеличить изображение

После этого сравниваем изменения, которые провели в шаблоне, но еще не изменили functions.js для корректного обновления.

Например:
При изменении кода основного изображения в цикле

Код

<?php foreach($this->images as $k=>$image){?>
...
<?php endif; ?>

было выставлено условие (выводить только первое изображение)

Код

<?php if ($k == "0") : ?>
...
<?php endif; ?>

По тому же принципу делаем и в http://ваш_сайт/components/com_jshopping/js/functions.js
в

Код

for(var j=0;j<count_prod_img;j++){
...
}

ставим условие

Код

if (j==0){
...тут выводим html_middle_img
}

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

Код для значков (cloud-zoom):

Спойлер

[свернуть]

« Последнее редактирование: 28.10.2013, 16:26:13 от denben777 »

Записан

ugrumy

Осваиваюсь на форуме
27
1 / 0

Re: Эффекты увеличения (лупа: cloud-zoom и zoomer) изображения товара

« Ответ #54 : 29.10.2013, 10:44:14 »

Спасибо, все получилось.

Записан

mic

Новичок
1
0 / 0

Re: Эффекты увеличения (лупа: cloud-zoom и zoomer) изображения товара

« Ответ #55 : 31.10.2013, 01:40:27 »

Добрый вечер.
очень понравился плагин cloud-zoom.
Как установить и настроить его на действующем сайте (не магазин), который сделан на Joomla 2.5, шаблон "yougrids"?
Нужны ли дополнительно установить расширения?
Куда и что положить, где прописать..?
Например, для моего случая, в какую папку перенести файл cloud-zoom.1.0.2.min.js .... в каком месте меняем код для главного изображения

Мой опыт сайтостроения - один сайт моему другу художнику, обучение - только интернет (разные видеоуроки).
Этого оказалось явно не достаточно.
Спасибо.

Записан

denben777

Захожу иногда
157
78 / 1

Re: Эффекты увеличения (лупа: cloud-zoom и zoomer) изображения товара

« Ответ #56 : 31.10.2013, 05:23:47 »

_{Загрузка}

Спойлер

[свернуть]

_{Подключение}

Спойлер

[свернуть]

_Вывод

Спойлер

[свернуть]

_{Эффекты}

Спойлер

[свернуть]

_{Если все работает}

Спойлер

[свернуть]

Записан

МихаилСергеевич

Осваиваюсь на форуме
10
0 / 0

Re: Эффекты увеличения (лупа: cloud-zoom и zoomer) изображения товара

« Ответ #57 : 07.11.2013, 16:53:20 »

Добрый Вечер.
Многоуважаемый denben777, прошу Вас помочь мне, все сделал по инструкции, перепробовал множество разных вариантов, но zoom никак не работает.
пример http://stayer.16mb.com/partneram/ostatki/product/view/9/11
где и что я делаю неправильно?

Записан

denben777

Захожу иногда
157
78 / 1

Re: Эффекты увеличения (лупа: cloud-zoom и zoomer) изображения товара

« Ответ #58 : 07.11.2013, 19:17:03 »

Цитата: МихаилСергеевич от 07.11.2013, 16:53:20

...перепробовал множество разных вариантов, но zoom никак не работает...

У вас сейчас на сайте четыре ошибки.
Не работает по причине конфликта Jquery → возможно с Widgetkit.
Как вариант, попробуйте отключить загрузку Jquery в Widgetkit, а в настройках JoomShopping наоборот включить и т.д., в том же направление.
Проверьте - не было ли ошибок до начала внедрения. Возможно причину необходимо искать ранее.

Записан

МихаилСергеевич

Осваиваюсь на форуме
10
0 / 0

Re: Эффекты увеличения (лупа: cloud-zoom и zoomer) изображения товара

« Ответ #59 : 08.11.2013, 14:43:45 »

Спасибо за совет.
Все снес поставил шаблон по новой, теперь такая ошибка:
Uncaught TypeError: Object [object Object] has no method 'CloudZoom' coupe:346
(anonymous function) coupe:346
e.resolveWith jquery-1.6.2.min.js:16
e.extend.ready jquery-1.6.2.min.js:16
c.addEventListener.B jquery-1.6.2.min.js:16
Подскажите, это все равно идет конфликт с Widgetkit?

ЗЫ, до этого Lightbox работал, а теперь просто изображение открывает.

Записан

В списке товаров вывести названия категорий каждого товара Автор shop-user	Ответов: 5 Просмотров: 1450	25.01.2022, 06:05:12 от kit2m2
Плагин - Инфоблок товара в списке товаров [Скачать] Автор kit2m2	Ответов: 13 Просмотров: 2724	20.10.2021, 14:51:08 от kit2m2
Автоматическая генерация кода товара (плагин) Автор maslybs	Ответов: 8 Просмотров: 3196	30.08.2021, 20:21:25 от nevigen
Таблица размеров (и т.п.) Плагин модульных позиций для атрибутов на странице товара [Скачать] Автор kit2m2	Ответов: 39 Просмотров: 7135	16.05.2021, 18:16:50 от kit2m2
AJAX пагинация товара Автор ExJTMaster	Ответов: 10 Просмотров: 3422	12.10.2020, 16:20:18 от sivers

Вышли релизы Joomla 5.1.0 и Joomla 4.4.4

Проблема с id в URL материалов Joomla при обновлении большого старого сайта до Joomla 5

Используем поля Joomla для фильтрации материалов

Похожие темы