加载Ajax的图像进入'elastislide'旋转木马 [英] Ajax-loaded images into 'elastislide' carousel
问题描述
通过ajax加载的图片如下:图片包含在标签中
Loaded images via ajax like this: Images are contained in tags
$('#sandbox').load('./ajax/profile.html li a:eq(1),li a:eq(2),li a:eq(3)').hide();
现在我想将带有标签的图像注入名为'elastislide'的轮播中。
以下代码可以帮助我!
Now i want to inject the images with their tags into a carousel called 'elastislide'. The code below work, help me out!
for (k=0; k<=$('#sandbox').children().length;k++){
var ajaximg = $('#sandbox').children()[k];
var $q = $('<li>'+ajaximg+'</li> ');
$('#carousel3').append($q);
$('#carousel3').elastislide( 'add', $q );
};
推荐答案
可以使用以下代码更正上述代码:
The code above could be corrected with the following code:
$('#sandbox').load('./ajax/profile.html li a', function(result){
$(result).find('li a').each(function(){
var $q = $('<li>').append($(this));
$('#carousel3').append($q);
$q.add();
});
});
想法是通过ajax将图像加载到#carousel中,所以下面的代码完全没有首先加载到#sandbox。重要的是在下面加载文档时调用.elastislide()函数,因为在< li>< a>< img ... />< / a>< / li>
已被追加。否则旋转木马不会显示它们。
The idea was to load images into the #carousel via ajax, so the code below does it all without loading to #sandbox first. It is important that the .elastislide() function be called when the document is loaded as below because thats after the images in <li><a><img.../></a></li>
have been appended. Otherwise the carousel wont show them.
$('#carousel3').load('./ajax/profile.html li');
window.onload = initStyle;
function initStyle() {
$( '#carousel1' ).elastislide( {minItems : 2} );
$( '#carousel2' ).elastislide( {minItems : 2} );
$( '#carousel3' ).elastislide( {minItems : 2} );
};
这篇关于加载Ajax的图像进入'elastislide'旋转木马的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!