Question

我在我的网页上使用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>

Answer 1

万一有人确实遇到了和我一样的奇怪问题，我找到了答案：全屏不能使用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(); 

        });

 }

Galleria API enterFullscreen仅在页面加载时首次使用

1 个答案: