Magic Zoom on Product Listing Overview

  • Posts: 65
  • Thank you received: 3
7 years 1 month ago #290153

-- url of the page with the problem -- : www.ginmacher.de
-- HikaShop version -- : 3.3.0 Business Version
-- Joomla version -- : 3.7.2
-- PHP version -- : 7.7
-- Browser(s) name and version -- : Firefox
-- Error-message(debug-mod must be tuned on) -- : Magic Zoom on Product Listing

Hi,

I already read a lot of your posts but sometimes they are too old (code changed) or the solution does not work out really good.

How can I use the MagicZoom component on the product listing overview. That just you mouse over on the picture and then it zooms in. No new window etc.

You can check the shop here: www.ginmacher.de/index.php/gin-shop

I tried this in the view listing_img_title (procuct) in my template (removed the other code), but the mouseover is not what I was searching for :o) Not working out for cusomers with opening all the time a new window.

echo $this->image->display(@$this->row->file_path,true,$this->escape($this->row->file_name), '' , ' onmouseover="SqueezeBox.fromElement(this,{parse: \'rel\'});return false;"' , $this->image->main_thumbnail_x,  $this->image->main_thumbnail_y);

I also tried to figure out this post, but the code brings a syntax-error when I use it:
www.hikashop.com/support/forum/product-c...on-listing-page.html

I already installed MagicZoom as a component.

Thanks a lot for your help! :)

Last edit: 7 years 1 month ago by ginmacher.

Please Log in or Create an account to join the conversation.

  • Posts: 83778
  • Thank you received: 13565
  • MODERATOR
7 years 1 month ago #290163

Hi,

What you're trying to do is different from what the other threads are doing.
What these threads do is when you hover/click on the image, it opens a popup with the full size image.
If you want a zoom hover effect similar to what we have on our demo website ( demo.hikashop.com/index.php/en/hikashop/...sting/display-in-div ), it will require adding a bit of CSS or javascript on the page

For a start:
img.hikashop_product_listing_image {
width: 70%;
height: 70%;
}
img.hikashop_product_listing_image:hover {
width: 100%;
height: 100%;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}

I don't see how magiczoom would help with that as magic zoom is mainly to have a zoom system on the product page.
Now you might want to contact the support of magic zoom. Maybe they have some way to do it with their solution.

However, as I understand it, if you know CSS, then you should be able to do it.

Please Log in or Create an account to join the conversation.

  • Posts: 65
  • Thank you received: 3
7 years 1 month ago #290183

Hello Nicolas,

works for far!! thanks for the quick answer. And what would it be if I wanted to have a small popup (size of popup changeable) when the customer clicks on the picture? I've seen this in the post mentioned above, but here it's with hover effect. What do I need to change to have it via click in the view of product listing?

Thanks again!

Please Log in or Create an account to join the conversation.

  • Posts: 4820
  • Thank you received: 654
  • MODERATOR
7 years 1 month ago #290239

Hello,

For have this on your product listing, you have to custom the listing_div (or listing_list or listing_tab) to add javascript.
You can analyze the javascript code around image in the product page,more precisely in product / show_block_img view like show on this screenshot :



Note : You can learn more about view customization, here .
Hope this will help you to get what you asked.

Regards

Last edit: 7 years 1 month ago by Philip.

Please Log in or Create an account to join the conversation.

Time to create page: 0.062 seconds
Powered by Kunena Forum