Discussion :

[sylvain640]

Bonjour à tous

Je rencontre depuis un moment un problème avec symfony. J'avais l'habitude, lorsque je développais sans framework, d'utiliser du jQuery pour rendre mes pages plus attrayantes. Seulement, je me suis attelé à symfony depuis 3 semaines, et tout change

Je voudrais intégrer un carrousel en jQuery dans un template indexSuccess.php.
Évidemment, ça ne marche pas !

Voici le carrousel en question : http://interface.eyecon.ro/demos/carousel.html

Pouvez-vous m'indiquer où je dois placer mon fichier carousel.js dans l'arborescence de mon projet, et quel est le chemin à adopter dans ce template pour assurer la liaison ? De plus, d'autres modifications sont à prévoir pour l'utilisation de jQuery dans un projet symfony ?


Merci beaucoup d'avance pour vos réponses !

Très bon après-midi à vous !

[insane1]

Dans le dossier config de ton module tu as un fichier view.yml.
Dans ce fichier tu peux déclarer les fichiers js qui seront utilisés pour ton module.
Les fichiers js doivent être dans le dossier /web/js

Si ton carrousel utilise JQuery, n'oublie pas d'inclure également le fichier js de JQuery.

Et le tour est joué

[sylvain640]

Merci pour ta réponse

Je testerai ça demain au boulot, et je tiens au courant !

Je n'ai pas le view.yml sous les yeux, mais il me semble que c'est du genre

Code :

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

javascript: [ ]

Je transforme en :

Code :

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

javascript: [jquery.js,  carousel.js]

Et dans le template indexSuccess.php, que dois-je modifier (à part l'ajout des codes jquery bien sur) ?

[sylvain640]

Bonjour !

J'ai testé tout ça, et je n'arrive pas à le faire marcher dans le template...

Voici mon template indexSuccess.php :

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
<div id="carousel">
	<a href="/images/Sans-titre1.jpg" title="imgtest1" rel="imagebox"><img src="/images/Sans-titre1.JPG" /></a>
	<a href="/images/Sans-titre2.jpg" title="imgtest2" rel="imagebox"><img src="/images/Sans-titre2.JPG" /></a>
</div>
 
<script type="text/javascript">
window.onload = 
function()
{
	$('#carousel').Carousel(
		{
			itemWidth: 110,
			itemHeight: 62,
			itemMinWidth: 50,
			items: 'a',
			reflections: .5,
			rotationSpeed: 1.8
		}
	);
	$.ImageBox.init(
		{
			loaderSRC: 'images/imagebox/loading.gif',
			closeHTML: '<img src="images/imagebox/close.jpg" />'
		}
	);
};
</script>

et dans le view.yml :

Code :

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

javascripts:    [carousel.js, jquery.css]

Qu'en pensez-vous ?

[insane1]

Si tu ajoutes un jquery.css dans le javascript ca va mal se passer
Apres je ne connais pas l'utilisation de ce carrousel mais çà semble correct.
Regarde dans la source si tes fichiers js sont bien inclus.

[sylvain640]

Oups... En effet ça ne risque pas de marcher.

J'ai rectifié sur le view.yml, mais ça ne marche toujours pas !

Dans la console d'erreur de firefox, 2 erreur. On me dit :

Erreur*: jQuery is not defined
Fichier Source*: http://www.projetami.com.localhost/js/carousel.js
Ligne*: 70

Sur le fichier carousel.js, ça correspond à la ligne :

Code :

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

jQuery.iCarousel = {

Et :

Erreur*: $("#carousel").Carousel is not a function
Fichier Source*: http://www.projetami.com.localhost/a...testformulaire
Ligne*: 87

(testformulaire étant mon indexSuccess.php)

Ce qui correspond dans l'indexSuccess.php à ce paragraphe :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
	$('#carousel').Carousel(
		{
			itemWidth: 110,
			itemHeight: 62,
			itemMinWidth: 50,
			items: 'a',
			reflections: .5,
			rotationSpeed: 1.8
		}

Une fois la page chargée, dans le code source j'ai bien les fichiers .js chargés, et tout le code semble correct...