[résolu] Chargement ajax d'un slider

bonjour,
j'essaye pour la première fois un chargement d'une page externe via jQuery et j'ai quelques suprises...

mon but est de charger sur une page d'accueil (et toutes les pages du site) un slider pleine largeur d'écran un peu complexe. je l'ai donc réalisé sur une page séparée et je veux le charger à l'aide jquery.

le slider marche très bien sur sa propre page, mais avec la méthode du chargement ajax, certaines fonctions jQuery ne sont pas prise en compte et surtout il ne reconnais pas la largeur d'écran et ne s'initialise pas...

j'imagine que ça vient du chargement dynamique et que pas mal de trucs sont oubliés en chemin... mais quoi ?


voilà mon code pour le chargement :

<script type="text/javascript">
$(document).ready(function(){
   $('#ajax').css('display','block').animate({height:'489px'},function(){
      $('#ajax').html('<img class="loader" src="loader.gif" alt="loading">');
      $('#ajax').load('portfolio.php #'+'portfolio',function(){
				$('#ajax #portfolio').hide().fadeIn();
			});
		});
});
</script>

et voilà ce que j'ai dans mon slider :

<!-- slider -->
	<div class="pschhhlider"> 
			
			<!-- slides -->
			<div id="slider-portfolio" class="pschhhlider-inner"> 
				
<!-- slide bloc -->
				<div class="slide-bloc">
					
					<!-- bloc image -->
					<div class="slide-img">
					<img src="book/boulot.jpg" alt="image boulot" />
					</div>
										
					<!-- bloc texte -->
					<div class="slide-texte">
						<!-- title -->
						<h2 class="proj-title" id="show-refproj">Mon titre</h2>
						
							<!-- text content -->
							<div class="poptext" id="refproj">
							<a class="closetext" href="#"><span>Fermer</span></a>
							<h3>Mon titre</h3>
							<p>Phasellus sagittis urna vitae sem eleifend dictum. Maecenas scelerisque elementum nisl, vel pretium arcu feugiat sit amet. Praesent sodales ligula nec massa auctor ornare. Sed non risus ante, et fermentum sapien.</p>
							</div> 
					</div>
										
					<!-- bloc logo -->
					<div class="slide-logo">
					<img src="book/logo.png" alt="logo" />
					</div>
				
				</div>
				<script type="text/javascript">
					$('#refproj').hide();
					$('#show-refproj').click( function() {
						$('#refproj').fadeIn('normal');
						$('#show-refproj').fadeOut('normal');
   					});
   					$('.closetext').click( function() {
						$('#refproj').fadeOut('normal');
						$('#show-refproj').fadeIn('normal');
   					});
   				</script>
<!-- end slide bloc -->

                                <div class="slide-bloc">
				blabla
				</div>
				
				<div class="slide-bloc">
				blablabalabesdgdf
				</div>
				
				<div class="slide-bloc">
				blablabalabesdgdfgjhfjkhfjhdjhfdjhf
				</div>
			
			</div>
			<!-- end slides -->	
			
			<div class="clearfix"></div> <!-- important -->
		
		<!-- slider navigation -->
		<a id="slide-prev" class="prev" href="#"><span>Précédent</span></a>
		<a id="slide-next" class="next" href="#"><span>Suivant</span></a>
					
	</div>
<!-- end slider -->

l'insert javascript pour masquer/afficher les textes ne fonctionne pas du tout par exemple...
dites moi si vous voulkez voir un exemple en ligne !

merci du fond du coeur pour votre aide !


edit: j'ai oublié le code pour initialiser le slider

$(function() {
	$(window).resize(function() {
	var newWidth = $(window).width();
	
	$('#slider-portfolio').carouFredSel({
		width: newWidth,
		height: 340,
		items: {visible: 4, width: 470, height: 340},
		scroll: 1,
		auto: false,
		pauseOnHover : true,
		next: '#slide-next',
		prev: '#slide-prev'
		});
	
	});
	$(window).resize();
});

Modifié par beloutte (04 Oct 2011 - 15:01)

bon j'ai résolu le problème

modifié cette ligne pour la partie chargement :

$('#ajax').load('portfolio.php #'+'portfolio',function(){

qui empêchait les codes jquery de s'exécuter...

en un truc plus simple :

$('#ajax').load('portfolio.php',function(){

ça m'oblige à revoir un peu le fonctionnement du truc mais rien de grave...

du coup j'ai placé l'initialisation du slider dans la page externe et tout marche très bien.