切换广场全屏模式

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为“fullsc链接/按钮reen“，画廊在ID'galleria'。

Answer 2

从Galleria文档。

.enterFullscreen([callback]) 

这将以全屏模式设置图库。它会临时处理一些文档样式并炸毁画廊以覆盖浏览器屏幕。请注意，它只会填充浏览器窗口，而不是客户端屏幕（JavaScript不能这样做）。

.toggleFullscreen([callback]) 

切换全屏模式。

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

Answer 3

这应该工作：

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 4

我使用：

lightbox: true,

之前Galleria.run()。这允许您在点击图库中的图像后显示全屏叠加。

Answer 5

理查德的方法工作得很好。

你也可以做它用时的就绪功能扩展广场：

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样式见理查德的职位）：

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">样式表）

我仍然有一个问题的最大化按钮。如果我徘徊在它上面，它不会变白并保持灰色。也许有些空闲状态是错误的，但我还没有找到解决方案。 （如果我删除了代码行this.addIdleState(...)悬停的作品，我需要在这里做更多的测试。）

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

更新2014年2月7日

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

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

• 要更改的图标上点击一下，你可以用CSS和jQuery做到这一点：

  1. 的最大化图标的过滤器之前添加下面的第一个压倒一切的CSS规则在CSS如：

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

  2. 添加这些JS行之后gallery.toggleFullscreen() - 即切换风格和MI前与正常之间的每一次点击的图标nimize前风格：

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

这工作也为播放/恢复按钮（代码的其余部分是呈三角全屏代码）：

JS

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