php - JQuery AJAX 和 php 画廊幻灯片放映

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 忽略了动态加载内容的样式，我建议您尝试<img src="images/mainGallery/main-galery1.jpg" id="displayimg">从您的 PHP 中返回类似的内容，然后执行以下操作：

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

试试看。