How to display product image gallery in any phtml file?

Question

I Need to display product image gallery to my custom .phtml file so I can display it anywhere. I tried to get block using below code

$block = $objectManager->create('\Magento\Catalog\Block\Product\View\Gallery');

But then some jquery error comes. like "setoptions" not defined.

Please give me a perfect solution for this.

Answer 1

Please check with below url -

first you need create you own module in magento 2 (you can search in google) , in ibnab we created extension with name Ibnab_CloudZoomy , Magento 2 system use the Block Magento\Catalog\Block\Product\View\Gallery inside Magento_Catalog Module , and if you go to vendor/magento/module-catalog/view/frontend/layout/catalog_product_view.xml you can find the related template of this block :

<container name="product.info.media" htmlTag="div" htmlClass="product media" after="product.info.main">
            <block class="Magento\Catalog\Block\Product\View\Gallery" name="product.info.media.image" template="product/view/gallery.phtml"/>
        </container>

Yes we rewrite this block and push our custom template , the easy technique is to use (app/code/Ibnab/CloudZoomy/etc/frontend/di.xml) :

Yeah now we can create our own block class and push own template , you can copy past Magento\Catalog\Block\Product\View\Gallery inside Ibnab\CloudZoomy\Block\Product\View\Gallery and add attribute :

protected $_template = 'Ibnab_CloudZoomy::product/view/gallery.phtml';

Now the block system is rewrited and related to our template , we can customise function of block or content of template , of create template inside :

app/code/Ibnab/CloudZoomy/view/frontend/templates/product/view/gallery.phtml

you can get content of this template from original template in vendor/magento/module-catalog/view/frontend/templates/product/view/gallery.phtml . I cloud zoom extesnion we use the file cloud-zoom.1.0.2.js we added to path app/code/Ibnab/CloudZoomy/view/frontend/web/js/cloud-zoom.1.0.2.js and we pushed inside requirejs-config.js in path app/code/Ibnab/CloudZoomy/view/frontend/requirejs-config.js

var config = {
    map: {
        '*': {
          ibnabzoom:       'Ibnab_CloudZoomy/js/cloud-zoom.1.0.2'
        }
    }
}

Yes for using in gallery.phtml :

<?php 
$typeGallery = $this->getConfigValue('ibnab_cloud_config/general/enabledisable');
$jsonGallery =  $block->getGalleryImagesJson();
$arrayJsonGallery = json_decode($jsonGallery, true);
?>
<div class="gallery-placeholder">
        <?php 
              if(isset($arrayJsonGallery[0]) && isset($arrayJsonGallery[0]['img']) && isset($arrayJsonGallery[0]['full'])):
        ?>
        <a href="<?php echo $arrayJsonGallery[0]['full']; ?>"  class = 'cloud-zoom' id='zoom1'rel=""  >
            <img src="<?php echo $arrayJsonGallery[0]['img'];?>"  title="<?php echo $arrayJsonGallery[0]['caption']?>"  />
        </a>                
<div class="more-views">
    <ul>
    <?php $i=0 ?>
   <?php foreach ($arrayJsonGallery as $_image): ?>
        <li>
         <a href='<?php echo $_image['full']; ?>' class='cloud-zoom-gallery' title='Thumbnail <?php echo $i=$i+1; ?>'
         rel="useZoom: 'zoom1', smallImage: '<?php echo $_image['img']; ?>' ">
        <img src="<?php echo $_image['thumb']; ?>" alt = "<?php echo $_image['caption'] ?>"/></a>
        </li>
    <?php endforeach; ?>
    </ul>
</div>                    
        <?php 
          endif;
        ?>
</div>
        <script>
            require([
                'jquery',
                'ibnabzoom',
                'mage/apply/main',
                'galleryList'
            ], function ($, ibnabzoom, mage, gallery) {    
            });

        </script>

you can add configuration or anything you want to more customise your image zoom inside product page view .

https://www.ibnab.com/en/blog/magento-2/magento-2-create-quick-custom-product-zoom-cloud-zoom

i hope its very helpful to you.