我想创建一个在一个花哨的框内的画廊,所以首先我下载了所有的图库的内容并附加到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;
});
}
});
请注意,我在显示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();
}
});
}
当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之后调整窗口大小,它没有按照“响应”定义调整大小.我以为这是你正在担心的.您可以通过调整窗口大小事件调整大小.请参考这个
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 });
}
然后绑定到窗口resize事件：
var TO = false;
$(window).resize(function () {
if (TO !== false)
clearTimeout(TO);
TO = setTimeout(Resizegallery,200); //200 is time in miliseconds
});
这将通过重新加载默认主题来重新初始化.在本示例中,我使用第二个参数来指定要显示的图像,否则将显示第一个图像.请注意,这可能会导致另一个galleria的实例.我相信这是一个bug,并发布在他们的论坛上.您可以按照以下步骤删除旧的实例：
var gcount = galleria.get().length;
if (gcount > 1) {
galleria.get().splice(0,gcount - 1);
}
在loadTheme方法之后运行它.使用settimeout来延迟它,因为loadTheme需要一些时间才能完成.我用200ms丑陋,但我需要galleria的一些功能.希望这可以帮助.