javascript 切换 Galleria 全屏模式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9286434/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Toggle Galleria Full Screen Mode
提问by Dany Khalife
I am wondering if anyone knows how to toggle between full screen and normal mode in Galleria
我想知道是否有人知道如何在Galleria 中在全屏和普通模式之间切换
The only way I can think of is to switch between themes : default, and Fullscreen theme (which i bought from there)
我能想到的唯一方法是在主题之间切换：默认主题和全屏主题（我从那里购买的）
If you know an even better way, I would appreciate your help.
如果您知道更好的方法，我将不胜感激。
回答by David Hellsing
I'm just going to add to @Ohgodwhy's answer:
我只是要添加到@Ohgodwhy 的回答中：
The best way to get the Galleria instance and use the API is to use the Galleria.ready function:
获取 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
});
});
Or, you can access the instance via the $.dataobject if you know that the gallery is initialized:
或者，$.data如果您知道图库已初始化，则可以通过对象访问实例：
$('#fullscreen').click(function() {
$('#galleria').data('galleria').toggleFullscreen(); // toggles the fullscreen
});
I am assuming you have a link/button with the ID 'fullscreen' and the gallery is at ID 'galleria'.
我假设您有一个 ID 为“全屏”的链接/按钮，而画廊的 ID 为“画廊”。
回答by Richard
This should work:
这应该有效：
JS
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
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;
}
Where fullscreen.pngis an appropriate image of your choice.
fullscreen.png您选择的合适图像在哪里。
回答by user12639
I'm using:
我正在使用：
lightbox: true,
lightbox: true,
before Galleria.run(). This allows you to display fullscreen Overlay after clicking on image in the gallery.
之前Galleria.run()。这允许您在单击图库中的图像后显示全屏叠加。
回答by AWolf
The approach from Richard is working very well.
理查德的方法效果很好。
You could also do it by extending Galleria with-out the ready function:
您也可以通过扩展 Galleria 而不使用 ready 函数来实现：
JS
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 });
}
});`
And if you'd like to use a fontAwesome icon for the maximize icon you can implement it as following (other CSS styles see Richard's post):
如果您想使用 fontAwesome 图标作为最大化图标，您可以按如下方式实现它（其他 CSS 样式请参阅 Richard 的帖子）：
CSS
CSS
.galleria-fscr:before {
content: "\f065"; /* char code for fa-expand */
position: absolute;
font-family: FontAwesome;
color: #fff;
}
(keep in mind to include the style sheet of fontAwesome with <link rel="stylesheet" href="css/font-awesome.min.css">)
（记住要包含 fontAwesome 的样式表<link rel="stylesheet" href="css/font-awesome.min.css">）
I'm still having one problem with the maximize button. If I'm hovering over it, it doesn't get white and stays gray. Maybe something with the IDLE state is wrong, but I haven't found a solution yet. (If I remove the code line with this.addIdleState(...)the hovering works. I need to do more tests here.)
我仍然有一个最大化按钮的问题。如果我将鼠标悬停在它上面，它不会变白并保持灰色。也许 IDLE 状态有问题，但我还没有找到解决方案。（如果我删除带有this.addIdleState(...)悬停工作的代码行。我需要在这里做更多的测试。）
I'd also like to change the icon from maximize to the minimize icon once the screen is on fullscreen, but I don't know how to do that yet. That's also on my todo list.
我还想在屏幕全屏后将图标从最大化更改为最小化图标，但我还不知道该怎么做。这也在我的待办事项清单上。
Update 07.02.2014
2014 年 2 月 7 日更新
I figured out how to solve these two issues:
我想出了如何解决这两个问题：
For the "IDLE state" issue - I've removed the IDLE state. Because I don't care if these controls are permanently there and now hovering works as expected. Maybe I check another solution later.
To change an icon on click you can do it with CSS and jQuery:
Add an overriding CSS rule below the first before filter of the maximize icon in your CSSe.g.:
.galleria-fscr.minimize:before{ content: "\f066"; }Add these JSline after
gallery.toggleFullscreen()- that toggles the icon with every click between the normal before style and the minimize before style:$(".galleria-fscr").toggleClass("minimize");
对于“空闲状态”问题 - 我已经删除了空闲状态。因为我不在乎这些控件是否永久存在并且现在悬停按预期工作。也许我稍后会检查另一个解决方案。
要在单击时更改图标，您可以使用 CSS 和 jQuery 来完成：
在CSS 中最大化图标的第一个过滤器之前添加一个覆盖 CSS 规则，例如：
.galleria-fscr.minimize:before{ content: "\f066"; }在之后添加这些JS行
gallery.toggleFullscreen()- 每次单击都会在正常之前样式和最小化之前样式之间切换图标：$(".galleria-fscr").toggleClass("minimize");
This works also for a play / resume button (rest of the code is the simillar to the fullscreen code):
这也适用于播放/恢复按钮（其余代码与全屏代码类似）：
JS
JS
...
gallery.playToggle();
$('.galleria-pauseResumeBtn').toggleClass("resume");
回答by Ohgodwhy
From the Galleria documentation.
来自 Galleria 文档。
.enterFullscreen( [callback] )
This will set the gallery in fullscreen mode. It will temporary manipulate some document styles and blow up the gallery to cover the browser screen. Note that it will only fill the browser window, not the client screen (javascript can't do that).
这会将画廊设置为全屏模式。它会临时操纵一些文档样式并炸毁图库以覆盖浏览器屏幕。请注意，它只会填充浏览器窗口，而不是客户端屏幕（javascript 不能这样做）。
.toggleFullscreen( [callback] )
Toggles fullscreen mode.
切换全屏模式。
If you need any further explanation of the use of these, please don't hesitate to ask.
如果您需要有关这些用法的任何进一步说明，请随时询问。
