3 tailles d'images differentes dans la gallerie photo javascript/Css

Bonjour à tous
et avant toutes choses merci à Olivier pour le tuto Galerie Photo....
Que j'ai bien evidement adopté

J'ai consulté les demandes du forum mais je n'ais pas vraiment trouvé ce que je cherchais .En fait voila ce que j'aimerais faire ( malheureusement pour moi je n'en ai pas les competences )
Dans chaque "galerie" , je visualise les vignettes et les changements d'images centrales ainsi que les changememts de titres se font correctement comme expliqué dans le tuto . Les images en " taille normale " qui sont d'une taille 450x29à pixels apparaissent au centre de ma page . A partir de la j'aimerais par un click sur l'image centrale ouvrir une nouvelle page avec une image d'une taille plus consequente 800x600 par exemple .
Je remercie d'avance toutes les suggestions qui pourront m'etre apportées.
Merci a tous

Salut,

Tiens j'essaye, si je me plante quelqu'un d'autre corrigera

à mon avis on peut y arriver ainsi :

1. mettre les images "tailles normales" dans le même dossier que la page.html contenant la galerie.

2. dans ce même dossier créer un sous dossier more_big où l'on mettra les 800*600 . Les images de ce sous dossier auront le même nom que les images "tailles normales".

3. dans le html, insérer l'image id="big_pict" dans un lien id="go_more_big"

4. dans le js rajouter après la ligne :

var big_photo = document.getElementById('big_pict') ;

cette ligne ci (nouvelle déclaration de variable)

var lien_more_big = document.getElementById('go_more_big') ;

et après la ligne :

big_photo.src = this.href;

ajouter cette ligne ci :

lien_more_big.href = "more_big/"+this.href;/* pas trop sur de la concaténation en javascript */

Avec un peu de chance c'est peut être bon
Modifié par clb56 (20 Mar 2006 - 22:15)

Salut,

en fait j'ai un peu pris mes rêves pour des réalités en croyant que href permettait de récupérer le contenu de l'attribut href du lien.

Il faut faire autrement en passant par getAttribute() et en plus ça cause un souci avec IE.

Bon là il est tard...

Voici ce que j'ai réussi à faire, ça doit fonctionner avec firefox et opera je pense. Mais pas avec IE.

la page :
http://clb56.freezee.org/test_morebig/

le javascript :
http://clb56.freezee.org/test_morebig/galerie.js

Je te laisse voir les ajouts ou modifs par rapport au script d'olivier ou bien par rapport à ce que j'ai déjà écrit dans le précédent post.

Sinon un lien intéressant (trouvé via google) sur cette affaire du getAttribute() et des problèmes avec IE :
http://www.nanoum.net/blog/12_controle_champs_formulaire_part2.html

J'ai essayé le getAttribute("htmlHref") pour IE mais ça n'a pas marché (ça renvoit "null" comme valeur).

J'espère que quelqu'un pourra t'aider, il ne manque peut être pas grand chose.
Modifié par clb56 (23 Mar 2006 - 00:41)

Bonsoir a tous

Merci beaucoup clb56 et Alan pour ces solutions . Je vais travailler sur vos propositions dès ce weeke end ( malheureusement je n'aurais pas de temps avant ) et je vous dirais ce que j'ai fait .
Merci encore pour votre aide
A plus tard

Salut,

pour ma solution je crains que tu puisse oublier. Le getAttribute("href") est à la base d'un gros bug.

firefox l'interprète comme il faut : chaine de caractère comprise dans le href

Mais avec iE et opera c'est le délire puisque que ça donne l'adresse absolue complète du lien concerné.

Apparemment ça devrait s'améliorer pour opera dans la version 9 mais bon il reste de toute façon IE

clb56 a écrit :

Apparemment ça devrait s'améliorer pour opera dans la version 9

Je viens de vérifier avec la version preview d'opera 9, effectivement c'est tout bon.

Donc ma solution marche très bien sauf avec <troll>Censored</troll>

chmel a écrit :
Bonjour,

pour éviter la double extension et obtenir img01big.jpg :

onclick="window.open(this.src.substr(0,this.src.length-4)+'big.jpg')";

Salut Chmel,

Je viens de tester et c'est adopté ! Merci.

Concernant l'ouverture dans la même fenêtre : le problème est qu'IE fait repartir la galerie à la première image si l'on y revient via "précédent". C'est pourquoi j'avais choisi l'ouverture dans une nouvelle fenêtre.

Bonne journée
Modifié par Alan (28 Mar 2006 - 08:23)

La pop-up est en effet ce qui est le plus simple, car le visiteur ne va pas s'amuser à agrandir toutes les images. Sinon, on peut ouvrir la grande image dans un élément supperposé à la page avec un script un peu plus compliqué

geba a écrit :
Bonjour,

Ce sujet apporte la solution au problème posé pour une galerie de dessins. Merci à tous. Cependant, pour aller plus loin, je souhaitais que chaque clic n'ouvre pas une nouvelle fenêtre, alors j'ai ajouté un nom de fenêtre (zoom) au javascript:

onclick="window.open(this.src.substr(0,this.src.length-4)
+'zoom.jpg','zoom','scrollbars=no,width=800,height=600,resizable=yes,');"

Cela marche, sauf que la nouvelle fenêtre reste alors en arrière plan pour les clics suivant le premier clic. Comment "forcer" le focus ?

Merci aux as du js.

Pour donner le focus à cette fenêtre :

onclick="toto=window.open(this.src.substr(0,this.src.length-4)
+'-zoom.jpg','zoom','scrollbars=no,width=800,height=600,resizable=yes,');
toto.focus()"

et si le visiteur aura modifié la taille, il faudra ajouter :

toto.resizeTo(800,600)

Bon, on peut encore en ajouter
Modifié par chmel (28 Mar 2006 - 12:38)

Merci Chmel,

Cela donne envie d'approfondir la programmation js. Sinon, le script de Renvoi de liens image vers un calque de la page est aussi très intéressant.