Skip to content

Is it possible to use magnifier widget without using gallery widget?

I have added an image section on a custom page, where I want to add the magnification on hover functionality that Magento provides on product details page.
I followed the devdocs documentation for Magnifier and it is throwing error as it seems it requires values mentioned on the Gallery widget documentation as well.

The only usage I found was in file

vendor/magento/module-catalog/view/frontend/templates/product/view/gallery.phtml

Is there any way we can use the magnifier widget without using the gallery widget ?
I have created a custom section , and added magnifier like this

<div class='preview-media'>
    <?php foreach($viewModel->getMediaGalleryImages($childProduct->getId()) as $img): ?>
        <div class='preview-image-wrapper' data-mage-init='{
            "magnifier/magnify":{
                "magnifierOpts":{
                    "enabled":true
                }
            }
        }'>
            <img src="<?= $img ?>" alt="product main photo" class="gallery-placeholder preview-image" height="300px" width="200px" />
        </div>
    <?php endforeach; ?>
</div>

If it is possible to make this work, what changes are required to be done here ?