Javascript 切换Galleria全屏模式

我想知道是否有人知道如何在全屏和正常模式之间切换

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

---

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

来自Galleria文档

.enterFullscreen( [callback] )

这会将多媒体资料设置为全屏模式。它将临时操纵某些文档样式，并放大图库以覆盖浏览器屏幕。请注意，它将只填充浏览器窗口，而不是客户端屏幕（javascript不能这样做）

切换全屏模式

---

如果您需要关于这些用法的任何进一步解释，请毫不犹豫地询问。

我只想补充@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”的位置。

这应该可以：

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 });
});

.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;
}

    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 });
    }
  });`

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

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

CSS

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 });
});

.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;
}

    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 });
    }
  });`

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

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

其中

fullscreen.png

是您选择的合适图像。

我正在使用：

lightbox:true，

---

在Galleria.run（）之前

。这允许您在点击画廊中的图像后显示全屏覆盖。
Richard的方法非常有效

您还可以通过扩展Galleria而不使用ready功能：

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

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 });
});

.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;
}

    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 });
    }
  });`

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

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

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

CSS

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 });
});

.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;
}

    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 });
    }
  });`

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

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

（请记住将fontAwesome的样式表包含在
中）

我仍然有一个最大化按钮的问题。如果我在它上面盘旋，它不会变白，而是保持灰色。可能空闲状态有问题，但我还没有找到解决方案。（如果我使用
this.addIdleState（…）
删除代码行，则悬停有效。我需要在此处进行更多测试。）

我还想在全屏显示后将图标从最大化更改为最小化，但我还不知道怎么做。这也在我的待办事项清单上

更新日期2014年2月7日

我找到了解决这两个问题的方法：


对于“空闲状态”问题，我已经删除了空闲状态。因为我不在乎这些控件是否永久存在，现在悬停是否如预期的那样工作。也许我以后再查另一个解决方案

要在单击时更改图标，可以使用CSS和jQuery：

在您的CSS中最大化图标的第一个前置过滤器下方添加覆盖CSS规则，例如：

.galleria-fscr.minimize:before{
    content: "\f066";
 }


在gallery.toggleFullscreen（）

之后添加这些JS行，该行通过每次单击在普通before样式和最小化before样式之间切换图标：

$(".galleria-fscr").toggleClass("minimize");

这也适用于播放/恢复按钮（其余代码与全屏代码类似）：

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 });
});

.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;
}

    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 });
    }
  });`

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

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

---

谢谢，但问题是我不知道怎么用这个。。换句话说，我应该从哪里调用它（哪个对象？它是gallery上的一个jquery选择器吗？因为我没有定义它…）除此之外，我正在寻找一个可以自动添加全屏按钮的东西，就像galleria主页上一样。。。有什么想法吗？我基于文档中解释的可用性的假设是->首先，我们需要一个触发事件，您可以使用jquery来实现这一点。我们可以使用click事件$（“元素”）.click（），也可以在文档加载$（函数（）{，无论哪种方式，必须进入FullScreen的将是作为库的元素。因此，如果我们的库的id为#gallery，那么它将是$（“元素”）.click（函数（）{（“#库”）.enterFullscreen（[callback]）；$（“元素”）如果你有一个id为button1的输入，那么$（“#button1”）。@Ohgodwhyn不完全是，你需要做

$（“#gallery”）.data（'galleria'）。enterFullscreen（）；

啊，data！很好打电话给David，现在我知道我是否也使用过galleria。谢谢你的提示。@DanyKhalife谢谢！我错过了.data（…）虽然现在我可以给它打电话了，但我在某个地方看到了一个bug…请查看此页面：并尝试使用firebug或其他工具切换全屏…有一些可疑之处，我希望您能帮助我解决：）@DanyKhalife“使用firebug切换全屏”是什么意思？您需要一个触发器，比如一个链接，可以在单击时对其进行切换。是的，但是在firebug的控制台中，您可以运行Javascript命令。在您的代码中有：

$（“#galleria”）.data（'galleria'）。toggleFullscreen（）；

，如果您复制它并将其粘贴到firebug控制台中（在包含库的页面上），代码将像被单击的按钮触发一样运行