llimllib · July 13, 2011 19:24
diff --git a/gistfile1.html b/gistfile1.html
 <html><head><title>test</title>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
 <script>
 //the images array. Each group of 8 images should be a row in the images table
 var images = [
  ["http://i.imgur.com/YpJyG.jpg", "http://i.imgur.com/1hUh9.jpg"],
  ["http://i.imgur.com/4cWJ2.jpg", "http://i.imgur.com/H60Es.jpg"]
 ]

 //default one second timeout, set to anything you want
 var timeout = 1000;

 function fade(i, container) {
  //wrap around to the start if we're past the end
  if (i > images.length-1) {
    i = 0;
  }

  //clear the img-container
  $("#img-container").html("")

  //for each image in the current row, add it to the container and fade it in
  $.each(images[i], function(j, img) {
    $(container).append('<img class="fadein" src="'+img+'" style="display:none" width=250 height=250>');
    $(".fadein").fadeIn('slow', function() {
      //once the fade completes, set a timeout for the fadeout
      setTimeout(function() {
        $(".fadein").fadeOut('slow', function() {
          //when that's done, fade in the next set
          fade(i+1, container);
        });
      }, timeout);
    });
  });
 }

 $(function() {
  fade(0, "#img-container");
 });
 </script>
 </head><body>
 <div id="img-container">
 </div>
 </body></html>
	<html><head><title>test</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
	<script>
	//the images array. Each group of 8 images should be a row in the images table
	var images = [
	["http://i.imgur.com/YpJyG.jpg", "http://i.imgur.com/1hUh9.jpg"],
	["http://i.imgur.com/4cWJ2.jpg", "http://i.imgur.com/H60Es.jpg"]
	]

	//default one second timeout, set to anything you want
	var timeout = 1000;

	function fade(i, container) {
	//wrap around to the start if we're past the end
	if (i > images.length-1) {
	i = 0;
	}

	//clear the img-container
	$("#img-container").html("")

	//for each image in the current row, add it to the container and fade it in
	$.each(images[i], function(j, img) {
	$(container).append('<img class="fadein" src="'+img+'" style="display:none" width=250 height=250>');
	$(".fadein").fadeIn('slow', function() {
	//once the fade completes, set a timeout for the fadeout
	setTimeout(function() {
	$(".fadein").fadeOut('slow', function() {
	//when that's done, fade in the next set
	fade(i+1, container);
	});
	}, timeout);
	});
	});
	}

	$(function() {
	fade(0, "#img-container");
	});
	</script>
	</head><body>
	<div id="img-container">
	</div>
	</body></html>