6

I have modified as follows

<var name="magnifier">
            <var name="fullscreenzoom">2</var>  <!-- Zoom for fullscreen (integer)-->
            <var name="top"></var> <!-- Top position of magnifier -->
            <var name="left"></var> <!-- Left position of magnifier -->
            <var name="width">150</var> <!-- Width of magnifier block -->
            <var name="height">150</var> <!-- Height of magnifier block -->
            <var name="eventType">hover</var> <!-- Action that atcivates zoom (hover/click) -->
            <var name="enabled">true</var> <!-- Turn on/off magnifier (true/false) -->
        </var>

It's working fine as expected. But I want smaller lens and bigger preview.

I tried to modify .magnify-lens class and .magnifier-preview class but could not come up with fine tuning.

2

This is my settings I achieve smaller lens and bigger preview:

Yourvendor/YourTheme/view/etc.xml

<var name="magnifier">
    <var name="fullscreenzoom">2</var>  <!-- Zoom for fullscreen (integer)-->
    <var name="top">3</var> <!-- Top position of magnifier -->
    <var name="left">284</var> <!-- Left position of magnifier -->
    <var name="width">114</var> <!-- Width of magnifier block -->
    <var name="height">114</var> <!-- Height of magnifier block -->
    <var name="eventType">hover</var> <!-- Action that atcivates zoom (hover/click) -->
    <var name="enabled">true</var> <!-- Turn on/off magnifier (true/false) -->
    <var name="mode">outside</var> <!-- Zoom type (outside/inside) -->
</var>

and css to get proper zoom. 3 in example is big.

.magnifier-preview:not(.hidden) {
    zoom: 3;
}

Instead of using CSS better add proper image - bigger and with better resolution. This will give you nice zoom and bigger image on magnifier.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.