调整图库的脚本 [英] resize script for galleria
问题描述
我想调整整个Galleria div的大小,并重新调整使用Galleria脚本动态生成的所有图像的大小.
I'm wanting to resize the entire galleria div and resize all the images dynamically generated using the galleria script.
到目前为止,我有
$(window).resize(function() {
var h = $(window).height();
var galleriaHeight = h-54;
var w = $(".content").width();
var galleriaWidth = w-18;
$("#galleria").height(galleriaHeight);
$("#galleria").width(w);
$(".galleria-stage").height(galleriaHeight);
$(".galleria-stage").width(galleriaWidth);
$(".galleria-images .galleria-image img").css({"max-height":"auto"});
$(".galleria-images .galleria-image img").css({"max-width":galleriaWidth-36});
$(".galleria-stage").height(galleriaHeight);
$(".galleria-stage").width(galleriaWidth);
$(".galleria-container").width(w);
$(".galleria-container").height(galleriaHeight);
$(".caption").width(w);
$(".counter-nav").width(w);
var sidebarHeight =h-54;
var contentHeight =h-36;
$(".sidebar1").height(sidebarHeight);
$(".content").height(contentHeight);
});
但是,一切都在不均匀地扩展并且非常混乱.查看了全屏代码后,我还添加了
But everything is scaling unevenly and very messed up. Having looked at the fullscreen code, I have also added
this.bind(Galleria.RESCALE, function() {
POS = this.getStageHeight() - tab.height() - 2;
thumbs.css('top', OPEN ? POS - list.outerHeight() + 2 : POS);
var img = this.getActiveImage();
if (img)
{
fixCaption(img);
}
});
但是那也不行...
我想我想在调整大小后立即重新加载页面,或者即时调整所有相对于彼此的元素的大小,或者使用Galleria调整大小脚本...
I suppose I want to reload the page after i resize but on the fly... or resize all elements relative to each other, or use the Galleria resize script ...
有什么想法吗?
推荐答案
我知道这很旧,但是我看不到任何答案.希望它可以帮助下一个家伙.
I know this is old, but I don't see an answer anywhere. Hopefully it can help the next guy.
这将在调整浏览器窗口大小时动态调整Galleria的大小.
This will dynamically resize Galleria when the browser window is resized.
我遇到了类似的问题.我最终将以下函数绑定到窗口调整大小事件.我为调整大小事件使用了逻辑 此帖子中
I ran into similar issues. I ended up binding the following function to the window resize event. I used the logic for the resize event from this post
首先,设置调整大小功能:
First, set up the resize function:
function ResizeGallery() {
gWidth = $(window).width();
gHeight = $(window).height();
gWidth = gWidth - ((gWidth > 200) ? 100 : 0);
gHeight = gHeight - ((gHeight > 100) ? 50 : 0);
$("#gallerycontainer").width(gWidth);
$("#gallery").width(gWidth);
$("#gallery").height(gHeight);
Galleria.loadTheme('js/galleria/themes/classic/galleria.classic.js', { show: curIdx });
}
然后将其绑定到窗口调整大小事件:
Then bind it to the window resize event:
var TO = false;
$(window).resize(function () {
if (TO !== false)
clearTimeout(TO);
TO = setTimeout(ResizeGallery, 200); //200 is time in miliseconds
});
这实际上将通过重新加载默认主题来重新初始化.在此示例中,我使用第二个参数指定要显示的图像,否则它将显示第一个图像. 请注意,这可能会导致另一个Galleria实例.我认为这是一个错误,并且在他们的论坛上发布了.您可以按照以下步骤删除较旧的实例:
This will essentially re-initialize by reloading the default theme. In this example, I am using the second parameter to specify which image to show- otherwise it will display the first image. Be aware that this may cause another instance of Galleria. I believe this to be a bug, and posted on their forums. You can remove the older instances as follows:
var gcount = Galleria.get().length;
if (gcount > 1) {
Galleria.get().splice(0, gcount - 1);
}
在loadTheme方法之后运行它.使用settimeout延迟它,因为loadTheme需要一些时间才能完成.我用200毫秒丑陋,但我需要Galleria的某些功能.希望这会有所帮助.
Run it after the loadTheme method. Use settimeout to delay it, because loadTheme takes some time to complete. I use 200ms. Ugly, but I need some of the features in Galleria. Hope this helps.
这篇关于调整图库的脚本的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!