Rollover images for products

[sitecenter]

Does anybody know how to do this in Virtuemart?
http://www.scoyco.com/english/displaypro.php?proID=33
One large image and several little ones by a product, visible in one block and that works with rollover?

Does is exist in virtuemart with an extension or hack.

Thanks
Els

[franzpeter]

Seems to be made with flash and it did take a while on my browser until it came up. I did see a spinning while for about 15 seconds.

[sitecenter]

above there is something in Flash
but is the product-image also in flash, with the thumbnails for different colors?

[franzpeter]

Do You mean something like this:
http://www.vontum.de/herren/details/1008/2/herren/herrenschal.html

But it does not work as smooth as in the page you provided. I think the page you mentioned does use some javascript for the product images. It works much smoother there. Switch off Javascript in your browser and you can see that it does not work any more. So I think they use javascript for that.

[sitecenter]

yes i mean something like that
does it exist for virtuemart?
where can i find it?

[Seiko]

Do you want something like the following?
http://eldritchwood.com/shop2/index.php?page=shop.product_details&flypage=flypage.tpl&product_id=70&category_id=11&option=com_virtuemart&Itemid=58

Then gen the script (thumbnailviewer2.js) from: http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm and place it somewhere in your site.
You have to configure to read the script also.

Then use the attached zip file (they are based on VM 1.1.3).


[attachment cleanup by admin]

[sitecenter]

Thanks for the information.
We have tried all you said but have still some problems.
Can you help us?
http://www.sitecenter.be/flypage.zip

In the file at the link you can find all the files we changed.

Can you tell me what to do, because the rollover is still not working?

http://www.eksbrand.eu/nl/e-shop.html?page=shop.product_details&flypage=flypage.tpl&product_id=1&category_id=1

Thanks
Els

[Seiko]

Have you added additional images to the product?

[sitecenter]

YES
and thumbnail is also online

[sitecenter]

You can see a strange URL on the second thumbnailimages with the red cross, why is that, or where do i change it?

That is why it doesn't work i think, the second thumbnail has a wrong URL, why i do not know :-(

http://www.eksbrand.eu/http://www.eksbrand.eu/components/com_virtuemart/shop_image/product/resized/MX477_HELM_79x120.jpg

When you let http://www.eksbrand.eu in the beginning of the URL away, the picture is shown.

[Seiko]

Change the vmlistAdditionalImages2 function in theme.php file to the following:

Code: [Select]

function vmlistAdditionalImages2( $product_id, $images, $title='', $limit=1000 ) {
global $sess;
$html = '';
$i = 0;
foreach( $images as $image ) {

if( $this->get_cfg('useLightBoxImages', 1 )) {
  $thumbtag = str_replace('product', 'product/resized', $image->file_url);
  $thumbtag = str_replace('.jpg', '_'.$image->file_image_thumb_height.'x'.$image->file_image_thumb_width.'.jpg', $tagfile);
  $thumbtag = str_replace('.JPG', '_'.$image->file_image_thumb_height.'x'.$image->file_image_thumb_width.'.JPG', $tagfile);
  $html .= '<a href="'.$image->file_url.' "rel="enlargeimage::mouseover" rev="loadarea" title="'.$title.'"><img src="'.$thumbtag.'"></a>';
}
else {
        $thumbtag = ps_product::image_tag( $image->file_name, 'class="browseProductImage"', 1, 'product', $image->file_image_thumb_width, $image->file_image_thumb_height );
        $fulladdress = $sess->url( 'index2.php?page=shop.view_images&amp;image_id='.$image->file_id.'&amp;product_id='.$product_id.'&amp;pop=1' );

$html .= vmPopupLink( $fulladdress, $thumbtag, 640, 550 );
}
$html .= ' ';
if( ++$i > $limit ) break;
}
return $html;
}

Let me know if this fixes the problem.

[sitecenter]

the problem for the URL is fixed.
But the rollover isn't fixed.
i still get the square with the red cross, like the thumbnail does nog exists

http://www.eksbrand.eu/nl/e-shop.html?page=shop.product_details&flypage=flypage.tpl&product_id=1&category_id=1

[Seiko]

Oh I see my mistake.
Change

Code: [Select]

  $thumbtag = str_replace('.jpg', '_'.$image->file_image_thumb_height.'x'.$image->file_image_thumb_width.'.jpg', $tagfile);
  $thumbtag = str_replace('.JPG', '_'.$image->file_image_thumb_height.'x'.$image->file_image_thumb_width.'.JPG', $tagfile);

to:

Code: [Select]

  $thumbtag = str_replace('.jpg', '_'.$image->file_image_thumb_height.'x'.$image->file_image_thumb_width.'.jpg', $thumbtag);
  $thumbtag = str_replace('.JPG', '_'.$image->file_image_thumb_height.'x'.$image->file_image_thumb_width.'.JPG', $thumbtag);


[sitecenter]

The thumbnail is ok now, but the rollover doesn't work :-(

what is wrong?
javascript?
or...

[Seiko]

I found out the thumbnailviewer2.js has been completely rewritten recently.
I attach the old one.

[attachment cleanup by admin]