Installation d'une lightbox

jeje6275 · Octobre 18, 2012, 21:47:16

Bonjour à tous,
j'ai un soucis avec une lightbox que je voudrais installer sur ma page album afin de pouvoir afficher les photos de chaque catégorie
mon soucis est que cela marche sauf la miniature qui apparais comme s'il manquait l'image,
voici l'exemple, c plus simple
www.jerome-watel.fr/essai

quand on clil sur dessus, le résultat st ok, mais pourquoi elle ne s'affiche pas en miniature

voici le code de la page (c un essai)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans nom</title>
<meta name="generator" content="WebExpert 6">
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
   <script src="js/prototype.js" type="text/javascript"></script>
   <script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
   <script src="js/lightbox.js" type="text/javascript"></script>
</head>

<body>
<a href="img/img-1.jpg" rel="lightbox[image]">
<a href="img/img-2.jpg" rel="lightbox[image]">
<a href="img/img-3.jpg" rel="lightbox[image]">
<a href="img/img-4.jpg" rel="lightbox[image]">
<a href="img/img-5.jpg" rel="lightbox[image]">
<a href="img/img-6.jpg" rel="lightbox[image]">
<img src="img/thumb-1.jpg" width="100" height="40" alt="brocard" />
</a>
</body>
</html>
Cdlt Jérôme

Nikojorj · Octobre 18, 2012, 22:08:45

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html><head>
<title>404 Not Found</title>
</head><body>
<h1>Not Found</h1>
<p>The requested URL /essai/img/thumb-1.jpg was not found on this server.</p>
</body></html>
Il manque l'imagette correspondante.

jeje6275 · Octobre 19, 2012, 12:41:40

Ben le problème c que j ai pourtant bien suivi le tuto mais sa ne marche pas

vincent3569 · Octobre 19, 2012, 17:25:05

de quel tuto parles-tu ?

si je regarde sur le lien inclus dans ton lightbox.js, le tuto est là : http://lokeshdhakar.com/projects/lightbox2/
si tu regardes bien le tuto, il te manque plusieurs trucs pour que ça marche :
- une seule instruction <a rel="lightbox" href="images/image-1.jpg"><img alt="" src="images/thumb-1.jpg"></a> par image (là tu as mis toutes les images sur la même vignette)
- utiliser la dernière version du script (tu as une version ancienne)
- générer des vignettes (là, elle n'existe visiblement pas : voilà un avantage des CMS style zenphoto/piwigo : les vignettes sont générées automatiquement lors de l'import de photos)

après, à toi de voir, mais colorbox marche aussi très bien et offre plus de paramétrage : http://www.jacklmoore.com/colorbox

bon courage...

Charlie82 · Octobre 19, 2012, 20:58:27

Perso j'ai préféré utiliser Slimbox, beaucoup plus léger ....Lightbox, me provoquait des ralentissements lors de l'affichage de la première page...

Edit : bon visiblement tu as réparé... En tout cas ta vignette apparaît bien chez moi

jeje6275 · Octobre 19, 2012, 21:15:14

Bonsoir et merci à tous, bon le problème et résolu et sa marche, je n'ai plus qua le mettre en place

vincent3569 · Octobre 20, 2012, 15:03:15

au risque de me répéter :

Citation de: vincent3569 le Octobre 19, 2012, 17:25:05
- une seule instruction <a rel="lightbox" href="images/image-1.jpg"><img alt="" src="images/thumb-1.jpg"></a> par image (là tu as mis toutes les images sur la même vignette)
- utiliser la dernière version du script (tu as une version ancienne)

jeje6275 · Octobre 20, 2012, 18:14:50

Citation de: vincent3569 le Octobre 19, 2012, 17:25:05
de quel tuto parles-tu ?

si je regarde sur le lien inclus dans ton lightbox.js, le tuto est là : http://lokeshdhakar.com/projects/lightbox2/
si tu regardes bien le tuto, il te manque plusieurs trucs pour que ça marche :
- une seule instruction <a rel="lightbox" href="images/image-1.jpg"><img alt="" src="images/thumb-1.jpg"></a> par image (là tu as mis toutes les images sur la même vignette)
- utiliser la dernière version du script (tu as une version ancienne)
- générer des vignettes (là, elle n'existe visiblement pas : voilà un avantage des CMS style zenphoto/piwigo : les vignettes sont générées automatiquement lors de l'import de photos)

après, à toi de voir, mais colorbox marche aussi très bien et offre plus de paramétrage : http://www.jacklmoore.com/colorbox
bon courage...

Ok pour colorbox, mais apparemment en anglais et moi et l'anglais $:-\$

jeje6275 · Octobre 20, 2012, 18:45:18

Citation de: vincent3569 le Octobre 20, 2012, 15:03:15
au risque de me répéter :

