Javascript et Ajax - imageFlow
Bonjour,
Je me tourne vers vous car je suis un peu perdu (soit je maîtrise pas assez, soit j'ai zappé un truc :roll: )
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... :mrgreen:
Mon index :
Code:
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 & 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:
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... :oops:
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... :mouarf:
La fonction d'appel :
Code:
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 !!! :ccool:
(déjà d'avoir tout lu :mrgreen:)
