osCommerce Multiple Images using Fancy Box

The other day I spent some time “doing up” a site. I had a list of to-do’s and was basically given carte-blanche to do whatever was needed to make it work…

One of the requests was the ability for some products to have more than 1 image in the pop-up. I know that there are a handful of image mods available, but I wanted to do something that hasn’t been done before…

As I use “Fancy Box” quite a lot for thumbnail/large image purposes, I decided to utilise the core code and have an extra 5 images, for 6 in total;

1 thumbnail – used everywhere as per normal osCommerce
5 large images – used in the pop-up

Admin Section – product adding/editing page

In here I added the ability to upload an extra 5 images (in addition to the usual thumbnail).

Shop Section – product info page

The usual thumbnail image shows, when it is clicked on the old style popup is no longer used. In it’s place is “Fancy Box”. As you can see in the video, Fancy Box enables us to have a previous & next arrow system to scroll through the multiple images.

I think it looks good. What do you think?

15 Replies to “osCommerce Multiple Images using Fancy Box”

  1. Nice, very nice. I particularly like the borderless images. jQuery seems to be appearing in more sites these days. I’ve used it on a few static sites but that’s about it. Is it easy to incorporate into osC?

  2. Ron – jQuery is very simple to add to osCommerce. It’s the way forward now that lots of the bigger sites are using js libraries (eg, Google, Apple, MSN etc)

  3. it is easy… see instructions for fancy box… and modify consequently the html code produced by your multiple image contribution. I got it easily working with more pics…

  4. I do not know how to isntall the FancyBox, would you mind if you explain step by step?

    It would be great!!

    Thanks.

  5. Nice idea! For SEO purposes it would be nice to use alternative content for instead of being unable to scroll through images.

  6. Mike – the link on the read more is looking like it’s just a simple href link. I see no linkage via jquery.

    What you need to do is strip the read_more page to it’s basic format, then wrap that link inside the fancybox jquery code.

    I haven’t looked at your page much, but that’s my initial impression. If you need one on one to get this working, email me and I’ll be happy to quote you.

  7. I need the code for osCommerce Multiple Images using Fancy Box, please can you give me the link to download the same.

  8. Hi There OsCommerce Gurus, i want to install that on my website but the person that helps me with the website is unable to find step by step instructions and when we tried to installed apparently that corrupt the database, any help is appreciated.

  9. Diego – have a look at the new multiple images system in 2.3.1 (the new release of osCommerce). Very easy.

Leave a Reply

Your email address will not be published. Required fields are marked *