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 thoughts on “Feature your products with Jquery

  1. 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.

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

  3. 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!

  4. 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.

  5. 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.

  6. Hi Balaji,

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

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

Comments are closed.