花哨的盒子里的内容需要响应

Posted 2023-03-06

【中文标题】花哨的盒子里的内容需要响应

【英文标题】：Content inside fancy box need to be responsive

【发布时间】：2016-01-03 15:01:32

【问题描述】：

我想在一个花哨的盒子里创建一个画廊，所以我首先下载了画廊的所有内容并附加到 html 容器中。

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

jquery部分

$("#hidden_content").instagram(
        clientId: blockInstaSettings.clientId
        , hash: hash
        , userId: blockInstaSettings.userId
        , next_url: insta_next_url
        , show: 10
        , image_size: image_size
        , onComplete: function (photos, data) 
            var album_html = "";

            $.each(photos, function( index, val ) 
                album_html += "<img src='" + val.images.standard_resolution.url + "' data-title='' data-description='" + val.caption.text.replace("'","&rsquo;") + "' longdesc='" + val.link + "'>";
            );

            $(".galleria").html(album_html);

                $('#block_instagram').on('click', function () 
                    openPop();
                    return false;
                );
        
    );

请注意，我在显示花式框的按钮中设置了侦听器

function openPop()
    $.fancybox(
         'autoScale': true,
         'transitionIn': 'elastic',
         'transitionOut': 'elastic',
         'speedIn': 500,
         'speedOut': 300,
         'autoDimensions': true,
         'centerOnScroll': true,
         'href' : '#popup'
    );

    Galleria.run('.galleria', 
        transition: 'fade',
        popupLinks: true,
        show: no,
        extend: function(options) 
            Galleria.get(0).$('info-link').click();
        
    );

fancybox 的afterShow 事件时尝试调用galleria.run；但还是一样。

对于 CSS，它也需要：

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

否则无法生成图库

如何解决？

参考

我的网站： http://internal001.zizsoft.com/be_pure/

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

使用的插件：

http://galleria.io/

http://fancyapps.com/fancybox/

【问题讨论】：

花式盒子看起来对我有反应。请详细说明您面临的具体问题。

你可以把这个放到小提琴里吗？

你试过用百分比给出宽度和高度吗？

你已经为这个问题增加了一个赏金，因为增加你的问题的清晰度会更有益。问题不是没有人能解决这个问题，而是没有人知道他们想帮你解决什么问题。

您希望fancybox 具有与此框中显示的图像相同的宽度吗？正如我现在所看到的，该框在图像的左右两侧创建了一些（黑色）填充。我说得对吗？你想把它去掉吗？

【参考方案1】：

你可以用一个简单的 css 技巧来做到这一点。

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

.tp-simpleresponsive .slotholder *, .tp-simpleresponsive img background-size: 100% auto !important;

【参考方案2】：

我发现使用 javascript 来处理对我来说效果最好的，你可以让你的脚本计算高度，然后在你初始化 fancybox 的地方做这样的事情

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

你可以使用 fitToView 和 autoSize 直到你得到想要的效果，就像 pinterest 一样

【参考方案3】：

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

更新：（来自参考链接的基本代码块） 在调整窗口大小时重新初始化广场。

首先，设置resize函数：

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 的一些功能。希望这会有所帮助。

【参考方案4】：

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

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

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

    



.galleria-image 

    display: inline-block;

    float: none !important;