Skip to content

Magento 1 with Fotorama

I integrated in M1.9 Fotorama with 2 new buttons for zoom in and zoom out for the image when the fullscreen is opened. What I want to do is to open the full screen popup when I click on the main image. On desktop everything works fine but on mobile it works only if I press on that icon “fotorama__fullscreen-icon” or sometimes when I press chaotically on the main image. Do you have any fixes for this problem? Thank you!

<?php
    $_product = $this->getProduct();
?>
<?php if ($_product->getImage() != 'no_selection' && $_product->getImage()): ?>
    <div class="fotorama" data-click="false"  data-arrows="true" data-nav="thumbs" data-width="100%"  data-thumbwidth="88" data-thumbheight="88"  data-allowfullscreen="true" data-fit="contain" data-transition="crossfade">
        <?php foreach ($_product->getMediaGalleryImages() as $_image): ?>
            <img src="<?php echo $_image->getUrl(); ?>" alt="<?php echo $_image->getLabel(); ?>" />
        <?php endforeach; ?>
    </div>
<?php endif; ?>


<script type="text/javascript">
    jQuery(document).ready(function($) {
        jQuery('.fotorama').fotorama();
        var scale = 1;
        $('.fotorama').on('fotorama:ready', function (e, fotorama) {
            $('.fotorama').on('click', '.fotorama__stage__frame', function() {
                fotorama.requestFullScreen(); 
                console.log('click') 
            });
        }).fotorama(); 
        
        $('.fotorama').on('fotorama:fullscreenenter', function() {
            var zoomControlsHtml = `
                <div class="zoom-controls">
                    <span class="zoom-in">+</span>
                    <span class="zoom-out">-</span>
                </div>
            `;
            $('.fotorama--fullscreen').append(zoomControlsHtml);
        });

        $('.fotorama').on('fotorama:fullscreenexit', function() {
            $('.zoom-controls').remove();
            $('.fotorama--fullscreen .fotorama__stage__frame.fotorama__active .fotorama__img').css('transform', 'scale(1)');
        });

        $('.catalog-product-view').on('click', '.zoom-in', function() {
            scale += 0.5; 
            $('.fotorama--fullscreen .fotorama__stage__frame.fotorama__active .fotorama__img').css('transform', 'scale(' + scale + ')');
        });
        $('.catalog-product-view').on('click', '.zoom-out', function() {
            scale = Math.max(1, scale - 0.5);
            $('.fotorama--fullscreen .fotorama__stage__frame.fotorama__active .fotorama__img').css('transform', 'scale(' + scale + ')');
        });
        
    });
</script>