Drupal 6: How do I create a Product Item Gallery

Question

I am creating a site that includes many products, of each of those products I could have up to 10 images.

What I need to do is this: 1: Image #1 - loaded (large) 2: Create thumbnails of each of the uploaded images 3: Place thumbnails under large image 4: When user clicks on a thumbnail it will replace the large image with the one selected

Any help would be great!!!

Answer 1

I know that it is quite a learning curve at the beginning, but I think you should really check out CCK and views. You have to invest some time, but it is well worth it.

In your particular case, you should probably add an imagefield to your product, add imagecache rules to resize them and create a specialized view for you product that displays the images as you described.

Answer 2

To change images dynamically without a page refresh will require some javascript. I would recommend using jQuery as it's a quasi-standard, ships with Drupal 6 and is very easy to use.

On each of the thumbnails you would add an onClick even that would update the src attribute of the large image. The browser will take care of pulling in the new large image for you.

The followng jQuery-based function will update an img tag with id "large" to use newPath to replace its current src value:

function updateLarge( newPath ) {
   $("#large").attr("src", newPath);
}

Also, if you are creating an eCommerce site you should consider using something like Ubercart. You can use CCK to add fields to Ubercart products as per FlorianH's solution, but you also get things like a shopping cart and checkout for free.

Answer 3

Faul akta question jottoshob