如何启用双击事件到fotorama滑块进行全屏显示

时间:2014-03-06 08:15:52

标签: fotorama

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

1 个答案:

答案 0 :(得分: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

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