Реализация Jqzoom для проблемы Joomla Opera IE - PullRequest
Новая
       21

Реализация Jqzoom для проблемы Joomla Opera IE

0 голосов
/ 20 августа 2010

Я реализовал плагин jQzoom на своем веб-сайте на Joomla. Он прекрасно работает во всех браузерах, кроме IE и Opera, обе последние версии. Кажется, что он не получает правильную позицию мыши. Хотя я тестировал тот же макет и параметры на сайте, не принадлежащем Joomla, все было хорошо, поэтому я действительно не знаю. Вот как я использую Jqzoom: Главное изображение продукта слева и дополнительные изображения слева, все они находятся в контейнере на 500 пикселей, который находится внутри контейнера на 700 пикселей, остальные 200 пикселей - это позиция: фиксированное меню. 

<div id="targetDiv" style="float:left;min-width:350px;min-height:499px;max-width:350px;max-height:499px;margin-bottom:10px;margin-right:20px;">
<a href="" class="zoom">
<?php echo ps_product::image_tag( $product_full_image, 'class="productImage" alt="'.$product_name.'" title="'.$product_name.'"', 0 ); ?>
</a>
</div>
<div id="addimg" style="height:499px;width:45px;float:left;margin:0px;">
<?php echo $this->vmlistAdditionalImages( $product_id, $images ) ?>
</div>

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

jQuery(document).ready(function($) {
    $(document).ready(function() {
        var url = $('.zoom img').attr('src');
        $('a.zoom').attr('href', url);
        $('.zoom').jqzoom();
        $('#addimg a').wrap('<div class="addimg" />');
        $('img.productImage').attr({'width':'350', 'height':'499'});
    });
});

function showDiv(objectID,imgName) {
    var theElementStyle = document.getElementById(objectID);
    theElementStyle.innerHTML = "`<a class='zoom' href='"+imgName+"'><img src='"+imgName+"' border='0' width='350' height='499'></a>`";
    jQuery(document).ready(function($) {
        $(document).ready(function() {
            $('.zoom').jqzoom();
        });
    });
}

Opera и IE не будут правильно отображать всплывающее окно масштабирования, оно всегда всплывает справа от изображения, даже если я устанавливаю его слева, хотя работает нижняя часть. Похоже, что Большое изображение занимает все пространство. Я в полном замешательстве.

Я знаю, что вся идея этого увеличения в том, чтобы загрузить маленькое изображение, используя img и указать масштаб на БОЛЬШОМ изображении с помощью якоря. Что я сделал, так это то, что у меня нет возможности загружать изображения среднего размера в Virtuemart ... вот почему я загружаю большое изображение, затем изменяю его размер с помощью jQuery, затем я назначаю src img для href a, и вот так работы.

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

Я надеюсь, что кто-нибудь может хотя бы указать мне на решение. Я потратил последние 2 дня на поиски энергии и не нашел никого с такой же проблемой. Это не коммерческая работа, это мой собственный проект ... Надеюсь, я смогу найти решение с вашей помощью.

1 Ответ

0 голосов
/ 21 августа 2010

Знаешь что?Я отказался от идеи исправления jqzoom и решил сам написать jquery zoom, он работает безупречно во всех браузерах и на веб-сайте joomla.Я написал за несколько часов и работаю над реализацией большего количества функций, поэтому, если кому-то это нужно, не стесняйтесь использовать этот скрипт в качестве стартового.То, что я сделал в основном так: у меня есть одна картинка, большая, изменить ее размер с помощью jquery до нужных размеров.Рядом с ним у меня есть позиция: абсолютный div, который содержит полноразмерное изображение.Легко и просто.Сложнее было получить увеличенное изображение, показывающее точное местоположение, на которое указывает мышь. Формула - (количество «px» слева / сверху до увеличения div + координаты мыши * 2) + половина ширины увеличения zoom/рост.Я умножил координаты мыши, потому что увеличенное изображение ровно в два раза меньше маленького.Но, похоже, работает и с другими измерениями.Вот код: 

$(document).ready(function(){
var marginLeft = $('#pop img').offset().left;
var marginTop = $('#pop img').offset().top;
var windowHalf = $('#pop').width() /2;
var windowHalfV = $('#pop').height() /2;
 $("#test").mousemove(function(e){
var x = (marginLeft - (e.pageX - this.offsetLeft) * 2)+windowHalf;
var y = (marginTop -(e.pageY - this.offsetTop)*2)+ windowHalfV;
var one = $('#pop img').offset();
  $('#log').html(x +', '+ y);
  $('#log2').html(one.left+', '+ one.top);
  $('#pop img').offset({top: y, left: x});   

   });
  });
...