When you have to put forward 2 or 3 products on your web page, you always ask yourself : How I’m gonna offer an interesting view of these products? Well this script can help a bit. Using Jquery it can animate 2 or 3 products creating an interesting way of displaying them.
When you click on a product, the product image will zoom out to see a featured close-up shot and a description. When you click on another product, the last opened product will zoom back and the new clicked product will zoom out. Here’s an example so you can understand better:
Get this to work on your website
First you will need to use my HTML structure. Don’t forget to put a height and a width to all your product img tag, Otherwise IE is too dumb to understand.
On the interior div you need another class to specifie your close shot image, this picture need to be a css background image. The interior div is also where you put your product description. Download the script and start playing with it, you should be able to customize it in no time.
Download the source codeView demo
It take time to maintain these javascript snippets, if you like and use the work up here, please consider buying me a beer, it’s cheap and a simple way to give back!
Is it just me or does only the middle product ever display. No matter which product i select using IE8 i still see the same product zoomed. Strange.
Otherwise cool and nice idea.
Yea silly me, i didn’t told it, but I used the same picture everywhere, gonna change that now, but it work
Pretty awesome, I was thinking about trying something really similar to this myself but never got around to it. I like the example but it’s flippin huge! I almost couldn’t see the whole thing! But I suppose having that big of an example really gets the point across so I shouldn’t complain.
Really cool bit of javascript, I haven’t looked at it too in depth but it looks like it can be easily customizable as well which is a must for something like this.
Thanks for sharing!
That pretty slick man. I’d like to see a reset option, but other than that I think it’s great.
Nice work mate, slick control, nice visual design, very nice!!
to be frank, I didn’t like how it look! but i still love jquery xD
Wonderful !!
Thanks
[...] Feature your Products with jQuery [...]
very nice work,
like Tim said a reset option would be a great add.
once again well done.
That’s Badass, but yeah i agree that it needs some type of reset.
As said above thats BADASS! ^^^^
Hey guys,
A new version with a reset button should be there within one month, I’m doind a big re-write of all my plugins right now for my portfolio, I already have it working, but I want to test a little bit.
Wow, I hadn’t thought about it that way before. Good write up, very clearly written. Have you written previously about PHP.JS? I’d love to read more.
Hi Balaji,
I started last year, I have a very cool JS form validator project coming online on monday, so stick around!
Love this. however it does not seem to work on IE6. Once clicked on product, the “detail” section does not appear.
[...] 2.Feature Your Products With Jquery [...]
[...] 2.Feature Your Products With Jquery [...]
Thank you, you opened my mind with this
[...] 2.Feature Your Products With Jquery [...]
awesome Dude..!!!!!
Great! ;]
[...] another product, the last opened product will zoom back and the new clicked product will zoom out. Web Site Demo Download Share and [...]
Just downloaded…Thanks for sharing
Cheers
Autre
Download free web development tools