Hi Dave,

I’ve modified the cloud zoom script and some of the template files to ensure that product images are always centered regardless of width.  The edits allow the cloud zoom visuals to change dynamically along with the images.  It also centres the gallery thumbnails beneath the product image regardless of number.

With your permission, I’d like to attach the template files and updated cloud-zoom.js for others that may wish to have their images centered and still be able to use the cloud zoom plug-in.

I have tested it on www.giftgnu.com/shop if you would like to view a working demo. (Be kind about the design, I’m still working on it!)

Thanks,
Dan

Dan,

Firstly, let me compliment you on your layout change and design. Wow, that looks fantastic. I think you are under estimating yourself my friend.

Really appreciate your offer, but Cloud Zoom has been removed in 2.1 due to licence changes. Its been replaced with Elevate Zoom:
http://www.elevateweb.co.uk/image-zoom

I don’t know whether to laugh or cry!  Cheers on your critique mate, it’s much appreciated Though your base template made it nice and easy to understand.  you actually went ott with the style parameters to cover for a lot of different styles out of the box I noticed. Well I’ll post up the code tomorrow for what little time it has left to be of any use!  And to think I even did a victory dance in the office…

In the meantime I wondered if you ever saw this? Could be a feature of 2.1

http://www.3news.co.nz/Shopping-site-charges-Internet-Explorer-7-tax/tabid/412/articleID/258139/Default.aspx

Last edited by DAustin (25-06-2013 20:43:02)

Please don`t post any videos on YouTube.

Yes, I did see that. That wouldn`t be something I would ever add. Personally I think its pretty stupid.

Sorry about being 2 days late!  Been down with a case of the manliest of man-flus.

If you see any mistakes, please add them to a reply.  Let’s make this a community effort!

REMEMBER TO BACK-UP YOUR ORIGINALS!!!

Ok I’m gonna run through the edits, anyone using these changes should attempt to try to understand what’s going on, as some customisation may be needed to get it working in a particular set-up:

We’ll start with the variables (I put these on line 181):

/*
Edited by Dan Austin - Get values for Image and Image wrapper widths
*/
var dadw = document.getElementById("displayImg").offsetWidth;
var wrapw = document.getElementById("wrap").offsetWidth;
/*
Edited by Dan Austin - Get values for Offsets
*/
var dadl = ((wrapw - dadw) / 2);
var dadk = (wrapw / 2) + (dadw / 2);

OK all we’re doing here is creating some variables to call later.  Note the value in the brackets, this is the objects id and must be set correctly.  Vars dadw and wrapw are using javascript to return pixel values for the widths.  Vars dadl and dadk take these values and perform some basic maths.

dadl = The difference between our custom wrapper width and the image width it contains, divided by 2.  This provides our value for offsetting the image position later.
dadk = Half the width of our image added to half the width of our wrapper.  This gives the value of the right edge of the image, which is needed to position the Zoom Image window to the right of our image (though obviously you can use this value to offset the image to the left instead)

On line 187 add an id so we can target the mousetrap event with javascript more easily (I have used dadzoom here).

            $mouseTrap = jWin.parent().append(format("<div id='dadzoom' class='mousetrap' style='background-image:url(\".\");z-index:999;position:absolute;width:%0px;height:%1px;top:%3px;\'></div>", sImg.outerWidth(), sImg.outerHeight(), 0, 0)).find(':last');

Then we can set the mousetrap event to the correct position using this:

/*
Edited by Dan Austin - Set mousetrap position using left offset
*/
document.getElementById("dadzoom").style.left = (dadl + 'px');

This sets the <style=’left:Ypx’> where Ypx equals the value given for ‘dadl’ on our mousetrap event.

Ok, we now set our own custom wrapper (basically a carbon copy of the ‘cloud-zoom-lens’ div, which allows us to set a variable width for the ‘cloud-zoom-lens’ div without breaking the layout)

 /*
Edited by Dan Austin - Added wrapper 'zWrap' to cloud-zoom-lens div for js targetting
 */
                lens = jWin.append(format("<div id='zWrap' style='margin:0px;padding:0px;position:absolute;top:0;'><div id = 'cloud-zoom-lens' class = 'cloud-zoom-lens' style='display:none;z-index:98;position:absolute;width:%0px;height:%1px;'></div></div>", cw, ch)).find(':last');

And finally we set our ‘zoom1’ div width and left positioning based on our variables (this isn’t stored in any file but seems to be made on the fly, however its id is set to zoom1 so we can target it):

 /*
Edited by Dan Austin
Set Zoom Div (child to 'zWrap') width and positioning                
*/
document.getElementById("zoom1").style.left = (dadl + 'px');
document.getElementById("zoom1").style.width = (dadw + 'px');

And that’s it, centered images and cloud zoom, no matter what size your product photo’s are!
If any of my explanation seems wrong, it could be, I did a lot of trial and error on this so I may not be explaining it correctly.

Deprecated Code:

In my provided cloud-zoom.js you’ll notice other functions I’ve made and then commented out.  These were my first attempt and are for use when no ‘zWrap’ wrapper is used.  I’ve left them in in case you need to keep a set width for the ‘cloud-zoom-lens’ div for some reason.  It works nearly as well with the exception of one bug, caused by the mousetrap event not clearing quickly enough when the mouse leaves and reenters the mousetrap area.  It’s down to the fade out effect and I only found 2 solutions.  First is to use my newer code, as this avoids the problem and was the only reason I actually scripted a variable ‘cloud-zoom-lens’ div.  The second is to remove the fade out effect (or set it to 0ms), but it doesn’t look very nice.

Additional stuff – Centered Gallery Images:

Want centered gallery images?  (those little images beneath your product image)  Simple!  Open up your product-pictures.htm file and change it to this:

      <div id="picScroller">
      <ul style="list-style-type: none; margin: 0px; padding: 0px;">
       <li style="text-align:center; margin: 0px; padding: 0px;">{pictures}</li>
       </ul>
      </div>

This is an old trick here.  By using the html list element, you can force images to be centrally aligned by using ‘text-align:center’.  This just sets up the list (and makes sure no extra styling is added like bullet points).

Finally here’s the styling bits in my .css (I’m not sure if these bits are required for full functionality, however I include them here just to be sure):

.mousetrap{
position:relative;
display: block;
height: 135px;
width:204px;
overflow:hidden;
}
.mousetrap img{
height: 135px;
}
.viewProduct .productInfo .left .img img {
border: 2px solid #663F23;
margin-right:auto;
margin-left:auto;
  max-width:200px;
  max-height:135px;
  text-align:center;
  box-shadow: 2px 2px 4px #444;
}

I can’t find any other declarations in my css, but I’m guessing anyone who’s read this far knows enough about css for it not to be too much trouble!

Also my apologies if any of this code is wrong, or badly written!  I’m not a programmer!

Files are attached below (cloud-zoom.js and product-pictures.htm).

REMEMBER TO BACK-UP YOUR ORIGINALS!!!

http://www.giftgnu.com/examples/cloud-zoom.js
http://www.giftgnu.com/examples/product-pictures.htm

Also David, people would kill for my Dance moves

Last edited by DAustin (28-06-2013 14:16:13)

Dan,

Thats a brilliant post, thanks for taking the time to post it. I`ll make this a stick in case anyone wants to grab the code.