//Loop through the images and print them to the page
	  for (var i=0; i < totalBoxes; i++){
		  //$("p").add(arr).appendTo('#bg');
		  $.ajax({
			  url: "random.php?no=",
			  cache: false,
			  success: function(html){
				$(html).fadeIn(html).appendTo('#bg');
			  }
		  });
	  }

	//Choose the image to be faded in
		$(".pf-box img").hover(function(){
		var largePath = $(this).attr("rel");
			$(this).fadeOut("slow", function() {
					$(this).attr({ src: largePath }).fadeIn("slow");
			});
			return false;
		});

<div class="pf-box" style="">
<a href="#">
This is where the image is printed with the rel attribute on the image tag. (stackoverflow didnt allow the posting of the img tag because its my first post)
</a>
</div>

function(html) {
    $('#bg').append(html).fadeIn('slow');
}

// Loop through the images and print them to the page.
// Attach hover event within the callback, after image has been added.
for (var i=0; i < totalBoxes; i++){
    $.ajax({
        url: "random.php?no=",
        cache: false,
        success: function(html) {
            // following line I originally suggested, but let's make it better...
            //$('#bg').append(html).fadeIn('slow');
            // also note the fine difference between append and appendTo.
            var $d = $(html).hide().appendTo('#bg').fadeIn('slow');
            $('img', $d).hover(function() {
                var largePath = $(this).attr("rel");
                $(this).fadeOut("slow", function() {
                    $(this).attr({ src: largePath }).fadeIn("slow");
                });
            });
        }
    });
}

success: function(html){
                            $(html).appendTo('#bg').fadeIn("slow");
                      }