花式框内的内容需要响应
I would like to create a gallery that is inside a fancy box , so firstly I downloaded all the content of the gallery and appended to the html container.
我想在一个奇特的盒子里面创建一个画廊,所以首先我下载了画廊的所有内容并附加到html容器中。
<div id="popup" style="display:none;"><div class="galleria"></div></div>
The jquery part
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;
});
}
});
Notice that I set up the listener in the button that show the fancybox
请注意,我在显示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();
}
});
}
Attempted to call galleria.run
when fancybox's afterShow
event; but it is still the same.
当fancybox的afterShow事件时,试图打电话给galleria.run;但它仍然是一样的。
Also for CSS, it need to be :
对于CSS,它需要是:
.galleria{
width:700px;
height:500px;
}
Otherwise ,it can not generate the gallery
否则,它无法生成图库
How to fix that?
如何解决?
Reference
参考
My site: http://internal001.zizsoft.com/be_pure/
我的网站:http://internal001.zizsoft.com/be_pure/
(When you scroll to bottom, there is a slider showing instagram photos, click on the photo and you will see the gallery)
(当您滚动到底部时,有一个滑块显示instagram照片,点击照片,您将看到图库)
The plugin used:
使用的插件:
http://galleria.io/
http://galleria.io/
http://fancyapps.com/fancybox/
http://fancyapps.com/fancybox/
4 个解决方案
#1
11
As others mentioned in the commants all those plugins you are using are responsive already. When i visit your site if i resize the window after opening the fancybox its not resized as defined as "responsive". I thought this is what you are worrying about. You can invoke this by resize galleria on window resize event. Please refer this resize script for galleria to achieve. Thanks
正如其他人在commants中提到的那样,你使用的所有插件都已经响应了。当我访问你的网站,如果我打开fancybox后调整窗口大小,它没有调整为“响应”定义。我以为这就是你所担心的。您可以通过在窗口大小调整事件上调整大小的galleria来调用它。请参阅此大小调整脚本以实现galleria。谢谢
Update: (Essential code blocks from the referred link)
to re-initialize the galleria while window resize.
更新:(来自引用链接的基本代码块)在窗口调整大小时重新初始化galleria。
First, set up the resize function:
首先,设置调整大小功能:
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 });
}
Then bind it to the window resize event:
然后将其绑定到窗口调整大小事件:
var TO = false;
$(window).resize(function () {
if (TO !== false)
clearTimeout(TO);
TO = setTimeout(ResizeGallery, 200); //200 is time in miliseconds
});
This will essentially re-initialize by reloading the default theme. In this example, I am using the second parameter to specify which image to show- otherwise it will display the first image. Be aware that this may cause another instance of Galleria. I believe this to be a bug, and posted on their forums. You can remove the older instances as follows:
这将基本上通过重新加载默认主题来重新初始化。在这个例子中,我使用第二个参数来指定要显示的图像 - 否则它将显示第一个图像。请注意,这可能会导致另一个Galleria实例。我相信这是一个错误,并发布在他们的论坛上。您可以按如下方式删除旧实例:
var gcount = Galleria.get().length;
if (gcount > 1) {
Galleria.get().splice(0, gcount - 1);
}
Run it after the loadTheme method. Use settimeout to delay it, because loadTheme takes some time to complete. I use 200ms. Ugly, but I need some of the features in Galleria. Hope this helps.
在loadTheme方法之后运行它。使用settimeout来延迟它,因为loadTheme需要一些时间才能完成。我用200ms。丑陋,但我需要Galleria的一些功能。希望这可以帮助。
更多相关文章
- 主滑块调整大小到行容器
- Html css缩放会将大小改变几个像素
- img在div中不按百分比调整大小
- HTML高级标签之窗口分帧(前台界面演示)
- 样式Bootstrap的btn-group-justified,添加边距和垂直大小
- 为什么我的html页面的大小不固定啊?
- ExtJS的使用方法汇总(4)——拖放以及弹出窗口
- 如何将值发送到弹出窗口
- 解决主页在不同浏览窗口下浏览兼容——百分数值相对定位的总结