jquery - 调整画廊大小的脚本

Question

我想调整整个 Galleria div 的大小，并调整使用 Galleria 脚本动态生成的所有图像的大小。

到目前为止我已经

    $(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);




});

但是一切都在缩放不均匀并且非常困惑。查看全屏代码后，我还添加了

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 调整大小脚本...

有什么想法吗？

Answer 1

我知道这已经很旧了，但我在任何地方都没有看到答案。希望它可以帮助下一个人。

当浏览器窗口大小调整时，这将动态调整 Galleria 的大小。

我遇到了类似的问题。我最终将以下函数绑定(bind)到窗口调整大小事件。我使用了调整大小事件的逻辑 from this post

首先，设置调整大小功能:

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

然后将其绑定(bind)到窗口调整大小事件:

   var TO = false;
    $(window).resize(function () {
        if (TO !== false)
            clearTimeout(TO);
        TO = setTimeout(ResizeGallery, 200); //200 is time in miliseconds
    });

这实际上将通过重新加载默认主题来重新初始化。在此示例中，我使用第二个参数来指定要显示的图像 - 否则它将显示第一个图像。请注意，这可能会导致另一个 Galleria 实例。我相信这是一个错误，并且 posted on their forums 。您可以按如下方式删除旧实例:

 var gcount = Galleria.get().length;

       if (gcount > 1) {
           Galleria.get().splice(0, gcount - 1);
       }

在 loadTheme 方法之后运行它。使用 settimeout 来延迟它，因为 loadTheme 需要一些时间才能完成。我用的是200ms。丑陋，但我需要 Galleria 的一些功能。希望这会有所帮助。