Background image transition with fadeIn fadeOut effects on page load without any bindings to events

Question

I would like to implement a background image transition effect using jquery. The images should change from one to the other with a fadeIn fadeOut effect. The image names are in the database but retrieved from a folder on my PC.I want the transition to take place automatically without listening to any events like click events. This is my trial code from the php page to the js page.

This is getImages.php

<?php
error_reporting(E_ALL ^ E_NOTICE);

require_once("Connections/imageconn.php");

mysql_select_db($database_imageconn,$imageconn);
$sql1=mysql_query("SELECT * FROM images WHERE ImageID=1",$imageconn)or die(mysql_error());
$numofrows=mysql_num_rows($sql1);
$image_one=mysql_fetch_assoc($sql1);
$img1=$image_one['Image_name'];

$sql2=mysql_query("SELECT * FROM images WHERE ImageID=2",$imageconn)or die(mysql_error());
$numofrows=mysql_num_rows($sql2);
$image_two=mysql_fetch_assoc($sql2);
$img2=$image_two['Image_name'];

$sql3=mysql_query("SELECT * FROM images WHERE ImageID=3",$imageconn)or die(mysql_error());
$numofrows=mysql_num_rows($sql3);
$image_three=mysql_fetch_assoc($sql3);
$img3=$image_three['Image_name'];

$sql4=mysql_query("SELECT * FROM images WHERE ImageID=4",$imageconn)or die(mysql_error());
$numofrows=mysql_num_rows($sql4);
$image_four=mysql_fetch_assoc($sql4);
$img4=$image_four['Image_name'];


$data['imageone']=$img1;
$data['imagetwo']=$img2;
$data['imagethree']=$img3;
$data['imagefour']=$img4;

echo json_encode($data);
?>

This is images.php

$(document).ready(function(){
    $.post("getImage.php",{},function(data){

            $("#response").toggle(function(){
                  $(this).html("<img src=\"Images/"+data.imageone+"\"/>");
                },function()
                {
                  $(this).html("<img src=\"Images/"+data.imagetwo+"\"/>");
                },function()
                {
                  $(this).html("<img src=\"Images/"+data.imagethree+"\"/>");
                },function()
                {
                  $(this).html("<img src=\"Images/"+data.imagefour+"\"/>");
                });

        },"json");
});

Any help would be appreciated.

Answer 1

Given a DOM structure like:

<div class='wrapper'>
  <img src='Images/image1.jpg'  border='0' />
  <img src='Images/image2.jpg'  border='0' />
  <img src='Images/image3.jpg'  border='0' />
</div>

var i = 0;
var number = $('.wrapper img').size();
var tabtimer = self.setInterval(function() {
  crossFade(i);
  i++;
  if (i == number + 1){ i = 0}
},
8000);

function crossFade(i){
  $('.wrapper img:visible').fadeOut();
  $('.wrapper img:nth-child('+i+')').fadeIn();
};

Answer 2

This will iterate over your JSON properties, create the <img>'s in the DOM and then fade them in and out with a 1 second delay between each.

var idx = 0;
for (var i in data) {

    // Create the image DOM elements
    var img = $('<img src="Images/' + data[i] + '"/>');
    img.css({opacity: 0});

    // Add them to their container
    $('#response').append(img);

    // Set fadeIn/Out delays
    var delay = idx++ * 1000;
    img.delay(delay).fadeIn();
    img.delay(delay + 1000).fadeOut();         
}