0

The zoom_in and zoom_out buttons are not working in the product pop-up gallery, however, while clicking the image, the image gets zoomed on the first double click and gets zoomed out on the second double click. any suggestion for the solution? 2

5
  • Did you ever come up with a cause? I've been seeing this happen intermittently between different themes.
    – Eirik
    Mar 26 at 19:28
  • 1
    @Eirik, for me it was because the values were not fetched in the gallery.phtml from view.xml. I have provided the values in json in gallery.phtml and it worked. Mar 27 at 9:08
  • @ReshadZazai I am facing the same problem, Can you share the gallery.phtml file code? May 31 at 10:46
  • @ReshadZazai Brother! please guide me on this, how you fixed this problem? Jun 1 at 7:28
  • 1
    @FaisalSheikh I have passed the options in json for "magnifierOpts": { "enabled": true, "fullscreenzoom":20, "mode": "outside", "eventType": "hover" }, Jun 1 at 8:28
1

/**
 * Product media data template
 *
 * @var $block \Magento\Catalog\Block\Product\View\Gallery
 */
?>

<?php
$images = $block->getGalleryImages()->getItems();
$mainImage = current(array_filter($images, function ($img) use ($block) {
    return $block->isMainImage($img);
}));

if (!empty($images) && empty($mainImage)) {
    $mainImage = $block->getGalleryImages()->getFirstItem();
}

$helper = $block->getData('imageHelper');
$mainImageData = $mainImage ?
    $mainImage->getData('medium_image_url') :
    $helper->getDefaultPlaceholderUrl('image');

?>

<div class="gallery-placeholder _block-content-loading" data-gallery-role="gallery-placeholder">
    <img
        alt="main product photo"
        class="gallery-placeholder__image"
        src="<?= /* @noEscape */ $mainImageData ?>"
    />
</div>

<script type="text/x-magento-init">
    {
        "[data-gallery-role=gallery-placeholder]": {
            "mage/gallery/gallery": {
                "mixins":["magnifier/magnify"],
                "magnifierOpts": {
                "enabled": true,
                "fullscreenzoom":20,
                "mode": "outside",
                "eventType": "hover"
                },
                "data": <?= /* @noEscape */ $block->getGalleryImagesJson() ?>,
                "options": <?= /* @noEscape */ $block->getGalleryOptions()->getOptionsJson() ?>,
                "fullscreen": <?= /* @noEscape */ $block->getGalleryOptions()->getFSOptionsJson() ?>,
                 "breakpoints": <?= /* @noEscape */ $block->getBreakpoints() ?>
            }
        }
    }
</script>
4

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.