Charger Flexslider2 via Ajax

Bonjour,

en introduction je souhaiterais préciser je ne suis pas un grand professionnel du web, et que ce forum m'a énormément aidé pour le site internet personnel que je suis en train de développer. Alors j'adresse un grand merci à toutes les personnes animant ce forum.

Cependant me voici en face d'un problème qui me semble insoluble.
Mon site est un portfolio de designer, et mon but est que lorsque le visiteur click sur une vignette projet , un slider apparaisse au dessous, de la vignette, et affiche un diaporama des images du projet. Afin de ne pas rendre mon index.html trop lourd à charger, j'ai créé une page annexe contenant le slider, et c'est le slider de cette page que j'appel en ajax.

Le problème est que lorsque le slider s'ouvre, les images elles ne sont pas présentes, et de ce que j'y comprend, c'est probablement parce que le jquery ne se lance qu'au chargement de la page, le contenu charger en ajax n'étant pas considéré comme une nouvelle page le jquery ne se relance pas.

Voici mon code HTML de mon index.html, (vous noterez que j'appel flexslider aussi depuis cette page, je ne suis pas certain que cela aide mais je le met au cas où):

<div id="project">
     	   <div class="project">
     	   <p class="titre">Projects</p>
     	   <a href="xyfi.html"><div class="col span_1_of_4"><img src="img/xyfi.jpg" class="siteimage" /></div></a>
    	
     	   	</div>
     </div>


 <div id="slides">
  
          	</div>
 <script defer src="js/jquery.flexslider.js"></script>
        
        <script type="text/javascript">
          $(function(){
            SyntaxHighlighter.all();
          });
          $(window).load(function(){
            $('.flexslider').flexslider({
              animation: "slide",
              animationLoop: false,
              itemWidth: 210,
              itemMargin: 5,
              start: function(slider){
                $('body').removeClass('loading');
              }
            });
          });
        </script>
      
      
        <!-- Syntax Highlighter -->
        <script type="text/javascript" src="js/shCore.js"></script>
        <script type="text/javascript" src="js/shBrushXml.js"></script>
        <script type="text/javascript" src="js/shBrushJScript.js"></script>
        
        <!-- Optional FlexSlider Additions -->
        <script src="js/jquery.easing.js"></script>
        <script src="js/jquery.mousewheel.js"></script>

Voici le code de la seconde page contenant le slider:

<div id="slides">
<script defer src="js/jquery.flexslider.js"></script>
<div id="slider">
<div class="titre2">XYFI</div>

<div id="main" role="main">
<section class="slider">
  <div class="flexslider carousel">
<ul class="slides">
        <li><img src="img/xyfi/xyfi-00.jpg" /></li>
        <li><img src="img/xyfi/xyfi-01.jpg" /></li>
        <li><img src="img/xyfi/xyfi-02.jpg" /></li>
        <li><img src="img/xyfi/xyfi-03.jpg" /></li>
        <li><img src="img/xyfi/xyfi-04.jpg" /></li>
        <li><img src="img/xyfi/xyfi-05.jpg" /></li>
        <li><img src="img/xyfi/xyfi-06.jpg" /></li>
        <li><img src="img/xyfi/xyfi-07.jpg" /></li>
        <li><img src="img/xyfi/xyfi-08.jpg" /></li>
        <li><img src="img/xyfi/xyfi-09.jpg" /></li>
        <li><img src="img/xyfi/xyfi-10.jpg" /></li>
        <li><img src="img/xyfi/xyfi-11.jpg" /></li>
        <li><img src="img/xyfi/xyfi-12.jpg" /></li>
        <li><img src="img/xyfi/xyfi-13.jpg" /></li>
</ul>
</div>
</section>
</div>
	
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
 <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.min.js">\x3C/script>')</script>      
 <script defer src="js/jquery.flexslider.js"></script>
   
   <script type="text/javascript">
     $(function(){
       SyntaxHighlighter.all();
     });
     $(window).load(function(){
       $('.flexslider').flexslider({
         animation: "slide",
         animationLoop: false,
         itemWidth: 210,
         itemMargin: 5,
         start: function(slider){
           $('body').removeClass('loading');
         }
       });
     });
   </script>
 
 
   <!-- Syntax Highlighter -->
   <script type="text/javascript" src="js/shCore.js"></script>
   <script type="text/javascript" src="js/shBrushXml.js"></script>
   <script type="text/javascript" src="js/shBrushJScript.js"></script>
   
   <!-- Optional FlexSlider Additions -->
   <script src="js/jquery.easing.js"></script>
   <script src="js/jquery.mousewheel.js"></script>

Et voici mon java script en charge de faire l'appel ajax:

$(document).ready(function() {
						   
	var hash = window.location.hash.substr(1);
	var href = $('#project a').each(function(){
		var href = $(this).attr('href');
		if(hash==href.substr(0,href.length-5)){
			var toLoad = hash+'.html #slides';
			$('#slides').load(toLoad)
		}											
	});

	$('#project a').click(function(){
								  
		var toLoad = $(this).attr('href')+' #slides';
		$('#slides').hide('fast',loadContent);
		$('#load').remove();
		$('#wrapper').append('<span id="load">LOADING...</span>');
		$('#load').fadeIn('normal');
		window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
		function loadContent() {
			$('#slides').load(toLoad,'',showNewContent())
		}
		function showNewContent() {
			$('#slides').show('normal',hideLoader());
		}
		function hideLoader() {
			$('#slides').fadeOut('normal');
		}
		return false;

});
});

Alors si l'un d'entre-vous peut m'aider je lui en serai infiniment reconnaissant!

Merci d'avance