Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: jQzoom to Featured Image Zoomer - Image Ratio Problem

  1. #1
    Join Date
    Sep 2013
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default 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

    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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,004
    Thanks
    44
    Thanked 3,199 Times in 3,161 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Sep 2013
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,004
    Thanks
    44
    Thanked 3,199 Times in 3,161 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Sep 2013
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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:

  6. #6
    Join Date
    Sep 2013
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

  7. #7
    Join Date
    Sep 2013
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  8. #8
    Join Date
    Sep 2013
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  9. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,004
    Thanks
    44
    Thanked 3,199 Times in 3,161 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. #10
    Join Date
    Sep 2013
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

Similar Threads

  1. Featured Image Zoomer - Change Default loaded thumbnail image
    By coffee2020 in forum Dynamic Drive scripts help
    Replies: 17
    Last Post: 04-22-2013, 07:15 PM
  2. Featured Image Zoomer v1.5 &Image Thumbnail Viewer II
    By letom in forum Dynamic Drive scripts help
    Replies: 11
    Last Post: 07-09-2012, 06:44 PM
  3. adding Featured Image Zoomer v1.5 problem
    By soffi in forum Dynamic Drive scripts help
    Replies: 8
    Last Post: 05-25-2012, 04:13 PM
  4. Featured Image Zoomer double image in IE
    By kirkh34 in forum Dynamic Drive scripts help
    Replies: 10
    Last Post: 06-03-2011, 09:05 AM
  5. Problem with featured image zoomer
    By geoffloxton in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 07-21-2010, 10:59 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •