VirtueMart Forum

VirtueMart 1.1.x [ Old version - no longer supported ] => Themes & Layout Problems and Customization VM 1.1 => Topic started by: sitecenter on October 01, 2010, 10:16:50 am

Title: Rollover images for products
Post by: sitecenter 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 (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
Title: Re: Rollover images for products
Post by: franzpeter 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.
Title: Re: Rollover images for products
Post by: sitecenter 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?
Title: Re: Rollover images for products
Post by: franzpeter 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.
Title: Re: Rollover images for products
Post by: sitecenter on October 01, 2010, 19:13:06 pm
yes i mean something like that
does it exist for virtuemart?
where can i find it?
Title: Re: Rollover images for products
Post by: Seiko 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]
Title: Re: Rollover images for products
Post by: sitecenter 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 (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 (http://www.eksbrand.eu/nl/e-shop.html?page=shop.product_details&flypage=flypage.tpl&product_id=1&category_id=1)

Thanks
Els
Title: Re: Rollover images for products
Post by: Seiko on October 03, 2010, 16:27:18 pm
Have you added additional images to the product?
Title: Re: Rollover images for products
Post by: sitecenter on October 03, 2010, 16:36:18 pm
YES
and thumbnail is also online
Title: Re: Rollover images for products
Post by: sitecenter 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.
Title: Re: Rollover images for products
Post by: Seiko 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.
Title: Re: Rollover images for products
Post by: sitecenter 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 (http://www.eksbrand.eu/nl/e-shop.html?page=shop.product_details&flypage=flypage.tpl&product_id=1&category_id=1)
Title: Re: Rollover images for products
Post by: Seiko 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);
Title: Re: Rollover images for products
Post by: sitecenter on October 04, 2010, 22:47:13 pm
The thumbnail is ok now, but the rollover doesn't work :-(

what is wrong?
javascript?
or...
Title: Re: Rollover images for products
Post by: Seiko 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]
Title: Re: Rollover images for products
Post by: sitecenter on October 05, 2010, 09:45:13 am
now i get this error

Foutdetails webpagina

Gebruikersagent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET CLR 3.0.30618; Media Center PC 5.0; SLCC1; InfoPath.2; Tablet PC 2.0)
Tijdstempel: Tue, 5 Oct 2010 07:44:29 UTC


Bericht: Object vereist
Regel: 30
Teken: 1
Code: 0
URI: http://www.eksbrand.eu/components/com_virtuemart/js/thumbnailviewer2.js


Bericht: Object vereist
Regel: 30
Teken: 1
Code: 0
URI: http://www.eksbrand.eu/components/com_virtuemart/js/thumbnailviewer2.js


Bericht: Object vereist
Regel: 30
Teken: 1
Code: 0
URI: http://www.eksbrand.eu/components/com_virtuemart/js/thumbnailviewer2.js


Bericht: Object vereist
Regel: 30
Teken: 1
Code: 0
URI: http://www.eksbrand.eu/components/com_virtuemart/js/thumbnailviewer2.js


Bericht: Object vereist
Regel: 30
Teken: 1
Code: 0
URI: http://www.eksbrand.eu/components/com_virtuemart/js/thumbnailviewer2.js


Bericht: Object vereist
Regel: 30
Teken: 1
Code: 0
URI: http://www.eksbrand.eu/components/com_virtuemart/js/thumbnailviewer2.js

Title: Re: Rollover images for products
Post by: Seiko on October 05, 2010, 17:41:05 pm
Your main thumbnail image contains 'rev=targetdiv:loadarea', it should be just 'rev=loadarea'.
Check your flypage.tpl.php file.
Title: Re: Rollover images for products
Post by: sitecenter on October 05, 2010, 22:39:53 pm
Thank you very much for helping with the code. It's working now :-)

Where do i have to change that the thumbnails are standing next to eachother instead of under eachother as on your website with the flowers?
Title: Re: Rollover images for products
Post by: Seiko on October 06, 2010, 01:31:19 am
You should use Firebug or similar tool to identify where you need to change the stylings.
Title: Re: Rollover images for products
Post by: Shapes on November 10, 2010, 15:19:51 pm
Hi Seiko,

Thanks for this workaround !!!

I've been looking for hours on google to do this, and now after a bit of struggling in all the thread's codes thanks to you it works !

Best regards,
David aka Shapes
Title: Re: Rollover images for products
Post by: sake1 on February 17, 2011, 23:26:12 pm
Hi

My question is how to set up a big picture rollover to have a specific size such as 254 but the true size would be large, eg 600 pixels

In the standard version of Virtuemart does not allow to have more than two sizes of photos.
I need four widths
1. product list 120 px
2. Detailed description, main picture of the product 254 px
3. thumbnail photos as additional pictures 78 px
4. Photo of full size eg 600 px

Help