Re-writing product listing page from scratch - Help with image thumbnails and zoom

[cbsteven]

I'm taking a second stab at re-writing the image detail page from scratch so I can have everything just how I want it and not have to be constricted to <tables> for placement. Still early on. I am trying to make sure the thumbnails/product images work at expected before I do anything else.

The behavior of product thumbnails and switching between main images and zooming was always a bit flakey for me, even on the old page which was just a slightly modified standard version from the template, but the page was too complicated for me to debug it. Now that the page is stripped down to it's bare essentials I'd like to get a handle on this.

Example page: http://beta.aebike.com/Lazer-Helium-...m_p_15004.html

I use the new 3DZoom (MagicZoomPlus). On initial page load it looks fine. Thumbnails lined up on top, large image below. Mousing over the large image zooms in, and clicking pops it up.

Problem 1:Switching between thumbnails makes the new image shrink down to thumbnail size.

Problem 2: Clicking on the same thumbnail twice in a row makes the main image essentially shrink down to zero. Clicking on a different thumbnail sometimes expands it back to small size, sometimes not.

If I can get this to work I'd be happy to share my code for stripping the tables out of this page :)

[widgets]

Try and see whether it works better by replacing thumb-id with zoom-id, and get rid of the image_click functionality.

I have a feeling they are making it more complicated than it needs to be for images.

The program 3dcart is using for picture zoom, Magiczoomplus, already has a lot of functionality built in, and is a combination of 2 programs from the same company, and I think using thumb-id only utilizes one program. It might work better with zoom-id.


I was able to make some changes to suit my own purposes, by looking at the Magiczoomplus website, which list all the parameters you can use.



I am not sure of the significance of 3dcart adding function image_click(clicks), perhaps to be legacy compatible with the old zoomify functionality. I strip that additional functionality out (which was handcoded into the template, and just wrong; you already know that, since you are cleaning up tables), and use the zoom-id function instead of thumb-id, to make it work the way I want.

I hated the fact that you have to click on the big picture to zoom in. I think intuitively and usability-wise, mousing over the thumbnail should change the product listing picture, and clicking on the thumbnail, or the product listing picture should bring up the zoom. You can see what I am talking about here:
http://www.gadgetgoodies.com/USB-Hub...ful_p_207.html and view the code to see whether it helps. I messed around and kind of forget exactly what I did, and it could probably clean up a little more, but this is only a production site, not in business in the mean time, so I am not worried.

[cbsteven]

Good info and I like your design. One tip, I initially viewed the site with Google Chrome with the Adblock extension loaded. Adblock for some reason blocks your main product image. You may want to take some steps to avoid that (don't ask me how).

[Mark]

Just an FYI, can't see anything on that site except the side banners.
IE8 on Winodws XP

[cbsteven]

Me or the other posters? If mine would you mind posting a screen shot?

[Mark]

The Goodies site. No products display on my PC

[widgets]

Yeah I think mine isn't working on ie8, and breaking Probably because I tried to intergrate a specific 3 column holy Grail tableless design. It is a production site for me. Checkout is closed anyway. I am using it to test for possiblities for my other sites, and lots of stuff
are breaking

the overall design is available as a free template from 3dcart btw. I was trying to clean it ip a bit.

[cbsteven]

Before I did anything I emailed support about this. It took two replies for them to even understand what my issue was. Now they are just asking if I would like a price quote to customize this, which seems totally unacceptable. This isn't a design issue. It's implementing a feature of 3DCart according to their specs and having it not work.


Annnyway, taking matters into my own hands, I re-implemented it using example code from MagicZoomPlus, and bypassing the 3DCart onclick javascript and custom function which serve no real purpose except to let the zoom method be controlled from the back end.

The image picker now works in Firefox and IE, but does not work reliably in Chrome or Safari. The first couple of changes work, but on the third or fourth one the large image collapses somehow.

Any ideas?

[cbsteven]

FYI, I was able to get this working once I disabled the zoom feature of MagicZoomPlus (by adding the line "'disable-zoom':'true'" in the options in the header script). It was a bit of a redundant feature anyway, and I'd much rather have a image picker/zoomer that works reliably in the four major browsers.