jQzoom to Featured Image Zoomer - Image Ratio Problem

Printable View

09-27-2013, 09:58 AM
step-bmx

jQzoom to Featured Image Zoomer - Image Ratio Problem

Featured Image Zoomer

http://www.dynamicdrive.com/dynamici...m#.UkVR6T_K6Q4

Hi Guys

I've joined this forum as it looks like this is the place I might get an issue I'm having resolved, but I'm going to have a dig around as well as it looks like an interesting place.
I'm currently updating away from jQzoom as the IE bugs were becoming more and more of a nuisance.
I have got Featured Image Zoomer by John Davenport Scheuer running pretty much how I would like it locally on my computer but I have a slight issue due to the pass over from jQzoom:

I have three size images
Icon: W105 x H84
Medium: W370 x H370
Large: W1280 x H1024

The different sizes hasn't caused an issue before as it's items isolated on a white background. However the way Featured Image Zoomer works it's not allowing for the different sizes between medium (square) to large (rectangle). I'm stumped, I can either get it working so it squashes width of the large image to a square so it looks odd or I can get it to keep the ratio but the zoom still expects a square image so a large portion of the bottom is empty and the tracking is noticeably off.

It's caused me a lot of head scratching :confused:

I would just re-batch the images square but it'd be a nightmare (well over 2000 of them) plus they are heavy cached on CDN

Many Thanks
Stephen
09-27-2013, 12:02 PM
jscheuer1

As you've discovered, the medium and large images should ideally be of the same aspect ratio. This is most easily accomplished by making the medium image from the large image, resizing a copy of it down proportionally (maintain aspect ratio setting, in most image processing software, some can do this in a batch mode).

Only thing I can think of, other than using proportional images, is to try putting left and right css padding on the medium image to get it to be the same aspect ratio as the large image. The script might also have to be modified to accept that padding of the medium image as part of its width when calculating what part of the large image to show. In jQuery terms that would mean using its .outerWidth(), rather than its .width()

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.
09-27-2013, 03:04 PM
step-bmx

Thank you for the speedy reply

Hmm interesting, I've had a quick play with padding the medium image and swapping to .outerWidth() but have been unsuccessful so far (I shall keep playing) but it also does break the page design so it's kind of catch 22.

In reality I was hoping that it would be a simple fix/alteration to compensate for the different sizes, but if I have to postpone it's integration till I have time to run a resizing batch in Photoshop for the large size then so be it.

As for posting up code, I've so far made minor alterations to the original source so it's probably not so relevant
09-27-2013, 04:53 PM
jscheuer1

Well, if i could see an example of the page, I might be able to tweak it for you. There could perhaps even be another way. I work much better when I have something to look at. I would want to see it "working" with jQzoom, and not working with Featured Image Zoomer. Then I might be able to figure out a fudge to get the non-matching aspect ratios to somehow match up. I mean, if jQzoom can do it . . .

No promises, but that's what would give me a good chance at it.
09-29-2013, 09:11 PM
step-bmx

Hi jscheuer1

Sorry for the delayed response but I have a young daughter that pretty much eats all my time up at the weekends ha ha

