11548 sujets

JavaScript, DOM et API Web HTML5

[RESOLU]Lightbox

Pages :
Bonjour,

Je ne suis pas tres tres bon en javascript et j'ai besoin d'un petit coup de main de votre part ^^

voila j'utilise un script tout fais lightbox qui me permet d'afficher des images de facon plutot sympathique.

j'ai une balise de ce type <a href="1" rel="lightbox" title="2">
qui me fais bien ce que je veux en affichant l'image 1 avec le alt=2 cepandant certaines images sont trop grosses et je voudrai les afficher a 640 de largeur et de longueur maximum

Il faut donc :
1. que je recupere des dimension de l'image,
2. que je calcule les nouvelles dimensions
3. enfin que j'ajoute les variables width et height a la balise img de la lightox...

Oui mais comment faire 1. et 2. ?

Merci d'avance a ceux qui m'aideront, je ne pense pas que ce soit tres dur, je fais quelques essais mais j'arrive a rien... mince !

Vous pouver voir ici ce que ca donne : page de test
Modifié par kogangel (20 Jun 2007 - 02:10)
Juste une idée comme ça, si tu en a l'opportunité, tu peux faire un petit script PHP pour redimentionner les images.
Si tu utilises un CMS par exemple, ça peut s'intégrer parfaitement.
koala64 a écrit :

les vignettes ne sont pas des images redimensionnées


Il me semble que Kogangel ne parle pas de vignettes mais de l'adaptabilité de la taille de l'image suivant la résolution..

Si tel est le cas et même si c'est un bricolage plutôt sauvage, le mieux c'est de procéder ainsi :

css :

img.telle_classe {
max-width:90%; /* pour autant que le référent soit bien la largeur de l'écran */
height:auto;
}


Ne pas jouer sur les attributs width et height du html.

Ne pas rêver non plus, le rendu de l'image en réduction forcée peut être dégradé.
Modifié par Christian Le Bouler (19 Jun 2007 - 09:07)
Modérateur
Laurent Denis a écrit :
Oui, mais non. Il y a des évolutions nécessaires et des choses à affiner, là.
A affiner, oui peut-être mais dans quel sens ? le redimensionnement de l'image peut-il se faire côté client ? Il y a visiblement deux écoles pour ce sujet, ce qui fait que ce point m'est toujours aussi flou. Quoiqu'il en soit, si on le fait, faut aussi être sûr de ne s'adresser qu'au public visé.

Whisno a écrit :
Juste une idée comme ça, si tu en a l'opportunité, tu peux faire un petit script PHP pour redimentionner les images.
Si tu utilises un CMS par exemple, ça peut s'intégrer parfaitement.
Je préfère cette solution pour le rendu mais c'est super lourd comparé à un redimensionnement fait via l'éditeur graphique. Tout dépend du nombre de photos mais moi, je prendrais le temps de le faire parce que mine de rien, c'est pas mal de boulot pour le serveur.

Christian Le Bouler a écrit :
css :

img.telle_classe {
max-width:90%; /* pour autant que le référent soit bien la largeur de l'écran */
height:auto;
}
Ne pas jouer sur les attributs width et height du html.

a écrit :
Ne pas rêver non plus, le rendu de l'image en réduction forcée peut être dégradé
ben oui, justement, c'est un peu trop limite pour le rendu je trouve Smiley rolleyes
Perso, j'ai mis en place une solution à trois tailles d'images (vignette, taille limitée pour la galerie, taille d'origine si très grande) le traitement se fait en php mais seulement lors du téléchargement de l'image.

Et ça impose aussi un travail sur le javascript.

Mais le résultat est très satisfaisant.
koala64 a écrit :
Bonjour et bienvenue kogangel, Smiley smile

Ce que tu demandes fait parti des pratiques à éviter :

les vignettes ne sont pas des images redimensionnées

Le mieux serait donc que tu redimensionnes, au préalable, tes images sur ton éditeur graphique puis que tu les affiches à leur taille réelle. Smiley cligne


Oui mais en fait sur mon ftp et sur ma base j'ai plus de 500 images en miniature + taille "normale" qui est desfois tres grande Smiley decu , meme si le rendu est moins bien faut que je redimensionnne en touchant aux width et height et peut etre que pour les prochaines images je pourrai faire une image taille "moyenne" a l'upload
Modifié par kogangel (19 Jun 2007 - 10:48)
J'ai ajouté ca a mon css
#imageContainer img {
	max-width: 50%;
	height: auto;
}


