fotorama - 如何为fotorama滑块启用双击事件以使全屏

Question

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

Answer 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>