Question

我想知道是否有人知道如何在Galleria

中切换全屏和普通模式

我能想到的唯一方法是在主题之间切换：默认和全屏主题（我从那里购买）

如果你知道更好的方法，我将非常感谢你的帮助。

Answer 1

我只想补充@ Ohgodwhy的回答：

获取Galleria实例并使用API的最佳方法是使用Galleria.ready函数：

Galleria.ready(function() {
  var gallery = this; // galleria is ready and the gallery is assigned
  $('#fullscreen').click(function() {
    gallery.toggleFullscreen(); // toggles the fullscreen
  });
});

或者，如果您知道图库已初始化，则可以通过$.data对象访问该实例：

$('#fullscreen').click(function() {
  $('#galleria').data('galleria').toggleFullscreen(); // toggles the fullscreen
});

我假设您有一个ID为“全屏”的链接/按钮，而该画廊位于ID'galleria'。

Answer 2

这应该有效：

<强> JS

Galleria.loadTheme('http://aino.github.com/galleria/demos/categories/themes/classic/galleria.classic.min.js');

$('#galleria').galleria();

Galleria.ready(function() {
    var gallery = this;
    this.addElement('fscr');
    this.appendChild('stage','fscr');
    var fscr = this.$('fscr')
        .click(function() {
            gallery.toggleFullscreen();
        });
    this.addIdleState(this.get('fscr'), { opacity:0 });
});

<强> CSS

.galleria-fscr{
    width:20px;
    height:20px;
    position:absolute;
    bottom:0px;
    right:10px;
    background:url('fullscreen.png');
    z-index:4;
    cursor: pointer;
    opacity: .3;
}
.galleria-fscr:hover{
    opacity:1;
}

fullscreen.png是您选择的合适图像。

Answer 3

我正在使用：

lightbox: true,

在Galleria.run()之前

。这样，您可以在单击图库中的图像后显示全屏叠加。

Answer 4

理查德的方法非常有效。

你也可以通过扩展Galleria而不用现成的功能来实现：

<强> JS

    Galleria.run('.galleria', {

    // configure
    autoplay: true,
    lightbox: true,
    idleMode: true,

    // extend theme
    extend: function() {
        var gallery = this; // "this" is the gallery instance

        //fullscreen button
        this.addElement('fscr');
        this.appendChild('stage','fscr');
        var fscr = this.$('fscr').click(function() {
            gallery.toggleFullscreen();
        });

        // this.addIdleState(this.get('fscr'), { opacity:0 });
    }
  });`

如果您想使用fontAwesome图标作为最大化图标，您可以按照以下方式实现它（其他CSS样式见Richard的帖子）：

<强> CSS

    .galleria-fscr:before {
      content: "\f065"; /* char code for fa-expand */
      position: absolute;
      font-family: FontAwesome;
      color: #fff;
   }

（请记住将fontAwesome的样式表包含在<link rel="stylesheet" href="css/font-awesome.min.css">）

中

我仍然遇到最大化按钮的问题。如果我在它上面盘旋，它不会变白并保持灰色。也许有IDLE状态的东西是错误的，但我还没有找到解决方案。（如果我使用this.addIdleState(...)移除代码行，则悬停工作。我需要在此处进行更多测试。）

一旦屏幕全屏显示，我还想将图标从最大化更改为最小化图标，但我还不知道该怎么做。这也是我的待办事项列表。

更新07.02.2014

我想出了如何解决这两个问题：

对于“IDLE状态”问题 - 我删除了IDLE状态。因为我不在乎这些控件是否永久存在，现在悬停按预期工作。也许我稍后会检查另一个解决方案。
要更改点击图标，可以使用CSS和jQuery：
1. 在 CSS 中最大化图标的第一个过滤器之前添加一个重写CSS规则，例如：
```
.galleria-fscr.minimize:before{
    content: "\f066";
 }
```
2. 在gallery.toggleFullscreen()之后添加这些 JS 行 - 在样式前的正常样式和样式前的最小化之间，每次点击都会切换图标：
```
$(".galleria-fscr").toggleClass("minimize");
```

这也适用于播放/恢复按钮（代码的其余部分是全屏代码的模拟）：

<强> JS

    ...
    gallery.playToggle();
    $('.galleria-pauseResumeBtn').toggleClass("resume");

Answer 5

来自Galleria文档。

.enterFullscreen( [callback] )

这会将图库设置为全屏模式。它将临时操作一些文档样式并炸毁图库以覆盖浏览器屏幕。请注意，它只会填充浏览器窗口，而不是客户端屏幕（javascript无法执行此操作）。

.toggleFullscreen( [callback] )

切换全屏模式。

如果您需要进一步解释使用这些，请不要犹豫。

切换Galleria全屏模式

5 个答案: