Как открыть полноэкранный режим фоторамы, нажав на основное изображение?

Я использую плагин fotorama js для галереи продуктов. Как включить полноэкранный режим при нажатии на основное изображение (не на миниатюры)? Я хочу разрешить пользователю открывать полноэкранный режим, щелкнув изображение вместо полноэкранного значка в правом верхнем углу.

Этот ответ у меня не работает: https://stackoverflow.com/a/19064471/4680550


image click fullscreen fotorama
person bozydarlelutko    schedule 27.02.2017    source источник

Ответы (2)


arrow_upward
9
arrow_downward

После нескольких часов поиска решения я наконец нашел его. Просто сделайте полноэкранный значок прозрачным, на всю высоту и ширину, чтобы покрыть основное изображение:

.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;
}
person bozydarlelutko    schedule 28.02.2017

arrow_upward
-2
arrow_downward

посмотрите на фрагмент ниже или посмотрите на этот пример на 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>

person Alexander    schedule 19.07.2017