Перейти к содержанию
Bersi

Нужна помощь в JavaScript (модуль Cloud Zoom Free)

Рекомендуемые сообщения

Переделываю под себя модуль Cloud Zoom Free (oc 1.5.3). Немного поменял стиль вывода и добавил пару условий на вывод картинки, меньше заданного в параметрах зума. Кроме того, картинки у меня не квадратные, а масштабируются исходя из пропорций исходного изображения.

Заметил глюк: в некоторых случаях (от чего зависит, так и не понял) скрипт не может определить background-position для линзы. Как это происходит, можно посмотреть по ссылке (третья картинка в списке) и на скриншотах (прилагаются).

Не правильно:

Изображение

Правильно:

Изображение

Вроде бы нашел код в скрипте, который за это отвечает (cloud-zoom.1.0.2.js, строки 131-135):

				lens.css({
					left: x,
					top: y
				});
				lens.css('background-position', (-x) + 'px ' + (-y) + 'px');
При этом значения left и top определяются прекрасно, проблема именно с background-position.

Очень прошу помощи профессионалов.

Во вложении модифицированный модуль.

ЗЫ: я не программер, потому прошу строго не судить, если что-то объяснил коряво :)

cloud-zoom-magnifier-simple 1531-mod.zip

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Разобрался сам.

Округлил значения до целых, поменяв

				var x = (mx - sImg.offset().left - (cw * 0.5)) >> 0;
				var y = (my - sImg.offset().top - (ch * 0.5)) >> 0;
			  
				if (x < 0) {
					x = 0;
				}
				else if (x > (sImg.outerWidth() - cw)) {
					x = (sImg.outerWidth() - cw);
				}
				if (y < 0) {
					y = 0;
				}
				else if (y > (sImg.outerHeight() - ch)) {
					y = (sImg.outerHeight() - ch);
				}
на:

				var x = Math.round(mx - sImg.offset().left - (cw * 0.5)) >> 0;
				var y = Math.round(my - sImg.offset().top - (ch * 0.5)) >> 0;
			  
				if (x < 0) {
					x = 0;
				}
				else if (x > (sImg.outerWidth() - cw)) {
					x = Math.round(sImg.outerWidth() - cw);
				}
				if (y < 0) {
					y = 0;
				}
				else if (y > (sImg.outerHeight() - ch)) {
					y = Math.round(sImg.outerHeight() - ch);
				}
Тему можно удалять :)

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Молодец!

Зачем же удалять, если нашел решение, да еще и описал его, еще может пригодиться кому либо! :wink:

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Скачал файл что то не работает, там нужно все менять как выше описано? (есть готовый рабочий?)

И еще по поводу qmoda я что то не разберусь когда устанавливаешь подобные модули  как их потом настраивать или отключат в qmode а то в модулях не отображает не как понять не могу

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Скачал файл что то не работает, там нужно все менять как выше описано? (есть готовый рабочий?)

И еще по поводу qmoda я что то не разберусь когда устанавливаешь подобные модули  как их потом настраивать или отключат в qmode а то в модулях не отображает не как понять не могу

vqmod создает папку xml в своей директории, там и лежат собственно файлы, изменяющие стандартный функционал. Если переименовать расширение подобного файла (например, mod.xml0 вместо mod.xml), это приведет к "отключению" мода. Ну или можно просто удалить ненужный файл. Что же касается изменений, где-то была неплохая инструкция (пришлю в личке).

 

Также пришлю готовый файл вместе с vqmod'ом в ближайшее время (сейчас он не под рукой).

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Скачал файл что то не работает, там нужно все менять как выше описано? (есть готовый рабочий?)

И еще по поводу qmoda я что то не разберусь когда устанавливаешь подобные модули  как их потом настраивать или отключат в qmode а то в модулях не отображает не как понять не могу

vqmod создает папку xml в своей директории, там и лежат собственно файлы, изменяющие стандартный функционал. Если переименовать расширение подобного файла (например, mod.xml0 вместо mod.xml), это приведет к "отключению" мода. Ну или можно просто удалить ненужный файл. Что же касается изменений, где-то была неплохая инструкция (пришлю в личке).

 

Также пришлю готовый файл вместе с vqmod'ом в ближайшее время (сейчас он не под рукой).

Ок. буду ждать

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

