Question

我用Jquery创建了一个库，它工作正常，后来我决定从目录而不是标签中获取文件。

我使用了AJAX和PHP，我将图像放入了图库div，但是css类不会影响图库以使其工作。

html

        <div id="gallery-holder">
    <!--            <img src="images/mainGallery/main-galery1.jpg" class="active"  >
                    <img src="images/mainGallery/main-galery2.jpg" >
                    <img src="images/mainGallery/main-galery3.jpg" >
    -->
                </div>

Jquery的

    $(document).ready(function(){
        $.ajax({
                url: 'mainGallery.php',                                 
                success: function(data){
                 $('#gallery-holder').html(data);

                  }
             }).error(function(){
                alert('an alert occored');
                }).success(function(){
            //  alert('success');
                }).complete(function(){
            //  alert('complete');
                });     


    slideSwitch();

    });

    function slideSwitch() {

        var $gallery = $('#gallery-holder'),

            $active  = $gallery.find('img:visible'),

            $next    = $active.next().length ? $active.next() : $gallery.find('img').first();



        setTimeout(function() {

            $active.fadeOut('slow');

            $next.fadeIn('slow', slideSwitch);

        }, 2000);

    };

PHP

    <?php
        $i=0;
     foreach(glob('./images/mainGallery/*.*' ) as $filename){
        if ($i==0){
            echo '<img src="'.$filename.'" class="active">';
        }
        else echo '<img src="'.$filename.'">';
        $i++;
     }

    ?>

看起来HTML似乎无法识别AJAX的Active类。控制台中没有错误。

请帮忙......

感谢， CFIR。

Answer 1

在成功回调中移动你的函数调用，否则它将在添加元素之前运行：

$(document).ready(function(){
    $.ajax({
        url: 'mainGallery.php',                                 
        success: function(data){
            $('#gallery-holder').html(data);
            slideSwitch(); //Initialize slider after elements are loaded into the DOM
        }
    );   
});

Answer 2

推断：IE ignores styles for dynamically loaded content，我建议您尝试从PHP中返回<img src="images/mainGallery/main-galery1.jpg" id="displayimg">之类的内容，然后执行：

$('#gallery-holder').html(data);
$('#displayimg').addClass("active");

试试吧。

JQuery AJAX和php gallery幻灯片放映

2 个答案: