7 replies [Last post]
adrianmak's picture
Offline
Joined: 05/28/2008
Juice: 312
Was this information Helpful?

Like this drupal website
http://sarahkavanaghjewellery.co.uk/necklaces

It build with drupal + ubercart

How multiple images can be show off in product list?
How to implement the thumbnail hovering effect switching a full size image aside in product details.

robives's picture
Offline
Joined: 02/26/2009
Juice: 22
Re: how to implement multiple images of a product........

I think what you are after is the Thickbox module. Once installed, when you click on the thumbnails the full size images are displayed.

TR
TR's picture
Offline
Bug FinderFAQ ModeratorGetting busy with the Ubercode.
Joined: 11/05/2007
Juice: 3424
Re: how to implement multiple images of a product........

Multiple images are automatically shown on the product page. But to get an effect like that jewellery site you will have to add a little custom jQuery code. That site used the jQuery Cycle plugin http://malsup.com/jquery/cycle/.

This is really quite easy to do, once you know jQuery.

<tr>.
adrianmak's picture
Offline
Joined: 05/28/2008
Juice: 312
Re: Re: how to implement multiple images of a product........

I knew the product list is generated from views automatically.
multiple images means a product with multiple images, when you look carefully each of the product.

Add multiple image fields on the product content node type ?
Or put multiple images on a textarea field

sunfish's picture
Offline
Joined: 01/01/2009
Juice: 72
Re: Re: Re: how to implement multiple images of a product.......

I have a product entry that has multiple images. I only want the first image displayed on the product list but all images displayed(one at a time) on thickbox or lightbox.
Thickbox only displays the first image. Lightbox also only displays the first image if the CCK display setting is "Group by node id."
I hope this essential feature would be supported in the future.

Docc's picture
Offline
Getting busy with the Ubercode.
Joined: 07/03/2008
Juice: 168
Re: Re: Re: Re: how to implement multiple images of a product...

Just add the theme hook (image field) to your template file and set all image fields to "display:none" except the first one.
Thats one way todo it.

Alaska's picture
Offline
Joined: 10/16/2007
Juice: 1433
Lightbox

If on D6.x and Uber 2.x - B4 then you can try Lightbox 2. It needs to be turned on at admin/store/settings/products/edit/image-widgets.

Have installed Lightbox 2 and Thickbox and they both work with D6.x. It is just a matter of selecting one for your use.

MoSeS's picture
Offline
Joined: 11/24/2009
Juice: 5
Multiple Images Per Product - Amazon Style Variations

I really like what they did in the site you provided as a sample above, and I want to do something similar.

The site I am working on is: http://www.swedjerusalemjudaicagifts.com

In my site the following is required:

* Most products are independent and are sold by themselves.</p>
* A few products come with a case and I need to display the case together with the product itself. For aesthetic reasons both primary and secondary image must be shown. The product is primary and the case is secondary.

I imagine there are number of possible scenarios, however I prefer the Amazon method of handling this and I think its the best. What I would like is the same. To display the secondary image on the same page as the primary image but only smaller. Then when I click the smaller image it will replace the larger image; and the larger image will replace the smaller image. I have to do all of this in node-product.tpl.php

In the example jewelry website provided above the hover method is used to swap out the main image with the image that's being hovered over. However, I would like to have to actually click the secondary image for it to replace the primary image. Also when I click the primary image, currently lightbox comes on and a larger size image is displayed. I would like to keep this feature.

Following are a few question:

1) If I wanted to use different node-product.tpl.php templates for single image nodes, and multiple image nodes depending on how many images per product I had how could I do that?

2) Can someone please explain the steps, or provide some code I can use for swapping out images? Clicking secondary, replace primary, and clicking primary turns on lightbox with larger image. What is the best method? Using jquery? PHP, etc.? Or, perhaps just guide me in the right direction.

3) Should I be using a module for this? How do I use a module together with jquery? Are there any example modules of this?

Thanks for your help.