-1

如何启用 fotorama 滑块的双击事件以全屏显示,就像我们在右上角看到的一样

4

1 回答 1

1

您可以使用此 jquery 事件http://api.jquery.com/dblclick/来执行此功能

fotorama.requestFullScreen()

请记住,您应该在 api 的标题中手动初始化 fotorama,您可以看到它是如何做到的。

这是一个给你的例子!

http://jsfiddle.net/meickol/8dv7k/ 你怎么看很容易!祝你好运!

HTML

   <base href="http://fotorama.s3.amazonaws.com/i/okonechnikov/">

<!-- Fotorama -->
<div class="fotorama_custom" data-width="700" data-ratio="700/467" data-max-width="100%">
  <img src="1-lo.jpg">
  <img src="2-lo.jpg">
  <img src="9-lo.jpg">
  <img src="6-lo.jpg">
  <img src="5-lo.jpg">
</div>

脚本

<script>

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

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


jQuery('.fotorama').dblclick(function(){
    fotorama.requestFullScreen();

});

</script>
于 2014-03-21T07:11:22.753 回答