Magiczoom thumbnail alignment

Integration of Magic Zoom Plus from http://www.magictoolbox.com with Actinic.
Post Reply
leej
Posts: 46
Joined: Thu May 17, 2007 10:03 am
Location: Otley, Leeds
Contact:

Magiczoom thumbnail alignment

Post by leej » Thu Mar 05, 2015 10:58 am

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.

norman
Site Admin
Posts: 1242
Joined: Sat Feb 07, 2004 9:55 pm

Re: Magiczoom thumbnail alignment

Post by norman » Thu Mar 05, 2015 11:46 am

Hard to reply without seeing a live page.
Norman

leej
Posts: 46
Joined: Thu May 17, 2007 10:03 am
Location: Otley, Leeds
Contact:

Re: Magiczoom thumbnail alignment

Post by leej » Thu Mar 05, 2015 11:48 am

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

Regards.
Lee.

norman
Site Admin
Posts: 1242
Joined: Sat Feb 07, 2004 9:55 pm

Re: Magiczoom thumbnail alignment

Post by norman » Thu Mar 05, 2015 1:22 pm

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.
Norman

Post Reply