加载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屋！