Quelle "lightbox" avec Jquery ?

Jmarc -

J'imagine qu'il est souhaitable d'adopter un nouveau plugin d'affichage des images qui s'appuie sur jquery dorénavant...

Est-ce qu'il y a un produit identifié, voir sélectionné ?

J'ai fais l'investissement l'année dernière d'un produit puissant mais payant pour une utilisation commerciale (highslide). Il ne sera donc pas possible de le proposer pour l'évolution de yacs.

J'ai étudié une vingtaine de produits en open source et gratuit qui utilise jquery. Seuls 3 d'entre eux m'ont paru suffisament aboutis et suffisament complets pour couvrir un maximum de besoin :

ColorBox
Pretty Photo
Fancy Box

Alexis Raimbault -

je crois qu'actuellement la lightbox de yacs est spécifique.

ce qu'il faut c'est retrouver au moins les fonctions actuelles

mise à l'échelle suivant la taille dispo à l'écran
voile sur le fond
titre
navigation d'une image à une autre
préchargement ajax de l'image suivante

on peut profiter de l'occasion pour améliorer la fonction :

utilisation des champs "source" et "description"
... ?

Alexis Raimbault webmaster free-lance

Christophe Battarel -

la "lightbox" de Yacs a été portée sur jQuery et fonctionne comme auparavant.

on peut évidemment en intégrer une autre selon ses besoins.

Christophe Battarel - Société altairis -

Jmarc -

Christophe : pour pouvoir proposer et intégrer certains de mes développements, j'ai besoin de fonctionnalités avancées comme :

l'affichage d'une description d'image en html (pour pouvoir y insérer des url du genre "supprimer cette image", "modifier", etc)
la possibilité d'afficher un contenu html à la place de l'image (c'est comme cela que j'affiche mes aides en ligne en provenance de simples articles yacs)
la possibilité de gérer un formulaire html

et les fonctions de navigation ergonomique que l'on trouve sur les "lightbox" citées apportent un sérieux plus (que mérite notre yacs).

Pour moi, il est absolument nécessaire d'intégrer une "lightbox" plus sophistiquée.

Jmarc -

Alexis : je complète ta spéc de besoin...

mise à l'échelle suivant la taille dispo à l'écran
voile sur le fond
affichage du titre
navigation d'une image à une autre par bouton
navigation d'une image à une autre par clic sur la partie droite ou gauche de l'image
navigation d'une image à une autre par les touche droite et gauche du clavier
fermeture de l'image par un clic en dehors de l'image
fermeture de l'image par un clic sur un bouton
fermeture de l'image par la touche Escape du clavier
préchargement ajax de l'image suivante
affichage de la description et de la source de l'image
possibilité d'afficher un contenu html (inline)
possibilité d'afficher un formulaire html et de le traiter (ajax)
possibilité d'afficher une page html (iFrame)
possibilité d'afficher une video

Alexis Raimbault -

Jmarc : pour ce qui est d'afficher un contenu autre qu'une image, il s'agirait donc d'autres code yacs qui n'auraient rien à voir avec une image ?

Alexis Raimbault webmaster free-lance

Jmarc -

Alexis : il n'y a pas nécessairement de rapport avec des codes yacs.

Par exemple, aujourd'hui, lorsqu'on est en train d'éditer une page, pour afficher la liste des émoticones proposées, il faut ouvrir une autre page.

Avec une "lightbox", on peut rester sur la page d'édition (qui disparait sous un voile en partie opaque) et afficher le tableau des émoticones dans une popup "lightbox".

D'une part, je trouve cela plus élégant et plus pratique pour l'utilisateur.

D'autre part, comme la page d'édition est toujours "connectée" en dessous, on peut interagir avec. Par exemple, on peut permettre à l'utilisateur de cliquer sur l'un des smiley du tableau pour l'intégrer automatiquement dans l'éditeur

Enfin, construire et afficher la light box est plus rapide et léger que de construire une page complète avec header, panels latéraux, etc

Alexis Raimbault -

Jmarc : ok, donc tu parles d'une utilisation plus intensive d'édition riche dans l'interface de yacs, induisant que la fonction popup de notre biblio yacs.js soit généraliste (tantôt pour une image, tantôt pour une page, tantôt centrée, etc...)

Alexis Raimbault webmaster free-lance

Jmarc -

Alexis : c'est ça.

Sauf que du coup, on ne parle plus de la fonction popup de la biblio yacs.js mais de l'adoption d'une biblio additionnelle qui serait l'une de ces "lightbox" dispo sur étagère.

Alexis Raimbault -

Jmarc : ok, sachant que les fonctions de yacs.js sont aussi "dispo sur étagère" pour tous les autres scripts de yacs.

Alexis Raimbault webmaster free-lance

J.Juraver -

Je complète moi aussi les spec :

Afficher effectivement la source de l'image (voir Du respect de la propriété intellectuelle dans yacs). Yacs propose d'indiquer la source lors de l'enregistrement d'un document ou d'une image, mais ne l'affiche pas.
Tester des solutions pour alimenter le contenu metadonnées image grâce aux exif et/ou iptc (voir vieille suggestion Récupérer des métadonnées image)
A voir aussi comment tout ça est géré lors de l'envoi massif d'images (via téléversement multiple gzip, zip, et tar)

(nb : et j'ai retrouvé cette sugestion de carrousel en jquery avec kirousel)

Je ne m'attarde pas, j'ai mon yacs en double file...

Yacs on my blog | Suivez le blog Yacs | Yacs Showroom | Plugin Firefox de recherche dans Yetanoz |

J.Juraver -

Pour information, et puisque yacs sur mobile est aussi un prochain chantier, je suis tombé sur cette merveille de galerie en Jquery dédiée à tous les terminaux mobiles...

Je ne m'attarde pas, j'ai mon yacs en double file...

Yacs on my blog | Suivez le blog Yacs | Yacs Showroom | Plugin Firefox de recherche dans Yetanoz |

12 comments