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>