Intégration Carrousel jQuery dans un template

Version imprimable

16/02/2011, 16h43
sylvain640

Intégration Carrousel jQuery dans un template

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 ! :D

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 ! :)
16/02/2011, 17h55
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é ;)
16/02/2011, 22h12
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:

javascript: [ ]

Je transforme en :

Code:

javascript: [jquery.js, carousel.js]

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

Bonjour !

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

Voici mon template indexSuccess.php :

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
<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:

javascripts: [carousel.js, jquery.css]

Qu'en pensez-vous ? :)

17/02/2011, 09h39
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.
17/02/2011, 10h03
sylvain640
Oups... :roll: 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:

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:

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...
17/02/2011, 10h39
insane1

Est ce que tu inclue le fichier carousel.js avant le fichier jquery.js dans ton view.yml ? Si oui mets jquery.js avant.
17/02/2011, 10h55
sylvain640

Re !!

Bonne nouvelle : plus d'erreur, ça fonctionne !

La solution : en fait, ce carrousel nécessite de lier un certain nombre de fichiers. Si on regarde le code source de la page de démo (ICI), on remarque qu'il a lié beaucoup de .js. J'ai pensé que certains étaient inutile car ils correspondent à d'autres plugins du site. J'ai donc gardé seulement carousel.js et jquery.js, or il me fallait aussi iutil.js. Il y avait aussi un problème de jQuery au lieu de jquery...

Bref, merci encore pour tes conseils :ccool:

Bonne journée :)
17/02/2011, 11h33
insane1

Si ton problème est résolu, n'oublie pas de l'indiquer comme tel.

Bonne journée
01/03/2011, 17h07
zen2878

Même souci

Bonjour à tous,
J'ai exactement le même souci et impossible de le résoudre, pourtant j'ai résolu les erreurs s'affichant dans la console en ajoutant les fichiers carousel.js et iutil.js, maintenant plus d'erreur mais toujours pas de caroussel c'est pire que lorsqu'on a un message d'erreur ... HELP
03/03/2011, 11h19
sylvain640
Bonjour,

as-tu aussi lié ton fichier jQuery.js ?

Voici tous les fichiers que j'ai mis dans mon view.yml :
Code:

1 2 javascripts: [jQuery.js, carousel.js, interface.js, iutil.js, imagebox.js]
jQuery.js : c'est la bibliothèque jQuery de base, comportant toutes les fonctions javascript
imagebox.js : c'est le plugin qui permet d'effectuer le zoom sur une image lorsqu'on clique dessus
04/03/2011, 13h46
zen2878
Oui j'utilise beaucoup jQuery donc celui ci et déjà intégrer dans mon appli ne serait ce que pour les calendrier ou les slides barres, cependant j'avais omis le fichier interface.js mis cela ne marche toujours pas. Faut il obligatoirement le :
Code:

1 2 3 4 5 6 $.ImageBox.init( { loaderSRC: 'images/imagebox/loading.gif', closeHTML: '<img src="images/imagebox/close.jpg" />' } );

En fait le imageBox permet l'affichage de la photo en grand après un clic dans le carrousel... c'est donc facultatif si tu n'a pas envie d'activer cette fonction.

As-tu bien pensé à mettre les :
Code:

1 2 3 4 5 6 7 <?php use_javascript('carousel.js') ?> <?php use_javascript('jQuery.js') ?> <?php use_javascript('iutil.js') ?> <?php use_javascript('interface.js') ?> <?php use_javascript('imagebox.js') ?> <?php include_javascripts() ?>
dans ton fichier layout.php de l'application ?