Product Image Zoom

[zipurman]

From what I can see in the code ...

Sorry about that. I edited the code above.

The change is actually just adding a > in the .pi-gallery > a so it only affects the image directly inside the gallery and not the additional thumbs.

[ReneH4]

I would like to play with this hook for catagory images.

Like all images that show in eg. https://mysite.com/index.php?cPath=35_94

What would be the location of the hook in this case?
If I have an answer to that I know where to start,

Thanks Zip!

[zipurman]

I would like to play with this hook for catagory images.

You could add a hook to includes/hooks/shop/index/imageZoom.php

Code: Select all

    class hook_shop_index_imageZoom {
        function listen_injectBodyEnd() {
            $magnify = 3;
            $sitepath = DIR_WS_CATALOG;
            $script = <<<script
<script src="{$sitepath}ext/zoom/jquery.zoom.js"></script>
<script>
$(document).ready(function(){
  $('.card > a')
    .wrap('<span style="display:inline-block"></span>')
    .css('display', 'block')
    .parent()
    .zoom({magnify: {$magnify}});
  }); 
</script>

script;
            return $script;
        }
    }
    

I just changed the target above to .card > a which will affect all category and product images on the index pages.


You could change that to .cm-in-category-listing .card > a if you want to limit to just the categories

[ReneH4]

Thanks Preston, I will give it a try the coming days, and report back.

[ReneH4]

I have this installed with class

Code: Select all

  $('.cm-in-category-listing .card > a')

now.

It works as expected, very nice.

One thing that I would like to happen is like (without this hook) when klicking the image the custome is directed to the correct catagory.

Note: Not all my category images have the same size, so the zoom level is different for all categories.

It can be checked at honda4parts.nl.

By the way, I have two hooks, because I would like a different zoom level for my products than I want to have for the catagory images.

[zipurman]

One thing that I would like to happen is like (without this hook) when klicking the image the custome is directed to the correct catagory.

You could add this to the category javascript just before the closing /script tag

Code: Select all

 $(".card.is-category").click(function(){
        window.location.href = $(this).find("a.card-link").attr("href");
    });

Note: Not all my category images have the same size, so the zoom level is different for all categories.

You'd have to edit the code right above the $magnify = 3; and do something to test which category you are in and then change the magnify level based on that logic. Another option is to have the javascript load the first category image and based on its size, it could set the zoom level to something.

By the way, I have two hooks, because I would like a different zoom level for my products than I want to have for the catagory images.

You could move the hooks into the same file under siteWide and then test the basename($_SERVER['SCRIPT_NAME']) to see if you are in "index.php" or "product_info.php" and then have it act accordingly. Or keep the 2 hooks to avoid more complex code

[ReneH4]

Added the extra two lines to the code, that worked, thanks.

I am going to see how my customers experience the change, before changing more. The sceen can be experienced as "restless". Just waiting and see. It's a change for the good IMHO.