Interesting site build the other day for a client, who wanted a cleanly coded way to upload multiple images per product, then have them change on mouseover of a thumbnail.
To enable this, I had to change the admin/categories.php file to alow an extra 7 images in addition to the existing one. That was painless as it’s just a matter of copying code and renaming the product variable for each.
Obviously this also means I have to add extra rows in the database table “products” to hold the 7 extra images.
Once a new product has been made, the product page then looks like this:
Note that these products are all available from osc books and I used them in this example as the thumbs and larger images are already created (hence saving me the effort of making multiple images for this blog post!).
As you can see, I laid out the 4 thumbnails in a 2 x 2 formation and the larger image is on the right. When I mouseover any of those thumbnails, the larger image changes automatically…here’s a video;
You might also notice that I prettied up the mouseover cursor by using a .png file (I think this does not work in IE unfortunately). But it looks great in better browsers! A simple piece of .css does this, you can search google for “custom cursor using css” for more info on that.
Not bad, and this is all controlled by just a simple line of javascript in jQuery like this:
$("#images").html('');
As I mentioned, this client wanted something cleanly coded – there are many contributions for osCommerce which have multiple images, and no doubt there are some which can do mouseover based swapping – have a hunt for them and post back to this thread. Let’s see if we can get an images resources going here!