Discussion :

[papisdoums]

Bonjour à tous.
J'utilise actuellement sur mon site web le menu en rotation 3D sur cette page: http://helpdrupal.tubaldo.com/demo/carousel-3d-jquery

Vous pouvez voir au lien suivant l'ensembles des codes (Html; Javascript, Css etc.) qui font marcher ce menu http://helpdrupal.tubaldo.com/javascript/article/carousel-3d-jquery

Maintenant ma question est la suivante:
Comment puis-je personnaliser le code de sorte que si on pose la souris sur une image la rotation s'arrête et la taille de l'image qui est survolée augmente un peu, si on enlève la souris de l'image, la rotation repart au normal avec toutes les images à leur taille normale.

J'espère avoir bien expliqué la question, merci d'avance

[BPiero]

Salut,
Tu devrai binder sur le mouseover de chaque élément une fonction anonyme qui:
1 enregistre la taille initiale
1 binde sur le mouseout la fonction de retour à la taille initiale
2 agrandit l'élément (par ex avec animate)

[papisdoums]

Pour augmenté la taille de l'image survolée voilà ce que j'ai tenté mais ça ne marche pas:

Code :

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

$('#carousel a').mouseenter(function(){$($(this) +''+'img').css('width','300px');})

[BPiero]

T'es nouveau en JQuery... Et bien y'a du boulot... Bon alors... tout n'est pas perdu
donc pour commencer:

Code :

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

$($(this) +''+'img')

là je suppose que tu souhaite récupérer l'image contenu dans le <a>
Donc c'est pas comme ça qu'on sélectionne l'élément enfant d'un autre élément,
regardes la doc: http://api.jquery.com/children/
Il fallait faire plutôt:

Code :

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

$('#carousel a').mouseenter(function(){$($(this).children('img').css('width','300px');})

Dis moi si ça marche, et en attendant regardes mon post précédent (tu peux oublier animate pour l'instant), ça devrai résoudre ton prochain problème.

[papisdoums]

J'ai corrigé le code comme tu l'expliques mais ça ne marche pas.
voilà le code que j'ai mis:

Code :

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

$('#carousel a').mouseenter(function({$($(this).children('img').css('width','300px');})});

[BPiero]

Bon alors, plusieurs problèmes:
J'ai bètement recopié ton code et ta syntaxe laissait à désirer, j'ai donc recopié tes erreurs de syntaxe. Si tu indentais correctement ça serai plus beau...
Ensuite je ne sais pas trop pourquoi, peut-être que c'est du à drupal, mais j'arrive pas à faire fonctionner .mouseenter(), car elle n'est pas définie. En tout cas ceci devrai fonctionner:

Code :

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

1
2
3
4
$('#carousel a').bind('mouseenter',function(){
        $(this).children('img').css('width','300px');
    }
);

Note qu'avec cette indentation on aperçois du premier coup d’œil si il manque une parenthèse ou si il y a une accolade ou un $ en trop.

[BPiero]

La fonction .mouseenter(maFunc) est un raccourci pour .bind('mousenter', maFunc). De plus .bind a un autre avantage par rapport à .mouseenter, c'est qu'on peut assigner plusieurs événements en même temps en passant en paramètre un objet json
Voir la doc: http://api.jquery.com/bind/#bind-events , c'est le 2ème exemple de "Multiples Events"

[papisdoums]

Cela ne marche toujours pas, cependant je pense qu'en regardant dans l'un des scripts js qui font fonctionner la rotation, on pourrait trouver la fonction qui ralentit la vitesse de la rotation au passage de la souris. En trouvant la fonction en question et en le modifiant, le problème pourrait être résolu. Néanmoins, mon niveau de compétence en js ne me permet pas de retrouver cette fonction au milieu du code js ni de le personnaliser convenablement.

[BPiero]

j'ai oublié de préciser un truc, il fallait appliquer cette fonction $.ready. C'est p-ê pour ça que ça marche pas:

Code :

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

1
2
3
4
5
$(document).ready(
    $('#carousel a').bind('mouseenter',function(){
        $(this).children('img').css('width','300px');
    }
);

Plusieurs remarques:
-Modifier directement les scripts, c'est jamais une bonne idée.
-Utilises-tu un débogueur de scripts?
si tu n'en utilise pas je te conseille firebug pour firefox (mais il y en a aussi d'intégrés dans firefox, chrome...) ça permet d'afficher les erreurs ou de tester les objets.
Grâce à ce genre d'outils, tu arreterai de dire:

Ca ne marche pas

Ce qui, pour être franc, ne m'aide pas à t'aider, mais plutôt quelque chose du style:

Ca ne marche pas parce que ma fonction $.bind n'est pas définie

Et ça je te promet que ça te ferai gagner un temps fou.
@+
Piero

[BPiero]

Je t'ai dis que ça n'était jamais une bonne idée de modifier directement les scripts (en particulier les plugins JQuery) et c'est bien vrai.
Cependant il est possible de les modifier indirectement et sans danger, et ça je peux t'expliquer comment faire. Mais il te faudra une bonne dose de courage, un firebug, du temps et une forte curiosité. A partir de là, javascript et JQuery deviennent magiques...

Piero