Блог

У меня настроен jqzoom, и все работает отлично, за исключением нескольких вещей, одна из которых заключается в том, что, хотя я говорю jqzoom выровнять всплывающее изображение справа от исходного изображения, на нашем ipad оно помещает изображение слева.

Кто-нибудь знает работу jqzoom достаточно хорошо, чтобы понять, почему он это делает? Похоже, что jqzoom устанавливает [left:] независимо от того, что, и просто соответствующим образом настраивает значение [left:] (скажем, в направлении минус), если всплывающее окно должно быть справа? Если это так, не может ли он просто выполнить if / else , и если он должен быть справа, установите [right:] вместо [left:] ?

Вот как я настроил jqzoom:

 <div id="jqDiv" style="width:400px; height:400px;">
<a id="imageNameAId" href="http://path.to.image/bigImage.jpg" class="MYCLASS" rel="gal1">
    <img src='http://path.to.image/smallImage.jpg' alt='imageName' id='imageNameImgId' height="400" width="400" />
</a>
</div>

<script type="text/javascript">
var options = {
    zoomType: "standard",
    lens: true,
    preloadImages: true,
    alwaysOn: false,
    zoomWidth: 600,
    zoomHeight: 600,
    xOffset: 10,
    yOffset: 0,
    position: "right",
    title: false
};
// Delay jqzoom binding to allow (rel) thumbnail images time to load
setTimeout( function() {
    jQuery('#imageNameA').jqzoom(options);
}, 500);
</script>
  

Нормально и ожидаемо:

 .--. .-----.
|  | |     |
`--' |     |
     `-----'
  

Мобильное сафари:

 .-----. .--.
|     | |  |
|     | `--'
`-----'
  

Я сам нашел ответ. jqzoom определяет, достаточно ли места справа для размещения всплывающего изображения, а на iPad его нет (в нашем случае), поэтому вместо этого он отображает его слева. Это происходит, несмотря на то, что справа больше места, чем слева.

Итак, я обнаруживаю iPad и перемещаю его в правую сторону, как и предполагалось.

В jquery.jqzoom-core.js вокруг линии 535:

Перед:

     this.node.leftpos = (smallimage.rightlimit   Math.abs(settings.xOffset)   settings.zoomWidth < screen.width) ? (smallimage.ow   Math.abs(settings.xOffset)) : (0 - settings.zoomWidth - Math.abs(settings.xOffset));
  

После:

 if (navigator.userAgent.match(/iPad/i) != null) {
    this.node.leftpos = (smallimage.ow   Math.abs(settings.xOffset));
} else {
    this.node.leftpos = (smallimage.rightlimit   Math.abs(settings.xOffset)   settings.zoomWidth < screen.width) ? (smallimage.ow   Math.abs(settings.xOffset)) : (0 - settings.zoomWidth - Math.abs(settings.xOffset));
}