Feature your products with Jquery

by Cedric Dugas on April 28, 2009

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:

View demo

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!


Ads

Sign up for testking 1z0-051 training to learn how to shake up your web page using Jaquery and JavaScript framework. Download the testking 642-974 study guides and testking 646-563 tutorials to become expert in web development.



37 comments

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.

by Darren on September 29, 2008 at 6:44 pm. Reply #

Yea silly me, i didn’t told it, but I used the same picture everywhere, gonna change that now, but it work

by Cedric Dugas on September 29, 2008 at 6:45 pm. Reply #

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!

by Steve on September 30, 2008 at 8:28 am. Reply #

That pretty slick man. I’d like to see a reset option, but other than that I think it’s great.

by Tim Wright on September 30, 2008 at 4:18 pm. Reply #

Nice work mate, slick control, nice visual design, very nice!!

by Darren on October 1, 2008 at 3:06 pm. Reply #

to be frank, I didn’t like how it look! but i still love jquery xD

by Ahmad Alfy on October 1, 2008 at 6:25 pm. Reply #

Wonderful !!

Thanks

by Fran on October 5, 2008 at 4:56 pm. Reply #

[...] Feature your Products with jQuery [...]

by CSSKarma.com » This Week in Links 10/6 on October 6, 2008 at 8:22 am. Reply #

very nice work,

like Tim said a reset option would be a great add.

once again well done.

by pab on October 7, 2008 at 11:09 am. Reply #

That’s Badass, but yeah i agree that it needs some type of reset.

by cardiacSeven on October 16, 2008 at 8:19 am. Reply #

As said above thats BADASS! ^^^^

by Joachim on February 14, 2009 at 11:55 am. Reply #

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.

by Cedric Dugas on February 15, 2009 at 3:03 pm. Reply #

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.

by Balaji on May 28, 2009 at 2:57 pm. Reply #

Hi Balaji,

I started last year, I have a very cool JS form validator project coming online on monday, so stick around!

by Cedric Dugas on May 28, 2009 at 3:02 pm. Reply #

Love this. however it does not seem to work on IE6. Once clicked on product, the “detail” section does not appear.

by Peter on November 8, 2009 at 9:08 pm. Reply #

[...] 2.Feature Your Products With Jquery [...]

by 40 Free Amazing jQuery Plugins and Tutorials With Demos | DesignBeep on November 21, 2009 at 10:40 am. Reply #

[...] 2.Feature Your Products With Jquery [...]

by 40 Free Amazing jQuery Plugins and Tutorials With Demos « VECTOR Tutorial on November 22, 2009 at 6:18 pm. Reply #

Thank you, you opened my mind with this :)

by Pol Moneys on November 30, 2009 at 6:32 am. Reply #

[...] 2.Feature Your Products With Jquery [...]

by 40 Free Amazing jQuery Plugins and Tutorials With Demos | Afif Fattouh - Web Specialist on December 13, 2009 at 7:53 am. Reply #

awesome Dude..!!!!!

by mangesh on January 12, 2010 at 3:52 am. Reply #

Great! ;]

by Anonymous on January 30, 2010 at 6:28 am. Reply #

[...] another product, the last opened product will zoom back and the new clicked product will zoom out. Web Site Demo Download Share and [...]

by Dance Floor – jQuery Plugin | jQuery Wisdom on February 7, 2010 at 1:53 am. Reply #

Just downloaded…Thanks for sharing
Cheers :)
Autre

by Autre on February 9, 2010 at 2:14 pm. Reply #

Download free web development tools

by Web Development on March 3, 2010 at 9:52 am. Reply #

[...] Feature your products with Jquery [...]

by BEST AJAX EXAMPLES - Nagpur on May 11, 2010 at 2:05 am. Reply #

[...] Feature Your Products With Jquery [...]

by 30+ Free Amazing jQuery Plugins and Tutorials | WEBAXES.COM on May 16, 2010 at 6:06 am. Reply #

[...] [...]

by 20 jQuery Stylish Plugins | jQuery4u on January 18, 2011 at 10:32 am. Reply #

Usefull facts crafted on your weblog, most Certainly with. Don’t forget seeing a very similar blog i will look to write. I will store in any case When i await your future thought invoking blog post

by проститутки киева цены on June 22, 2011 at 1:49 am. Reply #

wow…awesome jquery plugin..

i was looking similar to this…

by vignesh on July 14, 2011 at 8:55 am. Reply #

Your demo is broke on FF6

by Greg Thompson on September 20, 2011 at 2:24 pm. Reply #

Good job! I like your it very much.

by jocosn on November 13, 2011 at 4:35 pm. Reply #

[...] 2.Feature Your Products With Jquery [...]

by 40 Free Amazing jQuery Plugins and Tutorials With Demos : Web design on February 27, 2012 at 8:21 pm. Reply #

[...] Feature Your Products With Jquery [...]

by 175 Best jQuery Plugins And Tutorials Worth Checking Out on March 26, 2012 at 4:04 pm. Reply #

[...] Feature Your Products With Jquery [...]

by Best jQuery Plugins And Tutorials Worth Checking Out on March 29, 2012 at 9:52 pm. Reply #

Your effect is great! But not complete the browser compatible. Thank anyway

by Mr. Jan on April 5, 2012 at 6:22 pm. Reply #

[...] 2. Feature Your Products with Jquery [...]

by 10 Useful jQuery Plugins to Enhance your User Interface | TechZoomIn on April 26, 2012 at 8:58 am. Reply #

[...] Feature Your Products With Jquery [...]

by 100 Exclusive jQuery Plugins And Tutorials - Wiki Bus on July 3, 2013 at 8:42 pm. Reply #

Leave your comment

Required.

Required. Not published.

If you have one.