Rollover image on Category View

[john-doe]

Greetings.

I'm trying to make a rollover image on the category view, since i could not find an extension that can do that on VM3.

I was trying to at least make that second image visible so i can make the rollover command.

I'm around the moment on the sublayout override based on sublayouts/products.php around the line 88 where that image is loaded

Code: [Select]

<div class="vm-product-media-container">

<a title="<?php echo $product->product_name ?>" href="<?php echo $product->link.$ItemidStr; ?>">
<?php
//echo $product->images[0]->displayMediaThumb('class="browseProductImage"', false);
       echo $product->images[0]->displayMediaThumb('class="browseProductImage"', false);
       //echo $product->customfieldsSorted->display->displayMediaThumb('class="browseProductImage"', false);
      
     
       ?>
</a>
                         
</div>

I was trying to load an image custom field since the product array on the only calls the first image since "supposedly" only has the main image. I loaded the array and tried to find the image but i don't know why the display media thumb does not load the image, so i can arrange as html/php string the rollover image.

I would like any help you can provide me.

Thanks in advance.

[GJC Web Design]

yes -- in the $product is only the main image -

ooo -- look what I found in   components\com_virtuemart\views\category\view.html.php

$imgAmount = VmConfig::get('prodimg_browse',1);

if I change this to

$imgAmount = VmConfig::get('prodimg_browse',2);

and in products.php

echo $product->images[0]->displayMediaThumb('class="browseProductImage"', false);
                  if(isset($product->images[1])){
                  echo $product->images[1]->displayMediaThumb('class="browseProductImage"', false);
                  }

I get ta da...

I see no setting in config for this -- maybe a work in progress?

adding  prodimg_browse=2  works ( in administrator\components\com_virtuemart\virtuemart.cfg and resave config)

[john-doe]

Wow thanks GJC!

Now that i have the half related to the images i have to solve the rollover.
Soon i'll post the rest of the solution (if i find one):

[farketmez99]

It's not working. I did all of you write and first/second image show together. this is not roll over on hover

[Jörgen]

That was never promised...

Wow thanks GJC!

Now that i have the half related to the images i have to solve the rollover.
Soon i'll post the rest of the solution (if i find one):

Jörgen @ Kreativ Fotografi

[farketmez99]

any solution?

[Studio 42]

any solution?

Use CSS or javascript to hide/show the secondary image. This is not virtuemart related but template
In some template you see product short desc, price, cart or name ..... This is a feature that should not be in core.
Only the prodimg_browse setting  should be visible, so you can set it depending your needs.

[farketmez99]

I tried too many process but no solution. I'm using artisteer for template and I need to solution codes

[Studio 42]

very simple, no CSS effect https://www.tutorialrepublic.com/faq/how-to-change-image-on-hover-with-css.php
Or http://css-workshop.com/hover-box-text-over-images-on-hover-and-more/
Or google "show second image on hover css"
Of course you need to adapt the code

[farketmez99]

these is not solution. It is working for content but you can not use div for photos in virtuemart

[Studio 42]

these is not solution. It is working for content but you can not use div for photos in virtuemart

You can, but you dont know how to do.
Combine GJC Web Design changes and the right CSS and it should work.

[StefanSTS]

Let me explain it like this:
You position the images absolute.
On hover you make the top image disappear and let the other one show.
This is pure CSS.
If you don't know what I am talking about, take CSS course on the net, you will learn these basics at day 2.

Maybe if you have learnd the basics of CSS then, you also throw away Artisteer for VirtueMart templates. Simply the thought of that horrifies me.

Honestly
Stefan

[jenkinhill]

throw away Artisteer for VirtueMart templates. Simply the thought of that horrifies me.

I never noticed that someone is using crapisteer!  Definitely throw it away and use properly formed templates.

[farketmez99]

I resolve some css. I need just secondary image code, but I couldnt find it. my page is: http://foxybeautyturkey.com/gels/creme .. hover image working but I can not put secondary image

[AH]

Please consider paying a competent person to resolve this for you.

This is not really a basic css tutorial forum.