si je met "<a rel="lightbox" href="images/image-1.jpg"><img alt="" src="images/thumb-1.jpg"></a>" par image, la vignette affichera la vignette concernés ou est ce que je peut en voir plusieurs,
en fait le but c d'avoir une vignette par catégorie qui une fois cliquer affichera un diaporama de toutes les photos de la catégorie(exemple oiseaux) et d'autres catégories sur le même principe
vous voyez ce que je veut dire ?

Charlie82 · Octobre 21, 2012, 14:51:10

Oui moi je le fais souvent...
Une seule vignette et ensuite dans la page les liens vers la suite d'images...

vincent3569 · Octobre 22, 2012, 14:09:50

Citation de: jeje6275 le Octobre 20, 2012, 18:45:18
si je met "<a rel="lightbox" href="images/image-1.jpg"><img alt="" src="images/thumb-1.jpg"></a>" par image, la vignette affichera la vignette concernés ou est ce que je peut en voir plusieurs,
en fait le but c d'avoir une vignette par catégorie qui une fois cliquer affichera un diaporama de toutes les photos de la catégorie(exemple oiseaux) et d'autres catégories sur le même principe
vous voyez ce que je veut dire ?

je pense comprendre ce que vous voulez obtenir

c'est le rel="lightbox" qui permet de faire le lien entre les images.
en spécifiant cet attributs rel="lightbox[categorie]" pour pourrez avoir plusieurs diaporama différents pour chacune des catégories
pour finir, vous pouvez ajouter un titre différent à chacune de vos images.

pour avoir une syntaxe HTML correcte (ce qui n'est pas du tout le cas aujourd'hui puisque vous ouvez plusieurs balises <a> sans les refermer), vous devriez donc avoir quelque chose qui ressembe à ça :

<a href="image1.jpg" rel="lightbox[oiseaux]" title="titre image 1"><img src="thumb-image1.jpg width="260" height="173" alt="" /></a>
<a href="image2.jpg" rel="lightbox[oiseaux]" title="titre image 2" style="display:none">oiseaux</a>
<a href="image3.jpg" rel="lightbox[oiseaux]" title="titre image 3" style="display:none">oiseaux</a>
<a href="image4.jpg" rel="lightbox[oiseaux]" title="titre image 4" style="display:none">oiseaux</a>

<a href="image5.jpg" rel="lightbox[gibiers]" title="titre image 5"><img src="thumb-image5.jpg width="260" height="173" alt="" /></a>
<a href="image6.jpg" rel="lightbox[gibiers]" title="titre image 6" style="display:none">gibiers</a>
<a href="image7.jpg" rel="lightbox[gibiers]" title="titre image 7" style="display:none">gibiers</a>
<a href="image8.jpg" rel="lightbox[gibiers]" title="titre image 8" style="display:none">gibiers</a>

vous aurez 2 vignettes qui montrent 2 catégories distinctes (oiseaux et gibiers) et en cliquant dessus, vous aurez 2 diaporamas distincts de 4 images chacun.
yapuka

vincent3569 · Octobre 22, 2012, 14:33:47

pendant que j'y suis :
sur votre page d'accueil (http://www.jerome-watel.fr/Albums.html), vous avez des syntaxes suivantes :
<a href="cervides.html"><img src="img/brocard3.jpg" width="260" height="173" /></a>

en procédant ainsi, c'est l'image originale pleine taille que vous envoyez au navigateur et qui est redimensionnée par le navigateur.
=> cela ralenti notablement la navigation et la qualité d'image est médiocre.
il vaut mieux générer des petites images (appellées vignettes ou thumbnails) qui auront directement la taille d'affichage (260 x 173 dans votre exemple).

de même il est totalement inutiles d'avoir des images pleines tailles qui font 3800x2500
=> les fichiers sont lourdes (ralentissement du téléchargement) et il n'y a pas de moniteurs capatbles de restituer vos images sans les dégrader.
il vaut mieux générer des images web (appellées vignettes ou thumbnails) qui auront directement la bonne taille d'affichage pour le web (800x600 par exemple).

yapuka bis

jeje6275 · Octobre 23, 2012, 21:18:15

Bonsoir à tous,
alors un grand merci vincent, sa marche pour les diapo, y a plus qua tous mettre en lieu et place
par contre la vignette ne s'affiche pas, bizarre

Cdlt Jérôme

vincent3569 · Octobre 24, 2012, 11:12:46

Citation de: jeje6275 le Octobre 23, 2012, 21:18:15
[...]par contre la vignette ne s'affiche pas, bizarre[...]

au contraire, c'est normal : le répertoire thumb-img n'existe sous essai

