Drillpine.Biz Support Forum

Hi Norman,
I hope you may be able to help me if possible. We are developing a new site for a client and within our design we have incorporated the magic zoom feature. The main image is 360px square with a 1px border around it. Underneath we have 2 rows of 4 thumbnail images. Being the stickler that I am I envisaged the 4 thumbnails to align neatly underneath the main image with the first thumbnail to the left and the 4th image to be in line with the right hand side of the main image.

I am struggling to align the 4th image as I have applied 10px padding to the right of the thumbnails causing the 4th image to return underneath. Would there be a way to command the last image of the row to disregard the padding?

I look forward to hearing from you.

Regards.
Lee.

Hard to reply without seeing a live page.

Hi Norman,
Apologies, link below: http://dev.centurius.co.uk/shop/Rainbow_Shirt_Flat.html

Regards.
Lee.

This is a responsive site so there's not really a fixed number of images across. It will change as you resize the browser window.
I'm presuming you want this looking best on full-width browsers.

One thing that may be worth trying is setting ZoomIconsAcross to 1 and ZoomIconsAcrossCode to a single space. Do this on the Product to be sure you're getting the right settings (I've seen cases where it doesn't "Use Parent"). This will mean that a single space follows each icon. Such spaces won't show at the beginning and end of a line.

Now change your CSS to remove any right padding or margin. And adjust the icon width so that the number you want fits across the page. This width will have to take into account the number of pixels a space occupies.

Also see if your client would be happy with the icons centered below the product image. This will look good at all responsive widths.

Finally, you're using a version of Magic Zoom Plus that's intended for non-responsive sites (although it makes a good job on responsive designs as-is). I have a version intended for responsive sites (it uses DIV's to place the icon list around the main image instead of TABLE's). Email me and I'll send the responsive variant.