The following is jQzoom working with the said sizes of images:
09-29-2013, 09:12 PM
step-bmx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" http://www.w3.org/TR/html4/loose.dtd>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="../js/jquery.jqzoom-core.js" type="text/javascript"></script>
<style>
body{font-family:Arial;margin:0;padding:0}
a img,:link img,:visited img{border:none}
table{border-collapse:collapse;border-spacing:0}
:focus{outline:none}
*{margin:0;padding:0}
p,blockquote,dd,dt{line-height:1.5em;margin:0 0 8px}
fieldset{padding:0 7px 7px}
fieldset legend{margin-left:15px;padding-left:3px;padding-right:3px;color:#333}
dl dd{margin:0}
.clearfix:after{clear:both;content:".";display:block;font-size:0;height:0;line-height:0;visibility:hidden}
.clearfix{display:block;zoom:1}
ul#thumblist{display:block}
ul#thumblist li{float:left;margin-right:2px;list-style:none}
ul#thumblist li a{display:block;border:1px solid #CCC}
ul#thumblist li a.zoomThumbActive{border:1px solid red}
.jqzoom{text-decoration:none;float:left}
.zoomPad{position:relative;float:left;z-index:99;cursor:crosshair}
.zoomPreload{-moz-opacity:0.8;opacity:0.8;filter:alpha(opacity=80);color:#333;font-size:12px;font-family:Tahoma;text-decoration:none;border:1px solid #CCC;background-color:#FFF;text-align:center;background-image:url(http://www.mind-projects.it/projects...-position:43px 30px;z-index:110;position:absolute;top:0;left:0;width:100px;height:49px;padding:8px}
.zoomPup{overflow:hidden;background-color:#FFF;-moz-opacity:0.6;opacity:0.6;filter:alpha(opacity=60);position:absolute;border:1px solid #CCC;z-index:101;cursor:crosshair}
.zoomOverlay{position:absolute;left:0;top:0;background:#FFF;width:100%;height:100%;display:none;z-index:101}
.zoomWindow{position:absolute;left:110%;top:40px;background:#FFF;height:auto;z-index:110}
.zoomWrapper{position:relative;border:1px solid #999;z-index:110}
.zoomWrapperTitle{display:block;background:#999;color:#FFF;height:18px;line-height:18px;width:100%;overflow:hidden;text-align:center;font-size:10px;position:absolute;top:0;left:0;z-index:120;-moz-opacity:0.6;opacity:0.6;filter:alpha(opacity=60)}
.zoomWrapperImage{display:block;position:relative;overflow:hidden;z-index:110}
.zoomWrapperImage img{border:0;display:block;position:absolute;z-index:101}
.zoomIframe{z-index:-1;filter:alpha(opacity=0);-moz-opacity:0.80;opacity:0.80;position:absolute;display:block}
</style>
<script type="text/javascript">

$(document).ready(function() {
$('.jqzoom').jqzoom({
zoomType: 'standard',
lens:true,
preloadImages: false,
alwaysOn:false
});

});

</script>
</head>

<body>
<div class="clearfix" id="content">
<div class="clearfix"> <a href="http://www.stephenfray.co.uk/pics/imgProd/triumph_big1.jpg" class="jqzoom" rel='gal1' title="triumph" > <img src="http://www.stephenfray.co.uk/pics/imgProd/triumph_small1.jpg" title="triumph" style="border: 4px solid #666;"> </a>
</div>
<br/>
<div class="clearfix" >
<ul id="thumblist" class="clearfix" >
<li><a class="zoomThumbActive" href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: 'http://www.stephenfray.co.uk/pics/imgProd/triumph_small1.jpg',largeimage: 'http://www.stephenfray.co.uk/pics/imgProd/triumph_big1.jpg'}"><img src='http://www.stephenfray.co.uk/pics/imgProd/thumbs/triumph_thumb1.jpg'></a></li>
<li><a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: 'http://www.stephenfray.co.uk/pics/imgProd/triumph_small2.jpg',largeimage: 'http://www.stephenfray.co.uk/pics/imgProd/triumph_big2.jpg'}"><img src='http://www.stephenfray.co.uk/pics/imgProd/thumbs/triumph_thumb2.jpg'></a></li>
<li><a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: 'http://www.stephenfray.co.uk/pics/imgProd/triumph_small3.jpg',largeimage: 'http://www.stephenfray.co.uk/pics/imgProd/triumph_big3.jpg'}"><img src='http://www.stephenfray.co.uk/pics/imgProd/thumbs/triumph_thumb3.jpg'></a></li>
</ul>
</div>
</div>
</body>
</html>
09-29-2013, 09:18 PM
step-bmx

The Whole JS file appears to be too long to post (even when i compile it) so the link for that is:

http://www.stephenfray.co.uk/pics/js...jqzoom-core.js
09-29-2013, 09:22 PM
step-bmx

I shall grab the Featured Image Zoomer code that's on my other computer tomorrow and pop it on here if you need that as well.

Oh and please ignore my actual website in the link... very very old and not been touched in quiet a few years now ha ha

Many thanks for helping / even looking into this
09-30-2013, 08:12 AM
jscheuer1

I meant a link to the two pages where you have this setup. One page that's using the Featured Image Zoomer that shows how the larger image is being distorted, and another page that's using jQZoom Evolution that shows it working OK with different aspect ratios for the medium and large images.

In the meantime, I've found the jQZoom Evolution home page, so will have a look to see if there are any examples of that there.

But I will get more information from seeing how you have it set up.
09-30-2013, 01:10 PM
step-bmx

sorry, i thought it would be easier this way what with less junk on the page etc... the whole thing is just wrapped in a div on the page anyway with no real alterations to the code i just posted up
09-30-2013, 02:48 PM
step-bmx

jscheuer

Many thanks for the help but i have now found and integrated:

http://www.elevateweb.co.uk/image-zoom

It does the image ratio and on the face of it seems a lot less buggie in IE than jQzoom (I say that but I still need to do some more testing)

Once again thanks for your time jscheuer