Javascript 花式包装盒内的内容需要响应

我想创建一个图库，它位于一个奇特的盒子中，因此首先我下载了图库的所有内容并附加到html容器中

<div id="popup" style="display:none;"><div class="galleria"></div></div>

试图调用galleria。在fancybox的

展示后运行
；但还是一样

同样对于CSS，它需要：

.galleria{
    width:700px;
    height:500px;
}

否则，它无法生成库

如何解决这个问题

参考文献

我的网站：

（当您滚动到底部时，会出现一个显示instagram照片的滑块，单击照片，您将看到图库）

使用的插件：


每件事都反应灵敏，效果良好。详细说明你的问题

如果希望弹出窗口的缩略图显示在弹出窗口的中间，请使用以下代码

.galleria-thumbnails {
text-align: center;
width: 100% !important;

    }



.galleria-image {

    display: inline-block;

    float: none !important;

    }

正如commants中提到的，您使用的所有插件都已经响应了。当我访问你的网站时，如果我在打开fancybox后调整窗口大小，它的大小不会被定义为“响应”。我以为这就是你担心的。您可以通过在窗口调整大小事件中调整galleria的大小来调用此选项。请参考此实现。谢谢

更新：（参考链接的基本代码块）

在调整窗口大小时重新初始化galleria

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

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);
     // Reload theme
     Galleria.loadTheme('js/galleria/themes/classic/galleria.classic.js', { show: curIdx });
}

然后将其绑定到窗口调整大小事件：

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

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

var gcount = Galleria.get().length;

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

在loadTheme方法之后运行它。使用settimeout延迟它，因为loadTheme需要一些时间才能完成。我用200米。难看，但我需要一些在Galleria的功能。希望这能有所帮助。
我发现使用javascript来处理最适合我的问题，您可以让脚本计算高度，然后在初始化fancybox时执行类似操作

fitToView : true,
autoSize  : true,
width     : 100%,
height    : 'auto',

您可以使用FitView和autoSize，直到获得所需的效果，就像pinterest一样。您可以使用一个简单的css技巧来实现这一点

在响应媒体屏幕中，您必须将css设置为

.tp simpleresponsive.slotholder*，.tp simpleresponsive img{
背景尺寸：100%自动！重要；
}

我觉得这个奇特的盒子很有反应。请详细说明您所面临的具体问题。您是否有可能将其编成小提琴？您是否尝试过以百分比表示宽度和高度？您为这个问题添加了一个赏金，因为增加问题的清晰度将更为有益。问题不是没有人能解决这个问题，而是没有人知道他们想帮助你解决什么问题。你希望fancybox的宽度与此框中显示的图像相同吗？正如我现在看到的，该框在图像的左右两侧创建了一些（黑色）填充。我说的对吗，你想把这个拿走？
var gcount = Galleria.get().length;

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

fitToView : true,
autoSize  : true,
width     : 100%,
height    : 'auto',