Ca redimensionne bien l'image et je ne me plains pas trop de l'affichage et avec quelques bidouillage j'ai redimensionné le container aussi

Vous pouver voir ici ce que ca donne : page de test

Une derniere question, en fait quand j'utilise cette lightbox sur mon site les image passent derriere les videos dailymotion ou autre flash quand il y en a comment faire pour passer l'image en premier plan ??
Modifié par kogangel (19 Jun 2007 - 14:52)
personne n'aurait l'ASTUCE ? Smiley ravi

Il doit bien y avoir un truc je cherche je cherche...
C'est que sur mon blog y a des images et puis aussi des videos de dailymotion ou meme qq flash desfois ...

Aidez moi Smiley bawling
Modifié par kogangel (19 Jun 2007 - 21:31)
Bon en fait le bidouillage max-width est pas mal mais je voudrai plutot modifier en fonction de la taille de l'image plutot que tout le temps mettre a 50% Smiley decu .

Parce que desfois ca passe, mais d'autre fois l'image est malgré tout trop grande ou sinon trop petite...

J'arrive pas a trouver ou est ce qu'il fait modifier ca >_<
Et puis toujours le probleme avec les videos qui passent par dessus Smiley decu


C'est bon 2h du mat j'ai résusi en mixant 2 lightbox trouvée sur le net

lightbox 2 : pour passer par dessus les videos et tout ^^
lightbox plus : pour le redimensionnement des images
Modifié par kogangel (20 Jun 2007 - 02:14)
Je relance ce sujet pour expliquer mon problème perso.
J'ai installé Lightbox 2. Seulement je dois avoir un souci de lien car mes images ne sont pas trouvées.

exemple:
http://choucroutecrew5.free.fr/articles/ntatras05.html
Mon essai se trouve après les 2e paragraphe.

J'ai essayé de placer mes images dans mon dossier images, puis je les ai déplacées dans le dossier LB , croyant que ça marcherait mieux. Mais non.

Voici mon lien:
<a href="LB/PICT0009.jpg" rel="lightbox" title="go! "><img
 src="LB/PICT0009m.jpg"></a>


Merci pour vos conseils... Smiley confus
Bonjour maup,

Merci d'ouvrir un nouveau sujet, ton problème n'est pas le même que l'auteur original de ce sujet Smiley cligne .

Plus généralement, pour les soucis concernants des scripts divers et variés, le plus simple est probablement de s'adresser au support des créateurs dudit script. Smiley cligne
Salut,

ah mon avis quand tu auras résolu la question des liens internes de ton site, ça devrait t'aider pour les adresses de tes images.

Parce que pour l'instant aucun de ces liens ne fonctionne, c'est systématiquement la page d'erreur Smiley cligne
Exact, les liens ne marchaient pas. J'ai changé tout ça.
En fait, j'ai découvert la mention ../ , que je ne connaissais pas.

Pour la lightbox par contre, j'ai beau retourné le problème dans tous les sens, ça veut pas. Mais je continue à chercher.

Sorry pour le topic "squatté", mais sur un autre forum que j'ai fréquenté, il était d'usage de n'ouvrir un topic que quand on en avait pas trouvé sur le même thème... Smiley cligne Skipass pour ne pas le nommer...
Diable! Effectivement, le problème est là!
Pas moyen de mettre ces images en lien... Smiley sweatdrop

Et pourtant, rien à faire... l'image PICT0009 est bien dans le dossier "articles", lui-même dans le dossier principal... Smiley biggol
Modifié par maup (11 Jul 2007 - 00:08)
maup a écrit :
Diable! Effectivement, le problème est là!
Pas moyen de mettre ces images en lien... Smiley sweatdrop

Et pourtant, rien à faire... l'image PICT0009 est bien dans le dossier "articles", lui-même dans le dossier principal... Smiley biggol


Si l'image est bien dans le bon dossier alors peut être elle ne s'appelle pas comme tu crois.

A titre de vérification, comme tout est en majuscule, tu es sur que l'extension est bien .jpg en minuscule et pas .JPG en majuscule ?
Non, j'ai mis l'extension en majuscules, mais ça ne change rien.
Bizarre...

<a
 href="../articles/PICT0009.JPG" rel="lightbox"
 title="go! "><img src="../articles/PICT0009m.JPG"></a>
Pages :
Sujet clos
Aller à