Javascript et Ajax - imageFlow

**Cadien** · 18/02/2011, 17h14

Bonjour,

Je me tourne vers vous car je suis un peu perdu (soit je maîtrise pas assez, soit j'ai zappé un truc

)

Avant de balancer des longues lignes de code, je m'explique.
Je créer un site qui charge les pages dynamiquement en ajax, sur l'une d'entre elles je voudrais mettre en place un carrousel de type imageFlow ( http://finnrudolph.de/ImageFlow )

Les images s'affichent (avec les css donc en hidden) Mais le script js ne semble pas s'exécuter.
J'ai essayé de mettre mon "include" sur la page html appelée ou dans le head.

Mais aucune de ces 2 techniques ne marchent.
J'ai auparavant essayé mon code sur la page d'accueil et mon carrousel fonctionne dons l'erreur ne vient pas de là...

Voili, voilou

Si vous savez régler mon soucis je vous en serais très reconnaissant !!

http://www.gala-telecom.com/new/ => Le programme => les artistes => DJ Julian

Le site est encore en dev/test donc c'est peut être le bazar...

Mon index :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
	<head>
		<title>Gala Telecom 2011 @ La Géode</title> 
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<meta http-equiv="description" content="Gala TÉLÉCOM @ La Géode Le 25 Mars 2011 à la Géode - Cité de la Science, Porte de la Villette (Paris) Gala effervescence de Télécom SudParis &amp; Télécom Ecole de Management" />
		<link rel="stylesheet" media="screen" type="text/css" title="Design" href="gala.css" />
		<link rel="stylesheet" href="scripts/bgstretcher.css" />
		<link href="scripts/flexcrollstyles.css" rel="stylesheet" type="text/css" />
 
		<!-- Jonathan -->
		<link rel="stylesheet" href="scripts/slimbox2.css" type="text/css" media="screen" />
		<link rel="stylesheet" href="scripts/imageFlow/imageflow.css" type="text/css" />
		<!-- <script src="scripts/imageFlow/imageflow.js" type="text/javascript"></script> -->
 
		<link rel="shortcut icon" href="images/mini.png" />
		<!--[if !IE]><-->
			<script type="text/javascript" src="scripts/defilement.js"></script>
		<!--><![endif]-->
		<!--[if IE 9]>
			<script type="text/javascript" src="scripts/defilement.js"></script>
		<![endif]-->	
		<!--[if lt IE 9]>
			<script type="text/javascript" src="scripts/defilement_old_ie.js"></script>
		<![endif]-->
 
		<script type="text/javascript" src="scripts/jquery.js"></script>
		<script type="text/javascript" src="scripts/bgstretcher.js"></script>
		<script type='text/javascript' src="scripts/flexcroll.js"></script>
	</head>
	<body>
		<script type="text/javascript">
		//Le Fond
			$(document).ready(function(){
			//  Initialize Backgound Stretcher
			$(document).bgStretcher({images: ['images/fonds/paris.png', 'images/fonds/geode.jpg', 'images/fonds/geode2.jpg'], imageWidth: 1440, imageHeight: 800});
			});
		</script>	
 
		<!--<div style="width: 500px; height: 500px;">
			<div id="unique" class="imageflow"> 
				<img src="images/slide/julian/11.png" longdesc="images/slide/julian/1.jpg" width="150" height="113" alt="Text_1" />
				<img src="images/slide/julian/22.png" longdesc="images/slide/julian/2.jpg" width="150" height="113" alt="Text_2" />
				<img src="images/slide/julian/33.png" longdesc="images/slide/julian/3.jpg" width="118" height="150" alt="Text_3" />
			</div>
		</div>-->
 
		<!--Le menu-->
		<?php include("menu.php"); ?>
 
		<!--Le corps-->
		<?php include("corps.php"); ?>
 
		<script type="text/javascript">	
			function place_item_menu(){
				var menu = document.getElementById('menu').offsetHeight;
				$('.lien_accueil').css('margin-top',menu * 0.08 + "px");
				$('#menu a').css('height',menu * 0.05 + "px");
				$('#menu_secondaire a').css('height',menu * 0.05 + "px");
				//alert(document.getElementById('menu').offsetHeight * 0.4 + "px");
			}
			charger_page('accueil');
			place_item_menu();
			$(window).resize(place_item_menu);
		</script>
 
	</body>
</html>

Ici lorsque le code de mon imageFlow n'est pas en commentaire (avec l'include) il marche et affiche ce que je souhaite.

La page en question :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div id="page_julian">
 
	<!-- Jonathan -->
	<!--<script type="text/javascript" src="scripts/slimbox2.js"></script>-->
	<script type="text/javascript" src="scripts/imageFlow/imageflow.js"></script>
 
	<h1>DJ Julian :</h1><br />
 
	<!--<a href="images/slide/julian/1.jpg" rel="lightbox-test" title="my caption">image #1</a>
	<a href="images/slide/julian/2.jpg" rel="lightbox-test">image #2</a>
	<a href="images/slide/julian/3.jpg" rel="lightbox-test">image #3</a>
	<a href="images/slide/julian/4.jpg" rel="lightbox-test">image #2</a>-->
 
	<div style="width: 500px; height: 400px;">
		<div id="unique" class="imageflow"> 
			<img src="images/slide/julian/11.png" longdesc="images/slide/julian/1.jpg" width="150" height="113" alt="Text_1" />
			<img src="images/slide/julian/22.png" longdesc="images/slide/julian/2.jpg" width="150" height="113" alt="Text_2" />
			<img src="images/slide/julian/33.png" longdesc="images/slide/julian/3.jpg" width="118" height="150" alt="Text_3" />
		</div>
	</div>
</div>

Je voudrais que mon code s'exécute sur cette page.

Bon je m'y connais pas des masses en ajax donc c'est peut être moche de faire des includes ici...

Tout ce qui est en commentaire est un code pour une/un (je sais pas trop :p ) Slimbox 2 ( http://www.digitalia.be/software/slimbox2 ) qui lui marche comme je le souhaite.
Donc je me disais qu'en faisant la même chose pour mon imageFlow ça marcherait mais bon pas trop apparemment...

La fonction d'appel :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
function afficher_description_artiste(nom_artiste)
{
	$('#caldera').animate(
						{
							left : '-50%'
						}
						,'slow'
						,'swing'
						);
	$('#skut').animate(
						{
							top : '-500px'
						}
						,'slow'
						,'swing'
						);
	$('#julian').animate(
						{
							right : '-50%'
						}
						,'slow'
						,'swing'
						,function(){
							$('#bg_corpss').load('pages/'+nom_artiste+'.html'); //on charge la page correspondant a l'artiste 
setTimeout("fleXenv.updateScrollBars()",2000);						
						}
						);
}

Merci !!!

(déjà d'avoir tout lu

)

**SpaceFrog** · 22/02/2011, 14h07

ajax retourne du string ...
le js contenu n'est pas interprété
le sujet a déja été traité sur le forum jquery, je te bascule là bas ...

**Cadien** · 22/02/2011, 16h49

Ah okay

Merci !!

Le truc c'est que je dois faire du faux ajax

Car je code avec un pote ce site et il m'a dit que c'est de l'ajax, donc je le crois...

Mais si safari arrive à l'interpréter ça veut dire que c'est pas du vrai ajax et que le soucis se trouve autre part ?

ps : firefox arrive à interpréter un autre script (mootools) que j'utilise pour faire un effet pas forcément utile sur la page... Et un autre bout de code très rapide pour lancer un lecteur mp3...

Donc bon je me disais qu'il pourrait aussi lire la librairie

Je suis un peu perdu en fait...

Javascript et Ajax - imageFlow

jQuery

Vue hybride

Discussions similaires

Partager

Partager