Magento 2 - Dynamic Product Image Magnifier

Question

I want to add magnifier with settings of top position,left position ,width and height to setup and show magnifier accordingly to settings when hovered on image.

Answer 1

Create a plugin

app\code\Vendor\Module\etc\di.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
   <type name="Magento\Catalog\Block\Product\View\Gallery">
      <plugin name="pluginName" type="Vendor\Module\Plugin\Gallery" sortOrder="1" disabled="false" />
    </type>
</config>

app\code\Vendor\Module\Plugin\Gallery.php

<?php
namespace Vendor\Module\Plugin;

class Gallery
{
    protected $_scopeConfig;
    protected $jsonEncoder;
    protected $jsonDecoder;

    public function __construct(
        \Magento\Framework\App\Config\ScopeConfigInterface $scopeConfig,
        \Magento\Framework\Json\EncoderInterface $jsonEncoder,
        \Magento\Framework\Json\DecoderInterface $jsonDecoder
    ){
        $this->_scopeConfig = $scopeConfig;
        $this->jsonEncoder = $jsonEncoder;
        $this->jsonDecoder = $jsonDecoder;
    }

    /**
     * @param \Magento\Catalog\Block\Product\View\Gallery $subject,
     * @param $result
     */
    public function afterGetMagnifier(
        \Magento\Catalog\Block\Product\View\Gallery $subject,
        $result
    ) {
        $top = $this->_scopeConfig->getValue('your/config/pathfortop', \Magento\Store\Model\ScopeInterface::SCOPE_STORE);
        $left = $this->_scopeConfig->getValue('your/config/pathforleft', \Magento\Store\Model\ScopeInterface::SCOPE_STORE);
        $width = $this->_scopeConfig->getValue('your/config/pathforheight', \Magento\Store\Model\ScopeInterface::SCOPE_STORE);
        $height = $this->_scopeConfig->getValue('your/config/pathforwidth', \Magento\Store\Model\ScopeInterface::SCOPE_STORE);

        $resultArry = $this->jsonDecoder->decode($result);

        $resultArry = [
            'top'=> $top,
            'left'=> $left,
            'height'=> $width,
            'width'=> $height
        ];

        return $this->jsonEncoder->encode($resultArry);
    }
}

You can change $top, $left, $height and $width variable value by yours.