Magento 2 is coming with great zoom effect in product page view , in this tutorial we will try to  explain how you can customize the zoom behavior in product page , 

Ok , first you need create you own module in magento 2 (you can saerch 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) :

 
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
         <preference for="Magento\Catalog\Block\Product\View\Gallery" type="Ibnab\CloudZoomy\Block\Product\View\Gallery"/>
</config>
 

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 customize your image zoom inside product page view .

You can explore our free extension Magento 2 Quick Cloud Zoom