Intégration Carrousel jQuery dans un template [Résolu]

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

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) ?

[sylvain640]

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 ?

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

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

[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.

[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

Bonne journée

[insane1]

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

Bonne journée

[zen2878]

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

[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

[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" />'
		}
	);

[sylvain640]

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 ?