Question

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

这个答案对我不起作用：https://developer.here.com/api-explorer/rest/routing/link-information-for-a-location

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全屏模式？

2 个答案: