News:

Looking for documentation? Take a look on our wiki

Main Menu

Rollover image on Category View

Started by john-doe, October 28, 2018, 17:06:28 PM

Previous topic - Next topic

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


<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)

GJC Web Design
VirtueMart and Joomla Developers - php developers [url="https://www.gjcwebdesign.com"]https://www.gjcwebdesign.com[/url]
VM3 AusPost Shipping Plugin - e-go Shipping Plugin - VM3 Postcode Shipping Plugin - Radius Shipping Plugin - VM3 NZ Post Shipping Plugin - AusPost Estimator
Samport Payment Plugin - EcomMerchant Payment Plugin - ccBill payment Plugin
VM2 Product Lock Extension - VM2 Preconfig Adresses Extension - TaxCloud USA Taxes Plugin - Virtuemart  Product Review Component
[url="https://extensions.joomla.org/profile/profile/details/67210"]https://extensions.joomla.org/profile/profile/details/67210[/url]
Contact for any VirtueMart or Joomla development & customisation

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...

Quote from: john-doe on October 28, 2018, 18:40:36 PM
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
Joomla 3.9.18
Virtuemart 3.4.x
Olympiantheme Hera (customized)
This reflects current status when viewing old post.


Studio 42

Quote from: farketmez99 on July 16, 2019, 09:55:53 AM
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.
Free XML sitemap generator [url="http://shop.st42.fr/en/catalog/products/virtuemart-2-sitemap.htm"]http://shop.st42.fr/en/catalog/products/virtuemart-2-sitemap.htm[/url]  , Free Unused Image cleaner [url="http://shop.st42.fr/en/products/virtuemart-media-folder-clear.htm"]http://shop.st42.fr/en/products/virtuemart-media-folder-clear.htm[/url]
Language Switch in product & category [url="http://shop.st42.fr/en/categories-tools/multi-language-for-virtuemart.htm"]http://shop.st42.fr/en/categories-tools/multi-language-for-virtuemart.htm[/url]
More extentions [url="http://shop.st42.fr/en/"]http://shop.st42.fr/en/[/url]

farketmez99

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

Studio 42

Free XML sitemap generator [url="http://shop.st42.fr/en/catalog/products/virtuemart-2-sitemap.htm"]http://shop.st42.fr/en/catalog/products/virtuemart-2-sitemap.htm[/url]  , Free Unused Image cleaner [url="http://shop.st42.fr/en/products/virtuemart-media-folder-clear.htm"]http://shop.st42.fr/en/products/virtuemart-media-folder-clear.htm[/url]
Language Switch in product & category [url="http://shop.st42.fr/en/categories-tools/multi-language-for-virtuemart.htm"]http://shop.st42.fr/en/categories-tools/multi-language-for-virtuemart.htm[/url]
More extentions [url="http://shop.st42.fr/en/"]http://shop.st42.fr/en/[/url]

farketmez99

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

Studio 42

Quote from: farketmez99 on July 22, 2019, 16:19:44 PM
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.
Free XML sitemap generator [url="http://shop.st42.fr/en/catalog/products/virtuemart-2-sitemap.htm"]http://shop.st42.fr/en/catalog/products/virtuemart-2-sitemap.htm[/url]  , Free Unused Image cleaner [url="http://shop.st42.fr/en/products/virtuemart-media-folder-clear.htm"]http://shop.st42.fr/en/products/virtuemart-media-folder-clear.htm[/url]
Language Switch in product & category [url="http://shop.st42.fr/en/categories-tools/multi-language-for-virtuemart.htm"]http://shop.st42.fr/en/categories-tools/multi-language-for-virtuemart.htm[/url]
More extentions [url="http://shop.st42.fr/en/"]http://shop.st42.fr/en/[/url]

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
--
Stefan Schumacher
www.jooglies.com - VirtueMart Invoice Layouts

Please use only stable versions with even numbers for your live shop! Use Alpha versions only if you know what risk you are taking.

jenkinhill

Quote from: StefanSTS on July 22, 2019, 17:55:46 PM
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.
Kelvyn
Lowestoft, Suffolk, UK

Retired from forum life November 2023

Please mention your VirtueMart, Joomla and PHP versions when asking a question in this forum

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.
Regards
A

Joomla 3.10.11
php 8.0