Nouveau Lightbox

Bonjour à tous,

Ça fait longtemps que j'utilise les "lightbox", j'ai utilisé pas mal de versions différentes, j'en ai également fait aussi.

J'aime bien la version simple : http://www.huddletogether.com/projects/lightbox/
La version 2 aussi mais seulement je la trouve un peu lente, il y a en effets 4 effets successifs, horizontal, vertical, fade puis de nouveau vertical, c'est sympa mais il faut être patient!

J'ai donc créer un nouveau modèle de lighbox, l'idée c'est de cumuler les 4 effets en un, c'est à dire que l'image s'agrandisse et apparaisse en même temps description inclue. L'effet est donc à la fois rapide et élégant.

Voila la démo : http://www.mozaik.com.mx/lightbox/

Le script en est à sa version de travail, mais j'aimerais avoir des retours, avant de, si cela en vaut la peine le proposer librement.

J'aimerais que celui ci soit le plus compatible possible et plus tard faire différentes versions sous forme de plugins pour jquery et mootools.

Merci de vos retours.
Modifié par matmat (11 Sep 2009 - 23:10)

Je déplace, ce sujet n'a pas lieu d'être dans le salon Ergonomie et esthétique générale.

Hello,

Je trouve ça sympa mais il existe déjà de nombreux scripts comme shadowbow, lightwindow etc... qui palient aux problèmes du lightbox tout en permettant d'intégrer d'autres médias.

Je trouve ton amélioration très efficace, si je dois juste gérer les photos j'opterai pour ta solution de loin.

Tu penses le mettre en creative common ?

J'en rajoute une couche :

- je hais les preloaders. Parce que même si l'image est dans un format capable de s'afficher progressivement (progressive jpeg, gif animé, etc...), avec un preloader, elle n'est affichée qu'après chargement complet, je trouve ça fort dommage. On peut imaginer le glisser dans un coin, mais pas à la place de l'image.

- les liens suivant/précédent qui changent d'emplacement parce que la taille de la "fenêtre change me hérissent le poil aussi. Je suis fainéant et veux garder le pointeur de ma souris à la même place pour parcourir une galerie.

-J'aime bien que ça se ferme quand je clique à l'exterieur de la fenêtre.

- Ce genre de trucs bling gling ne devrait pas nous faire oublier les bonnes pratiques : les liens visités devraient être marqués, y compris les images visualisées en cliquant sur suivant/précédent.

Pour aller plus loin, mais là faut ajouter du code :
- Le zoom à partir de l'image cliquée et qui retourne à l'image quand on le ferme permet de savoir où en en est dans la consultation d'une galerie.

Ce sera tout pour aujourd'hui.
Modifié par Lanza (13 Sep 2009 - 21:59)

Merci pour vos remarques

C'est vrai que c'est tout bête de récupérer d'abord la taille de l'image coté serveur et cela permettrais d'améliorer nettement le script! Je vais y penser.

Pour les liens suivant/precedent, ok mais je les mets ou, complètement a droite et gauche de l'écran, en bas, en haut?

Par rapport au chargement, je ne sait pas trop quoi faire, en effet si on pré charge les images on se retrouve avec d'autres problèmes, par exemple, imaginons qu'il y est 20 images si l'utilisateur clique sur la dernière qui n'est pas encore chargé le temps de chargement de celle ci va être plus long car le script est en train de charger en même temps les autres images. Autre chose, si les images sont lourdes cela fait aussi une grosse augmentation de bande passante. Voilà il y a des pour et des contres, ce que je pourrait donc faire c'est le mettre en option.

Je vais adapter le fond grisé au viewport.

Pour adapter les images il y a un autre problème c'est que les images redimensionnées à la volée ne sont pas très belle surtout sur ie (firefox c'est vrai que c'est pas mal du tout sur les dernières versions). Personnellement avec un petit écran je préfère scroller que les redimensionnements à la volée, à mettre en option aussi donc...

J'ai une fois créer une galerie en ajax qui récupère différentes images redimensionnée coté serveur selon la taille de l'écran mais bon là ça serait un script de galerie complet.
Modifié par matmat (14 Sep 2009 - 17:22)

Salut a tous
de mon coté j'utilise jquery.lightbox via Jalbum... je trouve ca tres pratique, je regrette juste de ne pas pouvoir mettre l'agrandissement justifié sur le haut de la page html dans laquelle il se charge.... savez vous quel parametre changer pour cela??

merci d'avance

celineOgresse a écrit :
savez vous quel parametre changer pour cela?

Pas spécialement, mais surtout ce n'est pas le sujet ici. Merci de poser la question ailleurs (salon CSS ou JavaScript, suivant ce qui semble lié à votre problème).

Salut ,

J'ai fait quelques améliorations, prenant en compte certaines observations:

Déjà quand on clique à l'extérieur de la fenêtre ça ferme l'image, c'est vrai que c'est simple et logique.

Ensuite je suis tout à fait d'accord avec Lanza sur le fait que si l'image est dans un format capable de s'afficher progressivement autant s'en servir. Par contre cela complique un peu en effet il faut pouvoir récupérer les dimensions de la grande image avant de l'ouvrir.

Pour faire un truc super propre on pourrais faire un fichier xml ou json avec les infos de toutes nos images, mais bon pour avoir utilisé ce genre de procédé pour des galeries, je trouve que ça complique trop la mise en place.

Je préfèrerais insérer ces infos dans le html, donc pour l'instant j'ai fait comme ceci:
Si on rajoute une balise

<span class="lightbox_src" style="display:none">source_de_limage.jpg(466-600)</span>

il prend cet info et donc utilise le chargement progressif de l'image.

Vous pouvez voir l'exemple sur l'image 1 et 3 de la page en ligne.

Voilà sinon moi j'utilise le script sur pas mal de site, jusque là je n'ai pas eu de retours négatifs...
Modifié par matmat (27 Jan 2010 - 17:03)

Bonjour,

Bravo pour votre lightbox qui associe simplicité et légèreté.

Je me heurte toutefois à un problème : j'ai mis les miniatures dans un tableau de x colonnes qui devraient normalement être centrées mais celle-ci, probablement dû à la classe "lightbox", sont alignées à gauche... ce qui n'est pas très esthétique quand les miniatures sont tantôt en paysage tantôt en portrait.

Une idée pour réaligner tout ça (autre qu'en ajoutant une marge dans l'image pour qu'elles soient toutes de la même largeur) ?

Merci.

--- Edition ---
Au temps pour moi, je n'avais pas vu que j'avais intégré la classe lightbox à la fin de mon fichier CSS principal. Une suppression du "float: left" a résolu mon problème.

Bonne continuation.
Modifié par Benouith (03 Feb 2010 - 12:10)