Лупа для товара

[Virtyc 1]

Здравствуйте вообщем как то я писал в теме по поводу увеличение картинки стандартного POP окна которая у меня не работает по не известным мне причинам все вроде прописано правильно ни чего лишнего не добавлял но оно не работает. Ну вообщем я решил сделать увеличение картинки лупой нашел скрипт тут Пример лупы все вроде бы просто и понятно но есть вопрос куда нужно присвоить class="tozoom"> для img так что бы для всех картинок он работал я так понял нужно прописывать его в product_info_v1.html но только где ? Или по другому что отвечает за вывод всех картинок? Т.е к нему пристроить этот класс. Подскажите пожалуйста. Сайт вот автостиль22.рф шаблон стандарт Vamshop. Заранее Спасибо за ответы.

[support 447]

Здравствуйте!

 

Где вывод картинки идёт.

Во тут:

<img id="img" src="{$PRODUCTS_IMAGE}" alt="{if $PRODUCTS_IMAGE_DESCRIPTION !=''}{$PRODUCTS_IMAGE_DESCRIPTION}{else}{$PRODUCTS_NAME}{/if}" />

[rmn 7]

Была у меня подобная проблема.

В моем случае отсутствовало несколько файлов с папки jscript. Копирования с демки папки все исправило.

[Virtyc 1]

  В 14.10.2013 в 08:02, rmn сказал:

Была у меня подобная проблема.

В моем случае отсутствовало несколько файлов с папки jscript. Копирования с демки папки все исправило.

А какие файлы точно не помните?

[rmn 7]

Проще всю папку заново себе скопировать

[YuriyVA 1]

Пробую эту лупу (http://ruseller.com/lessons/les166/example/index.html) разместить в шаблон\module\product_info\product_info_v1.html 

Прикрутил стили 

<link rel="stylesheet" href="{$tpl_path}style/jqzoom.css" type="text/css" media="screen" />  

Стили работают.

 

прикрутил скрипт даже уже в includes\header.php в <header>

<script type="text/javascript" src="jscript/jquery/plugins/jquery.jqzoom.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function(){
$("img.jqzoom").jqueryzoom({
				xzoom: 200, //zooming div default width(default width value is 200)
				yzoom: 200, //zooming div default width(default height value is 200)
				offset: 10 //zooming div default offset(default offset value is 10)
				//position: "right" //zooming div position(default position value is "right")
			});
});
</script>

Вывожу картинку как в примере в шаблон\module\product_info\product_info_v1.html

<span class="tozoom"><img src="{$PRODUCTS_IMAGE}" class="jqzoom"  alt="{$PRODUCTS_POPUP_IMAGE}"></span>

на примере вижу, что при наведении на картинку появляется <div class="zoomdiv">, в котором собственно увеличенное изображение и выводится.

 

У меня на карточке товара не работает... Т.е. блок <div class="zoomdiv"> не появляется и увеличенная картинка не выводится...

 

Не могу понять в чем дело, и что ему мешает... Друзья, может есть какие-то мысли?

[support 447]

Попробуйте другой подобный скрипт, либо может не использовать строку jQuery.noConflict(); и заменить jQuery(document).ready(function(){ на $(document).ready(function(){

 

И проверить js файл Ваш с jqzoom подгружается на странице или нет.

 

Например в Chrome Developer Console всё видно, что грузится, есть ли ошибки.

[YuriyVA 1]

  В 27.11.2013 в 12:47, support сказал:

либо может не использовать строку jQuery.noConflict();

 

 

 

Спасибо! Вот так заработало!!!!

[support 447]

Не за что

[YuriyVA 1]

Пробую другую лупу, она оказалась даже симпатичнее: http://www.xiper.net/collect/js-plugins/ui/zoomy.html

 

Заработала сразу, но.... Она пересекается с fancybox 

Дело в том, что у нее такой код в шаблоне:

<a href="{$PRODUCTS_POPUP_IMAGE}" class="zoom" ><img src="{$PRODUCTS_IMAGE}" alt="" /></a>

И в итоге что получается: первый клик открывает не лупу, а всплывающее окно fancybox , после этого лупа работает нормально. Отключал fancybox - так на него завязаны всплывающие окна "задать вопрос о товаре"  и т.д. Нельзя...

Я так понимаю class="zoom" - это какой то системный класс ? (в *.css файлах нигде не найти :) ) Подскажите пожалуйста, как выйти из этой ситуации. Уж больно лупа симпатичная... В настройках скрипта стоит  "clickable: false," но все равно кликается... Перенастроил скрипт на  показ по лупы по наведению курсора мыши - показывает сразу лупу, но тем не менее, можно кликнуть и открывается всплывающее окно fancybox.  

Друзья, подскажите пожалуйста, каким образом отключить клик на картинке с <a href="{$PRODUCTS_POPUP_IMAGE}" class="zoom">? Пробовал и  jQuery("a").onclick(function(){return false;}); - не работает,

Пробовал - onClick='return false;' вообщем как сделать так что бы не открывался fancybox c картинкой

 

Или второй вариант - наводим на картинку - появляется лупа  - если не кликаем, то ладно. А если кликаем - открывается всплывающее окно, но на нем исчезает лупа лупа? А пока она появляется и во всплывающем окне, на большой картинке тоже...

 

Заранее благодарю!

 

ЗЫ. Наверное уже достал...  :)

[support 447]

Посмотрите документацию к этому модулю, может там настройками можно задавать другой признак для подключения лупы.

[YuriyVA 1]

Все перечитал - не нашел..

Но решение пришло по второму варианту - уменьшил z-index лупы с 1000 до 2 в .zoomy классе файла стилей лупы. Теперь при наведении курсора по mouseover на картинке показывается лупа, а если кликнуть -  всплывает окно fancybox, но так как у него значение z-index больше - лупа в этом окне не отображается... По клику окно закрывается, и если курсор на картинке - вновь отображается лупа. В принципе такой вариант тоже подойдет, хотя и не совсем правильно, с точки зрения рационального программирования...  :)  А вообщем вроде даже  и ничего получилось... Будем считать что это не бага а фича  :D

Спасибо! Наверное вопрос можно считать закрытым...

[support 447]

Хорошо, что разобрались :)

[Virtyc 1]

Здравствуйте решил я свою проблему была она у меня в product_info я при установки скрипта удалил строчку ни чайно вот и пострадал модуль ...... ))) Все ровно спасибо за помощь ....

[support 447]

Хорошо, что разобрались.