How to open fotorama fullscreen mode by click on main image?

Question

I'm using fotorama js plugin for product gallery. How to turn on fullscreen mode when clicking on main image (not thumbnails)? I want to allow user to open fullscreen mode by click on image instead fullscreen icon on right top corner.

This answer is not working for me: https://stackoverflow.com/a/19064471/4680550

score 9 · Accepted Answer · answered Feb 28 '17 at 08:37

9

After hours of looking for solution I finally found it. Just make fullscreen icon transparent, full height and full width to cover main image:

.fotorama__fullscreen-icon {
    background: url('../img/bg.png') no-repeat scroll 0 0 rgba(0, 0, 0, 0) !important;
    width: 100% !important;
    height: 100% !important;
    right: 0 !important;
    top: 0 !important;
    z-index: 10 !important;
}

answered Feb 28 '17 at 08:37

bozydarlelutko

511
7
21

Problem with video – Simone Grimani Oct 26 '22 at 07:48

score -2 · Answer 2 · edited Aug 02 '18 at 07:37

look on sippet below or look on this example on http://jsfiddle.net/slovnet/gk9998ct/

var $fotoramaDiv = jQuery('.fotorama_custom').fotorama({
  click:false,
  allowfullscreen:true,
});

    // 2. Get the API object.
    var fotorama = $fotoramaDiv.data('fotorama');

// if you want add handler on one left click
jQuery('.fotorama').click(function(){
    fotorama.requestFullScreen();    
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script>
<!-- Fotorama -->
<div class="fotorama_custom" data-width="700" data-ratio="700/467" data-max-width="100%">
  <img src="http://lorempixel.com/250/200/sports">
  <img src="http://lorempixel.com/250/200/animals">
  <img src="http://lorempixel.com/250/200/city">
  <img src="http://lorempixel.com/250/200/people">
  <img src="http://lorempixel.com/250/200/transport">
</div>

How to open fotorama fullscreen mode by click on main image?

2 Answers2