Question

I have jqzoom all setup and everything works great except a couple things, one being even though I tell jqzoom to align the flyout image to the right of the original image, on our ipad it puts the image on the left.

Does anyone know the workings of jqzoom well enough to know why it would do this? It looks like jqzoom is setting [left:] no matter what, and just adjusting the [left:] value accordingly (say in the -minus direction) if the flyout is to be on the right? If that’s the case, can’t it just do an if/else, and if it needs to be on the right, set the [right:] instead of the [left:]?

This is how I have jqzoom setup:

<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>

Normal and Expected:

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

Mobile Safari:

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

Answer 1

I found the answer myself. jqzoom determines if there is enough room on the right to place the flyout image, and on the iPad, there isn’t (in our case), so it displays it on the left instead. It does this despite the fact that there’s more room on the right than on the left.

So I am detecting iPad and forcing it to the right side as intended.

In jquery.jqzoom-core.js around line 535:

Before:

    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));

After:

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));
}