Galleria API Enterfullscreen仅在页面加载时首次工作

我正在使用Galleria Image Gallery（http://galleria.io/），并在我的网页上使用经典主题。我想添加一个将用户进入全屏模式的按钮。因此，我看了API，这似乎很简单：我尝试了几次，终于让它工作了。问题是：它第一次打开HTML文档时它可以很好地工作行不通。看起来它试图打开，但是有些东西阻止了它：因为它显示了大约一秒钟。我不知道为什么会发生这种情况，有人可以在这里帮助我吗？

我的html：

   <style>
  .content{width:700px;height:800px;margin:20px auto;}
        #galleria{height:700px}
    </style>
    <!-- load jQuery -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
    <!-- load Galleria -->
    <script src="../../galleria-1.2.8.min.js"></script>
    </head>
    <body>
      <div class="content">
                 <!-- the link for fullscreen mode -->
                 <a id="fullscreen" href="#"> fullscreen </a> 
                 <div id="galleria">
       <!--  and then all the images just like they were when opening the classic theme demo html -->
     </body>

和我的javascript：

  <script>
 Galleria.ready(function() {
    var gallery = this; 

        gallery.attachKeyboard({
            left: gallery.prev,
            right: gallery.next,
        });
 $("#fullscreen").click(function() {
            gallery.enterFullscreen(); 
        });


     });

// Initialize Galleria
 Galleria.run("#galleria")
   // Load the classic theme
Galleria.loadTheme('galleria.classic.min.js');
 </script>

以防万一某人实际上有与我相同的奇数问题，我找到了答案：全屏在Chrome中没有工作，因为默认设置与之冲突。。

基本上，这对我来说是什么是在Enterfullscreen（）之前添加event.preventdefault（）。

工作代码：

// Load the classic theme
Galleria.loadTheme('galleria.classic.min.js');
// Initialize Galleria
Galleria.run("#galleria", {
 extend:function() {
    var gallery = this; 

        gallery.attachKeyboard({
            left: gallery.prev,
            right: gallery.next,
        });
 $("#fullscreen").click(function() {
            event.preventDefault();
            gallery.enterFullscreen(); 
        });
 }

相关内容

最新更新

热门标签：