Bientôt un mois que je n'ai pas publié de billet en français. Occupé à traduire des billets en anglais, occupé à développer chez Fluidesign, occupé à vivre à Los Angeles.
Et puis ces derniers temps, je me suis aussi attelé à développer mon premier plugin jQuery : nyroModal.
Alors pourquoi un nouveau plugin de ce genre alors qu'il en existe déjà tant ?
4 réponses :
- Il n'en existe pas tant que ça sous jQuery, la plupart étant sur Prototype/Scriptaculous
- La plupart ne sont pas autant personnalisable qu'il ne le laisse entendre
- Lorsqu'on trouve un bug, il est difficile de contacter le développeur (qui demande souvent un peu de Paypal) ou d'appréhender le code d'un autre pour le corriger
- Parce qu'il est toujours plaisant pour son égo de réaliser les choses soi-même.
Mon plugin reprend donc l'ensemble des fonctionnalités que j'ai pu voir dans les différents plugins que j'ai testés. En vrac :
- Requête Ajax
- Affichage d'un élément du DOM caché
- Image
- Galerie
- Formulaire
- Iframe
Mais j'ai aussi ajoutés des choses que je ne crois pas avoir vu ailleurs, ou pas assez souvent :
- Il est possible de cibler l'élément affiché au sein d'une requête Ajax ou d'un formulaire
- Les formulaires fonctionnent même avec un upload de fichiers
- La couleur de fond est paramétrable dynamiquement
- Affichage d'un message d'erreur si besoin
- Possibilté de modifier la taille de la modale depuis une requête Ajax
De plus, j'ai beaucoup prêté attention à la personnalisation, pour permettre à chacun de modifier la façon dont sont animés les éléments. Il y a aussi de nombreux callback possible pour effectuer toutes les actions JavaScript dont vous avez besoin. Ainsi, toutes les fonctions d'animations sont entièrement redéfinissable et tout est documenté : l'ensemble des paramètres disponibles et le processus complet de la modale pour permettre à toute personne de comprendre comment il fonctionne et d'en faire ce qu'il en veut. J'ai sans doute créer plus de callback que nécessaire, mais de cette façon tout est possible.
Et oui, on en est déjà à la version 1.1 puisque je l'ai montré à mes collègues de bureau et tous m'ont dit que les transitions (pour la gallerie notamment) n'était vraiment pas bon. J'ai donc créer deux nouvelles fonctions d'animation le soir même pour pallier à cela.
- La page du projet (en)
- La page du projet (fr)
- La page google code du projet
- La page dans le répertoire des plugins jQuery
Si vous avez une suggestion, un bug, une idée d'amélioration ou si l'utiliser sur votre site, n'hésitez pas à laisser un commentaire. J'y répondrai avec plaisir.
PS : hé oui, je ne suis pas allé chercher bien loin pour le nom...
Commentaires.
#1 par Shinji
Hello, et merci pour ce script il est vraiment super. Par contre j'avais une petit question car je n'arrive pas à changer les valeurs par défaut des paramètres, ou puis je la poser?
Merci et bonne journée.
le Mercredi 16 Avril 2008 à 11:17:12
#2 par Nyro
Hé bien tout simplement à moi!
Vous pouvez la poser ici, sur la page google code : code.google.com/p/nyromod... our sur la page de jQuery plugin: plugins.jquery.com/projec...
le Mercredi 16 Avril 2008 à 17:40:15
#3 par Clocal
Oui félicitations ce plugin m'a l'air très bien, bonne doc, ça fait en plus plaisir de voir des français à l'oeuvre!
Bonne continuation.
le Jeudi 17 Avril 2008 à 17:36:50
#4 par TiGeRWooD
Salut et bravo, pour ce plugin ... il est terrible.
Cependant un petit quelque chose me chagrine, lorsqu'on ouvre une fenêtre 'modal' et qu'il y a une scrollbar dans celle ci, en utilisant la souris pour defiler dans la fenêtre, arrivé au bout cela fait défilé également la page principale se trouvant sous le modal ...
Y a t il un moyen de bloquer la page principale ?
le Jeudi 17 Avril 2008 à 22:33:03
#5 par Nyro
Oui ce serait possible en utilisant un plugin comme celui-ci : plugins.jquery.com/projec... pour capturé l'événement et en stoppé la propagation.
J'incluerais ceci dans la prochaine version: cela serait fait si le plugin est disponible (ie si le plugin a été loadé)
Merci pour la suggestion
le Jeudi 17 Avril 2008 à 22:42:40
#6 par Nyro
@TiGeRWooD: dans la version 1.2.0 tout juste sortie, le scroll est stoppé sur la fenêtre principale si le plugin mousewheel est présent.
le Samedi 19 Avril 2008 à 20:42:20
#7 par TiGeRWood
Salut Nyro,
J'ai une petite suggestion pour ton plugin.
Actuellement lorsqu'on l'utilise pour afficher une image, il affiche très bien mais ne gère pas la taille de l'image par rapport à la taille de la fenêtre de l'utilisateur.
Ce serait pas mal du tout que lorsque une image ou une galerie est affichée, l'image soit proportionnellement
réduite en fonction de la taille de la fenêtre de l'utilisateur ...
Hum après relecture je ne suis pas sûre d'être très clair ... Qui vivra verra :-)
le Jeudi 19 Juin 2008 à 16:44:20
#8 par Nyro
TiGeRWood, merci pour ton message.
L'image est censée être affichée pour s'insérer dans l'écran de l'utilisateur.
Si tu as un contre-exemple en ligne, envoie moi le lien et je regarderai.
le Jeudi 19 Juin 2008 à 17:54:00
#9 par TiGeRWood
autant pour moi :-)
Vu la taille de mon écran, l'image s'affiche évidemment correctement ... mais il est vrai que je n'ai même pas testé sur un écran de taille normale :-)
Allez tiger dans ton trou !! :-)
le Jeudi 19 Juin 2008 à 17:59:38
#10 par Nyro
Tu peux simplement tester cette fonctionnalité en diminuant la taille de la fenêtre de ton navigateur.
le Jeudi 19 Juin 2008 à 20:48:50
#11 par rburton
Bonjour,
je teste le plugin nyromodal sur spip. vraiment formidable. Tellement que je me suis demandé si je ne pouvais pas le modifier pour "enlever" le côté modal (et donc l'overlay), et déterminer moi-même l'emplacement de la fenêtre. Bref en faire une sorte de viewport universel, modal ou non selon ce qu'on veut en faire !
Serait-ce compliqué ?
Bravo en tous cas !
le Vendredi 25 Juillet 2008 à 02:37:25
#12 par Bertrand
pour nyromodal :
si on modifie le code par çà :
minWidth: (screen.width -50 ) , // Minimum width
minHeight: ( screen.height - 50) , // Minimum height
ça nous donne automatiquement une page pleine ! ?
le Mercredi 24 Septembre 2008 à 18:25:57
#13 par Nyro
Non, pour avoir une page pleine, il faut mettre le paramètre padding à 0.
Puis, vous voudrez sans doute modifier les classes CSS pour enlever les bordures par exemple.
le Mercredi 24 Septembre 2008 à 18:38:43
#14 par Nicolas
Je voulais également te remercier pour nous fournir un plugin si attrayant.
Il est beau, assez simple d'utilisation pour quelqu'un comme moi qui découvre JQuery et l'Ajax.
En plus (j'ai pu tester) ta réactivité sur les Issues Google est excellente. Que de points positifs !
Je me permettrais seulement une remarque:
- Serait-il possible de faire une doc un peu plus compréhensible? :) Avec cette doc, j'ai un peu de mal.
- Serait-il possible que tu m'indiques comment utiliser les callbacks pour rafraichir la page en arriere plan suite à l'envoi d'un formulaire (dans une nyromodal)
Mais sinon, j'applaudie encore pour un tel travail !
le Mardi 04 Novembre 2008 à 12:26:43
#15 par Nyro
Merci pour les compliments.
Je suis en train de préparer une FAQ pour présenter différents codes afin d'élargir la doc. J'espère que ce sera suffisant.
Pour info, en quoi tu ne comprends pas la doc ? J'ai pourtant essayé d'en mettre un maximum dedans...
le Vendredi 07 Novembre 2008 à 23:54:17
#16 par pote au feu
Salut,
Comment lancer une modale iframe au loading de la page ou avec une fonction ?
Merci et bravo
le Jeudi 20 Novembre 2008 à 19:53:41
#17 par Nyro
Tu peux regarder ici : code.google.com/p/nyromod...
le Vendredi 21 Novembre 2008 à 17:41:02
#18 par pote au feu
Merci, ça c'est fait.
J'aimerais que ma modalIframe s'ouvre au coordonnées x et y d'une façon dynamique.
C'est possible ça ?
Merci
le Samedi 22 Novembre 2008 à 16:31:26
#19 par Nicolas Brouard
Salut,
Félicitations pour ton excellent travail sur ce plugin !
Je l'utilise à travers le plugin SPIP files.spip.org/Nyroceros et puisque tu parles des transitions en mode gallery, je me demandais comment je pouvais arriver à un résultats sans transition justement. C'est à dire que je voudrais passer d'une image à la suivante sans passer par un écran de loading. Au mieux, je voudrais pouvoir faire un effet de fondue entre les 2 images.
Peux-tu me dire si c'est possible ? J'ai réussi en supprimer les animations dans les callbacks à réduire le temps de passage d'une image à l'autre, mais j'ai toujours la page de loading, meme si mon image est deja dans le cache et préchargée.
le Jeudi 17 Septembre 2009 à 19:28:10
#20 par JMB
Bonjour et Bravo pour le plugin !
J'avoue que je débute.
Je commence à m'en sortir avec le html et le css et je tente de comprendre quelque chose au js.
Pour mon club de sport, j'ai créée deux galeries sur la même page. Elles sont séparées par des div#.
Le script proposé dans les DEMOS pour Galerie fonctionne parfaitement.
J'ai juste un problème, lorsque je sollicite une galerie (17 images), les images(24) de la seconde galerie viennent compléter la première, soit 41 images à suivre.
Un conseil ?, Une astuce ? Merci et bonne année !
le Dimanche 03 Janvier 2010 à 11:37:08
#21 par Nyro
@JMB : dans les liens de la galerie, vous devez avoir quelque chose comme rel="gal"
Pour créer deux galeries distinctes, il suffit de changer cet attribut pour qu'il soit différent selon la galerie.
Les images de la 1ère galerie pourront donc être rel="gal1" alors que ceux de la 2ème seront rel="gal2", et ainsi de suite...
le Lundi 04 Janvier 2010 à 14:23:16
Ajouter un commentaire.