我想在花哨的盒子里创建一个画廊,所以我首先下载了画廊的所有内容并附加到 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("'","’") + "' 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/
(当你滚动到底部时,有一个 slider 显示 instagram 照片,点击照片,你会看到画廊)
使用的插件:
最佳答案
正如其他人在命令中提到的,您使用的所有这些插件都已经响应。当我访问您的网站时,如果我在打开 fancybox 后调整窗口大小,则它不会按照定义为“响应式”调整大小。我以为这就是你担心的。您可以通过在窗口调整大小事件上调整画廊大小来调用它。请引用这个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 });
}
然后将其绑定(bind)到窗口调整大小事件:
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 - 花式框内的内容需要响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32974291/