花式框内的内容需要响应

Question

我想在一个奇特的盒子里面创建一个画廊,所以我首先下载了画廊的所有内容并附加到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;
                });
        }
    });

请注意,我在显示fancybox的按钮中设置了监听器

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

galleria.run在fancybox的afterShow活动时试图打电话; 但它仍然是一样的.

对于CSS,它需要是:

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

否则,它无法生成图库

如何解决？

参考

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

(当您滚动到底部时,有一个滑块显示instagram照片,点击照片,您将看到图库)

使用的插件:

http://galleria.io/

http://fancyapps.com/fancybox/

Answer 1

正如其他人在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需要一些时间才能完成.我用200ms.丑陋,但我需要Galleria的一些功能.希望这可以帮助.