что-то у меня никак не хочет работать корректно этот модуль... дополнительные фото к товару подставляет маленькие...и при наведении как и должен увеличивает..но как сделать чтобы другие фото подставлялись такого же размера что и основное фото????

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Похожий контент

    • От Exzik
      Добрый день , форумчане 
      Появилась проблема, которую я не могу решить сам 
      На страницу категорий добавил скрипт прокрутки, работает как часы  и грузит все отлично.
      Проблема в том, что из-за этого скрипта перестали работать кнопки (Добавить в корзину и т.д )
      Не могли бы подсказать в чем именно проблема ? 
      Ссылка на сайт  тут
       
       
      Скрипт 
      $(function() { function scrollLoader() { console.log('---', 123) if ($(window).scrollTop() == $(document).height() - $(window).height()) { console.log('---', 'ok') setTimeout(function() { $('#endless').trigger('click') }, autoscroller.delay) } } var autoscroller = [] //setting autoscroller.hidePagination = 1 autoscroller.autoScroll = 0 autoscroller.catcher = '#endless' autoscroller.delay = 1000 autoscroller.loading = 0 $(window).scroll(function() { scrollLoader() if (inWindow(autoscroller.catcher) && !autoscroller.loading && autoscroller.autoScroll) { autoscroller.loading = true $('#endless .fa-refresh').addClass('btn-load-new') } }) if ($('.category-catalog').length) { if ($('.pagination').length && !$('.pagination > li:last-child').hasClass('active')) { $('#content col-12 col-md-9 order-2').hide() $('.pagination') .parent() .before( '<div class="col-xs-12 text-center"><button class="btn btn-success btn-lg" id="endless" style="margin: 15px auto; padding: 10px 120px;" ><span class="btn-load-new">Еще товары</span></i></button></div>') $('#endless').on('click', function(e) { var lastProduct = $('.pagination') .closest('.category-catalog') .find('.front-top-products li:last-child') var nextPage = $('ul.pagination li.active').next().find('a:first-child') var nextPageHref = nextPage.attr('href').substring(7) // console.log('---',nextPageHref); // console.log('---', nextPage.attr('href')); $.ajax({ url: 'https://' + nextPageHref, beforeSend: function() { $('#endless .fa-refresh').addClass('btn-load-new') }, success: function(data) { var products = $(data).find('.category-catalog .front-top-products') lastProduct.after(products) $('.pagination').html($(data).find('.pagination > *')) nextPage = $('ul.pagination li.active').next().find('a:first-child') if (nextPage.length == 0) { $('#endless').remove() } else { $('#endless .fa-refresh').removeClass('btn-load-new') } autoscroller.loading = 1 }, }) return false }) } } function inWindow(el) { if ($(el).length) { var scrollTop = $(window).scrollTop() var windowHeight = $(window).height() var offset = $(el).offset() if (scrollTop <= offset.top && ($(el).height() + offset.top) < (scrollTop + windowHeight)) { return true } } return false } })  
    • От deadlylimonad
      Появилась ошибка в JS при переезде на https, перестали подгружаться товары в категориях (бесконечная прокрутка).
      Вот что в консоли:
      Mixed Content: The page at 'https://abt-professional.com/magazin/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://abt-professional.com/magazin/?page=2'. This request has been blocked; the content must be served over HTTPS. send @ jquery-2.1.1.min.js?j2v=2.8.5:4 ajax @ jquery-2.1.1.min.js?j2v=2.8.5:4 n.(anonymous function) @ jquery-2.1.1.min.js?j2v=2.8.5:4 load @ jquery-ias.min.js?j2v=2.8.5:13 (anonymous) @ jquery-ias.min.js?j2v=2.8.5:13 j @ jquery-2.1.1.min.js?j2v=2.8.5:2 add @ jquery-2.1.1.min.js?j2v=2.8.5:2 c.next @ jquery-ias.min.js?j2v=2.8.5:13 scrollHandler @ jquery-ias.min.js?j2v=2.8.5:13 a @ jquery-ias.min.js?j2v=2.8.5:13 setTimeout (async) d @ jquery-ias.min.js?j2v=2.8.5:13 f @ jquery-2.1.1.min.js?j2v=2.8.5:2 dispatch @ jquery-2.1.1.min.js?j2v=2.8.5:3 r.handle @ jquery-2.1.1.min.js?j2v=2.8.5:3  
    • От deadlylimonad
      Привет. Проблема в том, что все выпадающие меню (главное вверху и несколько в футере) в мобильной версии сайта начинают работать т.е. выпадать только после прокрутки страницы на тлф. туда-сюда, или если в браузере (при эмуляции тлф.) то после некоторого перетаскивания границ экрана эмулируемого устройства (320-760px). Думаю, что-то с подгрузкой скриптов. Куда копать?
      Версия ocStore 2.3.0.2.2, JOURNALv.2.8.5
      https://abt-professional.com/
    • От Techno1og
      ocStore 1.5. Нужно внести правки в css и javascript  на основании отчета W3C validator,
      Сократить объем кода, переместить скрипты в подвал сайта, объединить стили и т.д...сохранив логику. 
       
    • От Yarilo
      Добрый день! Заметил ошибки в карточке товара, что это может быть?
       
      Как можно это исправить? Подскажите пожалуйста!
  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.