我决定在我的投资组合网站上使用galleria jquery插件。 我想要实现它的方式是加载经典主题。 此外,当按下浏览器进入全屏模式并且galleria切换到全屏主题时,我已经通过左上角的按钮扩展了经典主题。 在全屏主题中,存在相同的按钮,但是当再次按下时,它会从全屏模式切换回正常状态,并返回显示我网站其余部分的经典主题。
我似乎无法找到满意的解决方案。 我到目前为止让我进入全屏并完美地改变了主题,但是当我再次按下按钮时它会返回到页面并切换到带有致命错误阶段高度的经典。我试图将配置选项放在很多地方,但我似乎没有在loadtheme之后运行。
这是我到目前为止所遵循的代码:
var OptionsFullscreen = {
height: 1, //0.5625 16:9, 0.74 4:3 format
imageCrop: false,
idleSpeed: 100,
idleTime: 1000,
clicknext: true,
transition: 'fade'
};
var OptionsNormal = {
height: 0.5625, //0.5625 16:9, 0.74 4:3 format
imageCrop: false,
idleSpeed: 100,
idleTime: 1000,
clicknext: true,
transition: 'fade'
};
Galleria.loadTheme('js/themes/classic/galleria.classic.min.js');
Galleria.configure(OptionsNormal);
Galleria.run('#gallery', {
extend: function() {
var gallery = this;
// Add button for toggling fullscreen theme
this.addElement('fscr');
this.appendChild('stage','fscr');
var fscr = this.$('fscr')
.text('Fullscreen')
.click(function(e) {
e.preventDefault;
gallery.toggleFullscreen();
});
this.addIdleState(this.get('fscr'), { opacity:0 });
}
});
Galleria.ready(function() {
this.bind('fullscreen_enter', function() {
Galleria.loadTheme('js/themes/fullscreen/galleria.fullscreen.min.js');
});
this.bind('fullscreen_exit', function() {
Galleria.loadTheme('js/themes/classic/galleria.classic.min.js');
Galleria.configure(OptionsNormal);
});
});