来自附加的 jQuery 画廊视图
我通过循环从 flickr.com 数据库动态添加图像。我附加了这些 ul、li、img 标签,就像您根据 galleryview 示例应该做的那样。我将它附加到 div 然后调用 galleryview 函数:
$('#gallery').galleryView({
panel_width: 800,
panel_height: 300,
frame_width: 50,
frame_height: 50,
transition_speed: 350,
easing: 'easeInOutQuad',
transition_interval: 0
});
如果我在首页上手动添加 ul、li、img 标签,它会起作用,但如果我使用 jQuery 附加添加它们,它就不起作用。但我发现,如果我让页面加载缓慢并立即运行附加代码,它就可以工作。如何使用附加,然后在附加元素上使用画廊视图?
源代码:
function initialize_flickr(_div){
var newDiv = $(document.createElement('div'));
//add some style to the div
$(newDiv).css('background-color', '#223');
$(newDiv).css('width', 800);
$(newDiv).css('height', 800);
$(newDiv).css('position', 'absolute');
$(newDiv).css('left', 500);
$(newDiv).css('top', 0);
//append it to the _div
newDiv.appendTo(_div);
// Our very special jQuery JSON function call to Flickr, gets details of the most recent 20 images
$.getJSON("http://api.flickr.com/services/feeds/groups_pool.gne?id=998875@N22&lang=en-us&format=json&jsoncallback=?", displayImages);
function displayImages(data) {
// Randomly choose where to start. A random number between 0 and the number of photos we grabbed (20) minus 9 (we are displaying 9 photos).
var iStart = Math.floor(Math.random()*(11));
// Reset our counter to 0
var iCount = 0;
// Start putting together the HTML string
var htmlString = "<ul id='gallery'>";
// Now start cycling through our array of Flickr photo details
$.each(data.items, function(i,item){
// Let's only display 9 photos (a 3x3 grid), starting from a random point in the feed
if (iCount > iStart && iCount < (iStart + 10)) {
// I only want the ickle square thumbnails
var sourceSquare = (item.media.m).replace("_m.jpg", "_s.jpg");
// Here's where we piece together the HTML
htmlString += '<li>';
htmlString += '<span class="panel-overlay">'+item.title+'</span>';
htmlString += '<img src="'+sourceSquare+'" />';
htmlString += '</li>';
}
// Increase our counter by 1
iCount++;
});
// Pop our HTML in the #images DIV
$(newDiv).append(htmlString + "</ul>").each(function(){
$('#gallery').galleryView({
panel_width: 800,
panel_height: 300,
frame_width: 50,
frame_height: 50,
transition_speed: 350,
easing: 'easeInOutQuad',
transition_interval: 0
});
});
// Close down the JSON function call
}
}
I'm dynamically adding images via a loop from the flickr.com database. I append these ul, li, img tags as you should do according to the galleryview example. I append it to a div then I call the galleryview function:
$('#gallery').galleryView({
panel_width: 800,
panel_height: 300,
frame_width: 50,
frame_height: 50,
transition_speed: 350,
easing: 'easeInOutQuad',
transition_interval: 0
});
It works if I manually add the ul, li, img tags on the front page but if I add them using jQuery append it doesn't work. But I found that if I make the page load slowly and instantly run the append code it works. How can I use append and afterwards use the galleryview on the appended elements?
Source code:
function initialize_flickr(_div){
var newDiv = $(document.createElement('div'));
//add some style to the div
$(newDiv).css('background-color', '#223');
$(newDiv).css('width', 800);
$(newDiv).css('height', 800);
$(newDiv).css('position', 'absolute');
$(newDiv).css('left', 500);
$(newDiv).css('top', 0);
//append it to the _div
newDiv.appendTo(_div);
// Our very special jQuery JSON function call to Flickr, gets details of the most recent 20 images
$.getJSON("http://api.flickr.com/services/feeds/groups_pool.gne?id=998875@N22&lang=en-us&format=json&jsoncallback=?", displayImages);
function displayImages(data) {
// Randomly choose where to start. A random number between 0 and the number of photos we grabbed (20) minus 9 (we are displaying 9 photos).
var iStart = Math.floor(Math.random()*(11));
// Reset our counter to 0
var iCount = 0;
// Start putting together the HTML string
var htmlString = "<ul id='gallery'>";
// Now start cycling through our array of Flickr photo details
$.each(data.items, function(i,item){
// Let's only display 9 photos (a 3x3 grid), starting from a random point in the feed
if (iCount > iStart && iCount < (iStart + 10)) {
// I only want the ickle square thumbnails
var sourceSquare = (item.media.m).replace("_m.jpg", "_s.jpg");
// Here's where we piece together the HTML
htmlString += '<li>';
htmlString += '<span class="panel-overlay">'+item.title+'</span>';
htmlString += '<img src="'+sourceSquare+'" />';
htmlString += '</li>';
}
// Increase our counter by 1
iCount++;
});
// Pop our HTML in the #images DIV
$(newDiv).append(htmlString + "</ul>").each(function(){
$('#gallery').galleryView({
panel_width: 800,
panel_height: 300,
frame_width: 50,
frame_height: 50,
transition_speed: 350,
easing: 'easeInOutQuad',
transition_interval: 0
});
});
// Close down the JSON function call
}
}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
尝试将回调(用于 galleryView)添加到您的附加中。这样,您仅在追加后才调用 galleryView。
每个回调示例 -
您是否尝试在 DOM 完成解析之前运行 jQuery?尝试在浏览器加载后执行您的代码。
http://www.learningjquery.com/2006/09/introducing-document-ready
Try adding a callback(for galleryView) to your append. This way you are calling galleryView only after your append.
Each Callback Example-
Are you trying to run your jQuery before the DOM has finishing parsing? Try executing your code after the browser has loaded.
http://www.learningjquery.com/2006/09/introducing-document-ready