1

我在我的网页上使用带有经典主题的 Galleria 图片库 ( http://galleria.io/ )。我想添加一个将用户带到全屏模式的按钮。所以，我看了一下 API，它看起来很简单：我尝试了几次，终于让它工作了。问题是：它在我第一次打开 html 文档时运行良好，但是当我关闭全屏模式（通过按 esc 或单击叉号）并尝试再次打开它（通过单击我链接到的链接）它时不起作用。看起来它试图打开但有什么东西阻止了它：因为它显示了大约一秒钟。我不知道为什么会发生这种情况，有人可以在这里帮助我吗？

我的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>
4

1 回答 1

2

以防万一有人真的遇到和我一样的奇怪问题，我找到了答案：全屏在 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(); 

        });

 }
于 2012-10-29T16:21:44.443 回答