Initiate fancybox on dynamically loaded content via AJAX

[Fliz]

Hello,
i'm having some problems with Fancybox. I have a design.html where i
have a list of images. I can click on those and fancybox gets
activated. I also created an ajax script telling the website to load
external .html files into the standard div in design.html by clicking
on a next or previous arrow. The ajax code is as following:
------
$(document).ready(function(){
var $paginanummerpersonal = 0;
$("#nextpagepersonal").click(function() {
$paginanummerpersonal++;
if($paginanummerpersonal==2) $paginanummerpersonal=0;
$(".loadpagepersonal").hide();
$(".loadpagepersonal").load("artwork/personal/personalpage"+
$paginanummerpersonal +".html", function(){
$(this).fadeIn
(200);
}) ;
});
$("#previouspagepersonal").click(function() {
$paginanummerpersonal--;
if($paginanummerpersonal<0) $paginanummerpersonal=1;
$(".loadpagepersonal").hide();
$(".loadpagepersonal").load("artwork/personal/personalpage"+
$paginanummerpersonal +".html", function(){
$(this).fadeIn
(200);
}) ;
});
});

-------
Very simple it is ;-)
Now, the problem is, when i click 'previous' or 'next' at least once,
the external pages are loaded and i can never get back my original
contentdiv on the design.html page. That's normal, since ajax loaded
the content from now on. Fancybox however refuses to load when i click
on an image from the newly loaded content. A new content page looks
like this:
----
<script src="http://www.mathijsdelva.be/Vault/js/jquery-1.3.2.min.js"
type="text/javascript"></script>
<script type="text/javascript" src="http://www.mathijsdelva.be/Vault/
js/jquery.fancybox.js"></script>
<script type="text/javascript" src="http://www.mathijsdelva.be/Vault/
js/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a.personal").fancybox({
'hideOnContentClick': false,
'zoomSpeedIn': 0,
'zoomSpeedOut': 0,
'overlayShow': true
});
});

</script>
<link rel="stylesheet" href="http://www.mathijsdelva.be/Vault/style/
jquery.fancybox.css" type="text/css" media="screen" />
<a rel="personal" href="artwork/personal/big/1.png"
class="personal"><img src="artwork/personal/1.png" alt="1"
class="nopadding"/></a>
<a rel="personal" href="artwork/personal/big/2.png"
class="personal"><img src="artwork/personal/2.png" alt="2" /></a>
<a rel="personal" href="artwork/personal/big/3.png"
class="personal"><img src="artwork/personal/3.png" alt="3" /></a>
<a rel="personal" href="artwork/personal/big/4.png"
class="personal"><img src="artwork/personal/4.png" alt="4"
class="nopadding"/></a>
<a rel="personal" href="artwork/personal/big/5.png"
class="personal"><img src="artwork/personal/5.png" alt="5" /></a>
-----

What am i doing wrong? Am i missing something? Can anyone help?
Thanks a lot!

[Fliz]

Nobody?