osCommerce Multiple Images using Fancy Box
Buy Gary A Beer?
Buying me a "beer" helps me to keep my contributions updated and keep this blog alive - and you get a link from my homepage to your site. Cheers!
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?
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?
Comment by Ronaldinho53 — February 27, 2009 @ 4:45 pm
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)
Comment by Gary — February 27, 2009 @ 6:12 pm
Would you make a contribution out of this ?
Comment by Tomee — March 2, 2009 @ 5:19 am
Hi,
Do you think you can teach mi how to install it in osommerce?
Thanks
Comment by Char — March 2, 2009 @ 5:05 pm
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…
Comment by Liuk — March 4, 2009 @ 10:35 pm
Exactly. It's very simple and makes for a good effect.
Comment by Gary — March 5, 2009 @ 9:59 am
I do not know how to isntall the FancyBox, would you mind if you explain step by step?
It would be great!!
Thanks.
Comment by Fabiola — May 11, 2009 @ 11:25 am
You need to do this yourself. I can quote you for making it work in your store if you wish, oscshops@gmail.com
Gary
Comment by Gary — May 11, 2009 @ 11:35 am
Nice idea! For SEO purposes it would be nice to use alternative content for instead of being unable to scroll through images.
Comment by Gill — July 3, 2009 @ 9:40 am
i have an issue with fancybox i am hoping someone could help me out with. I have fancy box and read more product info installed in my osc and when i click on the read more it pops up a new windows with my full site rather than just additional text in the fancybox. navigate to http://www.proteinxpress.com/product_info.php?products_id=195 and click on the read more for an example of how its not working right. Thanks for the help!
Comment by Mike — December 29, 2009 @ 7:31 pm
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.
Comment by Gary — December 31, 2009 @ 10:17 am
I need the code for osCommerce Multiple Images using Fancy Box, please can you give me the link to download the same.
Comment by Hijab — May 20, 2010 @ 6:22 am
Hi Hijab – this exists at the oscommerce downloads site.
Comment by Gary — May 20, 2010 @ 7:42 am