0 Comments

I was looking for a good way to make a cool mouseover zoom effect for images on a website. CloudZoom came up and looked nice, but didn’t suit my needs. I stumbled upon the jqzoom library from http://www.mind-projects.it/projects/jqzoom/ You can donate Marco something and download the jqzoom library. The jQuery plugin is 733 lines of code (including the comments) and worked great.

It was easy to use, here is my HTML and JavaScript:

<script src="js/jquery.jqzoom-core.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#holder li a.jq-zoom').jqzoom({
            zoomType: 'innerzoom',
            lens: false,
            preloadImages: false,
            alwaysOn: false,
            zoomWidth: 150,
            zoomHeight: 150,
            xOffset:0,
            yOffset: 0,
            title: false
        });
    });
</script>
<ul id="holder">
    <li><a class="jq-zoom" href="uri-to-big-img.jpg">
            <img src="uri-to-small-img.jpg"/></a></li>
    <li><a class="jq-zoom" href="uri-to-big-img.jpg">
            <img src="uri-to-small-img.jpg"/></a></li>
    <li><a class="jq-zoom" href="uri-to-big-img.jpg">
            <img src="uri-to-small-img.jpg"/></a></li>
    <li><a class="jq-zoom" href="uri-to-big-img.jpg">
            <img src="uri-to-small-img.jpg"/></a></li>
    <!-- etc. used css for making a grid style -->
</ul>

 

This works, but I used the innerzoom option and had an annoying 1 pixel border around the images when I hovered over them. So it took me some time to figure out that it was a problem in the plugin and not my CSS or the way I used it.

On line 548 I found the innerzoom option and changed the border width to be static 0 pixels (no border):

if (settings.zoomType == 'innerzoom') {
  this.node.css({
      cursor: 'default'
  });
  var thickness = (smallimage.bleft == 0) ? 1 : smallimage.bleft;
  $('.zoomWrapper', this.node).css({
      /*borderWidth: thickness + 'px'*/
      borderWidth: '0px'
  });    
}
            
$('.zoomWrapper', this.node).css({
    width: Math.round(settings.zoomWidth) + 'px' ,
    /*borderWidth: thickness + 'px'*/
    borderWidth: '0px'
});

I found out that my zoomwrapper still got the border by viewing the website with the famous firebug extension for FireFox. But with this small change in the 733 lines of JavaScript you can manually disable the border of the inner zoom option.

Good luck!

Pin on pinterest Plus on Googleplus Post on LinkedIn