如何通过单击主图像打开 fotorama 全屏模式？

Question

我正在为产品图库使用 fotorama js 插件。单击主图像（不是缩略图）时如何打开全屏模式？我想允许用户通过单击右上角的图像而不是全屏图标来打开全屏模式。

这个答案对我不起作用：

Answer 1

经过数小时的寻找解决方案，我终于找到了。只需将全屏图标透明、全高和全宽覆盖主图像即可：

.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;
}

Answer 2

查看下面的 sippet 或查看 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>

如何通过单击主图像打开 fotorama 全屏模式？

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

image

click

fullscreen

fotorama