JQuery AJAX and php gallery slide show - php

Question

I create a gallery with Jquery and it worked fine, later on I decided to get the file from directory and not from tag.
I used AJAX and PHP, I get the images into the gallery div but the css class not influence the the gallery to make it work.
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++;
}
?>
It's look like the HTML is not recognize the Active class form the AJAX.
No errors in the console.
please help...
thanks,
Cfir.

Answer 1

Move your function call inside the success callback, otherwise it will run before the elements have been added:
$(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

Inferring from this: IE ignores styles for dynamically loaded content, I'd suggest you try and return something like <img src="images/mainGallery/main-galery1.jpg" id="displayimg"> from your PHP, and then do:
$('#gallery-holder').html(data);
$('#displayimg').addClass("active");
Try it.