Author Topic: Rollover image on Category View  (Read 1606 times)

john-doe

  • Jr. Member
  • **
  • Posts: 106
Rollover image on Category View
« on: October 28, 2018, 17:06:28 pm »
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

  • 3rd party VirtueMart Developer
  • Super Hero
  • *
  • Posts: 9222
  • Virtuemart, Joomla & php developer
    • GJC Web Design
  • VirtueMart Version: 3.6.8
Re: Rollover image on Category View
« Reply #1 on: October 28, 2018, 17:30:34 pm »
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 http://www.gjcwebdesign.com
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
http://extensions.joomla.org/profile/profile/details/67210
Contact for any VirtueMart or Joomla development & customisation

john-doe

  • Jr. Member
  • **
  • Posts: 106
Re: Rollover image on Category View
« Reply #2 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):

farketmez99

  • Beginner
  • *
  • Posts: 8
Re: Rollover image on Category View
« Reply #3 on: July 10, 2019, 15:25:12 pm »
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

  • Global Moderator
  • Full Member
  • *
  • Posts: 2453
    • Kreativ Fotografi
  • VirtueMart Version: 3.4.x
Re: Rollover image on Category View
« Reply #4 on: July 10, 2019, 16:01:30 pm »
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
Joomla 3.9.8
Virtuemart 3.4.x
Olympiantheme Hera (customized)

farketmez99

  • Beginner
  • *
  • Posts: 8
Re: Rollover image on Category View
« Reply #5 on: July 16, 2019, 09:55:53 am »
any solution?

Studio 42

  • Contributing Developer
  • Sr. Member
  • *
  • Posts: 4067
  • Joomla & Virtuemart developper
    • Studio 42 - Virtuemart & Joomla extentions
  • VirtueMart Version: 2.6 & 3
Re: Rollover image on Category View
« Reply #6 on: July 17, 2019, 02:49:49 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.

farketmez99

  • Beginner
  • *
  • Posts: 8
Re: Rollover image on Category View
« Reply #7 on: July 17, 2019, 08:19:10 am »
I tried too many process but no solution. I'm using artisteer for template and I need to solution codes

Studio 42

  • Contributing Developer
  • Sr. Member
  • *
  • Posts: 4067
  • Joomla & Virtuemart developper
    • Studio 42 - Virtuemart & Joomla extentions
  • VirtueMart Version: 2.6 & 3
Re: Rollover image on Category View
« Reply #8 on: July 17, 2019, 10:30:04 am »
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

  • Beginner
  • *
  • Posts: 8
Re: Rollover image on Category View
« Reply #9 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

Studio 42

  • Contributing Developer
  • Sr. Member
  • *
  • Posts: 4067
  • Joomla & Virtuemart developper
    • Studio 42 - Virtuemart & Joomla extentions
  • VirtueMart Version: 2.6 & 3
Re: Rollover image on Category View
« Reply #10 on: July 22, 2019, 16:24:07 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.

StefanSTS

  • Global Moderator
  • Full Member
  • *
  • Posts: 520
  • VirtueMart Version: VM 4.2 on Joomla 4.5
Re: Rollover image on Category View
« Reply #11 on: July 22, 2019, 17:55:46 pm »
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

  • UK Web Developer & Consultant
  • Global Moderator
  • Super Hero
  • *
  • Posts: 27595
  • Always on vacation
    • Jenkin Hill Internet
Re: Rollover image on Category View
« Reply #12 on: July 22, 2019, 18:40:08 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

Jenkin Hill Internet,
Lowestoft, Suffolk, UK

Unsolicited PMs/emails will be ignored.

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

Currently using VM 3.6.10.10211 on Joomla 3.9.13 PHP 7.0.33

farketmez99

  • Beginner
  • *
  • Posts: 8
Re: Rollover image on Category View
« Reply #13 on: July 24, 2019, 11:20:10 am »
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

  • Global Moderator
  • Sr. Member
  • *
  • Posts: 3025
  • VirtueMart Version: 3.6.3
Re: Rollover image on Category View
« Reply #14 on: July 24, 2019, 11:51:28 am »
Please consider paying a competent person to resolve this for you.

This is not really a basic css tutorial forum.
regards
A

Joomla 3.9.12
php 7.2