Dynamic jquery using i++ image fade in

I want to get the effect of this, except for every image that loads. i use i++ with php to assin an id value of 1,2,3,4,5 etc. id="id1", id="id2", etc is what my image gets.
$(document).ready(function(){
setTimeout(function () {$("#id1").fadeIn("fast");}, 100);
});

Im not sure what the code would be, something like:
id=0;
$(document).ready(function(){
id++
setTimeout(function () {$("#id" + id).fadeIn("fast");}, 100);
});

i know this wouldnt be at all correct, but something along the lines of this

 

$(document).ready(function() {
       for(var i = 0; i<10; i++) {
             $("#id" + id).fadeIn("fast");
       }
});

Code (markup):

That should work! you can use php to store the maximum amount of i's. Say,

<?php
for($i=0;$i<$max_num;$++) {
 //Your PHP Code
}
?>
<script type="text/javascript">
var max_i = <?php echo $i; ?>
$(document).ready(function() {
       for(var i = 0; i<max_i; i++) {
             $("#id" + id).fadeIn("fast");
       }
});
</script>

Code (markup):

Hope that helps! Any problem feel free to ask!

 

tried it, doesnt work.

my php

<?php 
$files = glob("shows/*.*");
$f=0;
for ($i=1; $i<count($files); $i++)
{ 
	$num = $files[$i];
	echo '<a href="'.$num.'"><img id="'.$f++.'"class="photo-container" src="'.$num.'"></a>';
}
?>

PHP:

and the script you gave me. (took id out)

$(document).ready(function() {
       for(var i = 0; i<10; i++) {
             $("#" + id).fadeIn("fast");
       }
});

HTML:

 

Sorry, this would be the code:

<?php
$files = glob("shows/*.*");
$f=0;
for ($i=1; $i<count($files); $i++)
{
    $num = $files[$i];
    echo '<a href="'.$num.'"><img id="'.$f++.'"class="photo-container" src="'.$num.'"></a>';
}
?>
<script type='text/javascript'>
var max_i = <?php echo $i; ?>;
$(document).ready(function() {
       for(var i = 0; i<max_i; i++) {
             $("#" + i).fadeIn("fast");
       }
});
</script>

Code (markup):

 

Hey thank you very much, that works perfectly. Just one thing, do you know how to make it so for each id it fades in 100 miliseconds after the last. So the result would be like:

setTimeout(function () {$("#1").fadeIn("fast");}, 100);
setTimeout(function () {$("#2").fadeIn("fast");}, 200);

etc up until the last image. Thanks in advance. ANd thanks for the help previously