resize script for galleria

最新推荐文章于 2023-03-07 20:06:57 发布

原创最新推荐文章于 2023-03-07 20:06:57 发布 · 780 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#function #css

Django 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的响应式网页布局调整方案。通过监听窗口大小变化，动态调整图片、容器等元素的高度和宽度，确保不同屏幕尺寸下页面布局的一致性和美观性。

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




});

/* any custom CSS will override the theme. Here I will enlarge the thumbnails: */
.galleria-thumbnails .galleria-image{width:90px;height:60px;}
.galleria-thumbnails-list{height:60px;}
.galleria-thumb-nav-left,
.galleria-thumb-nav-right{height:55px;}
.galleria-info,
.galleria-counter{bottom:80px;}

預覽窗口位置、大小

.galleria-thumbnails-container {left:10px; width:400px; height: 142px;}

.galleria-thumbnails-list{height:100px;}

預覽圖片大小

.galleria-thumbnails .galleria-image{height:90px}

圖片大小

.galleria-stage{height:300px}