Author Topic: Rollover images for products  (Read 9341 times)

sitecenter

  • Beginner
  • *
  • Posts: 11
Rollover images for products
« on: October 01, 2010, 10:16:50 am »
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

  • 3rd party VirtueMart Developer
  • Jr. Member
  • *
  • Posts: 467
    • 2in1-online | Software, Mac, PC, Netzwerk, Drucker, Pad, Display
  • VirtueMart Version: Virtuemart 3.2.6
Re: Rollover images for products
« Reply #1 on: October 01, 2010, 11:01:21 am »
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

  • Beginner
  • *
  • Posts: 11
Re: Rollover images for products
« Reply #2 on: October 01, 2010, 11:11:03 am »
above there is something in Flash
but is the product-image also in flash, with the thumbnails for different colors?

franzpeter

  • 3rd party VirtueMart Developer
  • Jr. Member
  • *
  • Posts: 467
    • 2in1-online | Software, Mac, PC, Netzwerk, Drucker, Pad, Display
  • VirtueMart Version: Virtuemart 3.2.6
Re: Rollover images for products
« Reply #3 on: October 01, 2010, 15:09:30 pm »
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

  • Beginner
  • *
  • Posts: 11
Re: Rollover images for products
« Reply #4 on: October 01, 2010, 19:13:06 pm »
yes i mean something like that
does it exist for virtuemart?
where can i find it?

Seiko

  • Jr. Member
  • **
  • Posts: 115
    • My finished site
Re: Rollover images for products
« Reply #5 on: October 02, 2010, 06:18:27 am »
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]
Do you have questions and need some help for your Virtuemart project?
I'm ready to help you. Hire Me on oDesk

sitecenter

  • Beginner
  • *
  • Posts: 11
Re: Rollover images for products
« Reply #6 on: October 03, 2010, 16:15:15 pm »
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

  • Jr. Member
  • **
  • Posts: 115
    • My finished site
Re: Rollover images for products
« Reply #7 on: October 03, 2010, 16:27:18 pm »
Have you added additional images to the product?
Do you have questions and need some help for your Virtuemart project?
I'm ready to help you. Hire Me on oDesk

sitecenter

  • Beginner
  • *
  • Posts: 11
Re: Rollover images for products
« Reply #8 on: October 03, 2010, 16:36:18 pm »
YES
and thumbnail is also online

sitecenter

  • Beginner
  • *
  • Posts: 11
Re: Rollover images for products
« Reply #9 on: October 03, 2010, 16:41:44 pm »
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

  • Jr. Member
  • **
  • Posts: 115
    • My finished site
Re: Rollover images for products
« Reply #10 on: October 03, 2010, 23:44:10 pm »
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.
Do you have questions and need some help for your Virtuemart project?
I'm ready to help you. Hire Me on oDesk

sitecenter

  • Beginner
  • *
  • Posts: 11
Re: Rollover images for products
« Reply #11 on: October 04, 2010, 10:04:12 am »
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

  • Jr. Member
  • **
  • Posts: 115
    • My finished site
Re: Rollover images for products
« Reply #12 on: October 04, 2010, 18:16:02 pm »
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);
Do you have questions and need some help for your Virtuemart project?
I'm ready to help you. Hire Me on oDesk

sitecenter

  • Beginner
  • *
  • Posts: 11
Re: Rollover images for products
« Reply #13 on: October 04, 2010, 22:47:13 pm »
The thumbnail is ok now, but the rollover doesn't work :-(

what is wrong?
javascript?
or...

Seiko

  • Jr. Member
  • **
  • Posts: 115
    • My finished site
Re: Rollover images for products
« Reply #14 on: October 05, 2010, 06:40:19 am »
I found out the thumbnailviewer2.js has been completely rewritten recently.
I attach the old one.

[attachment cleanup by admin]
Do you have questions and need some help for your Virtuemart project?
I'm ready to help you. Hire Me on oDesk