Jquery Random Slider doesn't show all images in json array

Question

I'm writing my first jquery code and I've to write a random slider that will get images through a php function and will show them in a sequence with some decoration. Random thing is done in php. My jquery is as follows.

function bannerSlide(){
     $.ajax({
    type: "GET",
    url: "test.php",
    dataType: 'json',
    success: function(images) {
      $.each(images, function (index, value) {
        $('#banner').slideUp(500).delay(2000).fadeIn(500).css('background', 'url(ItemPictures/'+value+')');
    });

    }
  });
}

I get images in images array and loop through it. The problem I'm facing is that my this code only shows the last image in array. other images are not shown and it keeps sliding the last image of array. But if I put an alert statement inside $.each function then image changes after I click on ok of alert box and it goes on.

Any help will be highly appreciated.
Please don't suggest to use some already built slider.

Answer 1

The each loop will run in microseconds and set the css value immediately on each pass with your code. Thus you only see the last image

Here's a solution using setTimeout and changing the css within the callback of the first animation so the css only gets changed at appropriate time. You may need to adjust the timeout interval index*3000

$.each(images, function(index, value) {
    setTimeout(function() {
        $('#banner').slideUp(500, function() {
            /* use callback of animation to change element properties */
            $(this).delay(2000).fadeIn(500).css('background', 'url(ItemPictures/'+value+')');
        })
    }, index * 3000);
});

DEMO using text change of element http://jsfiddle.net/RrPu6/

Answer 2

Following code is solution to the posted problem.

function bannerSlide(){
  $.ajax({
    type: "GET",
    url: "test.php",
    dataType: 'json',
    success: function(imgs) {
      var cnt = imgs.length;
        $(function() {
            setInterval(Slider, 3000);
        });
        function Slider() {
        $('#imageSlide').fadeOut("slow", function() {
           $(this).attr('src', 'ItemPictures/'+imgs[(imgs.length++) % cnt]).fadeIn("slow");
        });
        }
    }
  });
}

where imageSlide is id of an img tag inside 'banner' 'div'

Answer 3

The problem is that you are iterating over the array of images, and for each one you're setting the background of the same DOM element... $('#banner') . This is going to happen so fast that you'll only see the last image, at the end of the iteration. This is also why you can see it changing if you alert() in between, because execution is paused during alert() .

You'll have to figure out a way to delay the changing of the background. One thing you can try is adding an increasing delay() before your slideUp() . Something like:

function bannerSlide(){
  $.ajax({
    type: "GET",
    url: "test.php",
    dataType: 'json',
    success: function(images) {
      var duration = 2000;
      var element = $('#banner');
      $.each(images, function (index, value) {
        element.delay(index * duration).slideUp(500).delay(duration).fadeIn(500).css('background', 'url(ItemPictures/'+value+')');
        initialDelay += duration;
    });

    }
  });
}

It's an ugly hack, but that's why those already built sliders exist :)