à lire : http://www.alsacreations.com/astuce/lire/78-quelle-est-la-diffrence-entre-les-chemins-relatifs-et-absolus.html
le tuto est valable pour toutes les balises/attributs (src=..., href=..., ...) dans lesquels tu précises le chemin à parcourir pour accéder à la ressources sur ton serveur.

de fait, tout ton site (pour ce que j'ai pu en regarder) est en relatif alors qu'il vaut mieux procéder en absolu

jeje6275 · Octobre 24, 2012, 19:32:36

Citation de: vincent3569 le Octobre 24, 2012, 11:12:46
au contraire, c'est normal : le répertoire thumb-img n'existe sous essai

à lire : http://www.alsacreations.com/astuce/lire/78-quelle-est-la-diffrence-entre-les-chemins-relatifs-et-absolus.html
le tuto est valable pour toutes les balises/attributs (src=..., href=..., ...) dans lesquels tu précises le chemin à parcourir pour accéder à la ressources sur ton serveur.

de fait, tout ton site (pour ce que j'ai pu en regarder) est en relatif alors qu'il vaut mieux procéder en absolu

Ha ok voila pourquoi je n'y arrivais pas

par contre j'ai pas tout comprix pour le "relatif" et "absolu"

jeje6275 · Octobre 24, 2012, 20:00:20

Une tit question, est ce que je peut avoir deux dossier CSS dans le répertoire www ou il y a risque de conflit

vincent3569 · Octobre 24, 2012, 22:39:25

Citation de: jeje6275 le Octobre 24, 2012, 19:32:36
[...]
par contre j'ai pas tout comprix pour le "relatif" et "absolu"

chemins relatifs = navigation à partir de l'endroit où la page courante est exécutée
chemins absolu = navigation systématiquement depuis la racine du site
ce dernier est à préconiser pour éviter les erreurs
pour l'utiliser, il faut mettre un "/" dans tes chemins vers tes fichiers et t'efforcer de décrire le chemin depuis la racine :
src="/rep1/rep2/image.jpg"

Citation de: jeje6275 le Octobre 24, 2012, 20:00:20
Une tit question, est ce que je peut avoir deux dossier CSS dans le répertoire www ou il y a risque de conflit

pas de limite mais une contrainte : les fichiers sont évalués en séquentiel
donc si ton dernier fichier motifie une proprité CSS que tu avais positionnée dans le 1er, alors c'est le dernier qui l'emporte.

un dernier conseil :
utilise firebug pour firefox : ça permet de bien débugger son site (erreurs html, valeurs css,...)

jeje6275 · Octobre 25, 2012, 19:10:56

Bonsoir à tous,
Un grand merci Vincent, cela prend forme doucement par contre je n'arrive pas et comprend pas pourquoi les vignettes ne s'affiche pas
voici le code de la page,

Citation
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Albums</title>
<link rel="stylesheet" href="galerie/css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="galerie/js/prototype.js"></script>
<script type="text/javascript" src="galerie/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="galerie/js/lightbox.js"></script>
<style type="text/css">
.Textalign {
   text-align: center;
}
.textalign {
   text-align: center;
}
.imagealign {
   text-align: center;
}
.imagealign {
   text-align: center;
}

</style>
</head>

<body>
<p align="center"><img src="banniere.jpg" width="800" height="100" /></p>
<p class="Textalign"><span class="police"><a href="index.html">accueil</a>       Albums       <a href="videos.html">Videos</a>       <a href="observations.html">Observasions</a>       <a href="Liens.html">Liens</a>      <a href="mailto:jerome6275 [at] gmail.com">Contact</a></span></p>
<p> </p>
<p align="center">Les cervidés                                    Les rapaces                                    Flore
<p align="center"><a href="galerie/cerv-1.jpg" rel="lightbox[cervides]" title="Une de mes plus belle approche"><img src="thumb-galerie/cerv-1.jpg width="260" height="173" alt="" /></a>
<a href="galerie/cerv-2.jpg" rel="lightbox[cervides]" title="titre image 2" style="display:none">cervides</a>
<a href="galerie/cerv-3.jpg" rel="lightbox[cervides]" title="titre image 3" style="display:none">cervides</a>
<a href="galerie/cerv-4.jpg" rel="lightbox[cervides]" title="titre image 4" style="display:none">cervides</a>
<a href="galerie/cerv-5.jpg" rel="lightbox[cervides]" title="titre image 5" style="display:none">cervides</a>
<a href="galerie/cerv-6.jpg" rel="lightbox[cervides]" title="titre image 6" style="display:none">cervides</a>
<a href="galerie/cerv-7.jpg" rel="lightbox[cervides]" title="titre image 7" style="display:none">cervides</a>
<a href="galerie/cerv-8.jpg" rel="lightbox[cervides]" title="titre image 8" style="display:none">cervides</a>

<a href="galerie/rapac-1.jpg" rel="lightbox[oiseaux]" title="titre image 1"><img src="thumb-galerie/rapac-1.jpg width="260" height="173" alt="" /></a>
<a href="galerie/rapac-2.jpg" rel="lightbox[oiseaux]" title="titre image 2" style="display:none">oiseaux</a>
<a href="galerie/rapac-3.jpg" rel="lightbox[oiseaux]" title="titre image 3" style="display:none">oiseaux</a>
<a href="galerie/rapac-4.jpg" rel="lightbox[oiseaux]" title="titre image 4" style="display:none">oiseaux</a>
<a href="galerie/rapac-5.jpg" rel="lightbox[oiseaux]" title="titre image 5" style="display:none">oiseaux</a>

<a href=" galerie/flor-1.jpg" rel="lightbox[flor]" title="titre image 1"><img src="thumb-galerie/flor-1.jpg width="260" height="173" alt="" /></a>

cela doit etre une connerie je pense mais je vois pas ou

Nikojorj · Octobre 25, 2012, 19:17:44

Même problème qu'au début : y'a pas de répertoire thumb-galerie appelé par les imagettes!
Ce que demande <img src="thumb-galerie/cerv-1.jpg width="260" height="173" alt="" />

Si tu essaye d'afficher une image qui n'existe pas, ça marche pas.

jeje6275 · Octobre 26, 2012, 21:41:50

Bonsoir,
pourrais tu tu détailler Nikojorj car la j'avoue ne pas comprendre

Nikojorj · Octobre 26, 2012, 22:00:04

Tu n'as pas créé de répertoire thumb-galerie et tu n'y a pas mis les imagettes dont tu as besoin.

jeje6275 · Octobre 27, 2012, 21:32:46

Bonsoir,
alors voila j'ai donc créer un répertoire que j'ai nommés "vignette" dans lesquelle j'ai ajoutés chaque vignettes à la bonne taille
j'ai redirigé le "thumb" en
<a href="galerie/rapac-1.jpg" rel="lightbox[oiseaux]" title="titre image 1"><img src="thumb-vignette/rapac-1.jpg width="260" height="173" alt="" /></a>
mais rien ne marche, je comprend plus la, et le pire c que sa doit être une connerie

jeje6275 · Octobre 28, 2012, 21:40:12

Bonsoir à tous,
Bon sa y est sa commence à prendre forme,
y a plus qu'à remplir les albums

Cdlt Jérôme

vincent3569 · Octobre 29, 2012, 15:31:54

bjr

Citation de: vincent3569 le Octobre 22, 2012, 14:33:47
pendant que j'y suis :
sur votre page d'accueil (http://www.jerome-watel.fr/Albums.html), vous avez des syntaxes suivantes :
<a href="cervides.html"><img src="img/brocard3.jpg" width="260" height="173" /></a>

en procédant ainsi, c'est l'image originale pleine taille que vous envoyez au navigateur et qui est redimensionnée par le navigateur.
=> cela ralenti notablement la navigation et la qualité d'image est médiocre.
il vaut mieux générer des petites images (appellées vignettes ou thumbnails) qui auront directement la taille d'affichage (260 x 173 dans votre exemple).

de même il est totalement inutiles d'avoir des images pleines tailles qui font 3800x2500
=> les fichiers sont lourdes (ralentissement du téléchargement) et il n'y a pas de moniteurs capatbles de restituer vos images sans les dégrader.
il vaut mieux générer des images web (appellées vignettes ou thumbnails) qui auront directement la bonne taille d'affichage pour le web (800x600 par exemple).

yapuka bis

vous n'avez pas tellement tenu compte de cette remarque.
du coup, votre site est extrement lent, du fait du poids des images à véhiculer sur le net.

jeje6275 · Octobre 29, 2012, 18:50:33

Citation de: vincent3569 le Octobre 29, 2012, 15:31:54
bjr
vous n'avez pas tellement tenu compte de cette remarque.
du coup, votre site est extrement lent, du fait du poids des images à véhiculer sur le net.

Bonjour, c pas que je n'en tiens pas compte de votre remarque, au contraire, mais je fais une chose à la fois, la maintenant que j'ai résolu le soucis avec les albums, je v me préoccupé de cette autre soucis qui pourra amélioré la navigation
par contre pour ce qui et des images, elles sont normalement toutes en 800 x 533 et les vignettes en 260 x 173
donc je comprend pas trop la
autre chose, j'accepte volontiers les divers conseils et critiques, mais étant novice, je n'ai pas forcement la solution donc soit je la trouve avec du temps ou alors j'accepte volontiers des éventuelles exemples

en tout cas merci encore

Cdlt Jérôme