Ouvrir une photo à partir de miniaturesRésolu

Question

Bonjour,
Le problème que je cherche à résoudre concerne une page html affichant plusieurs dizaines de photos (taille de l'ordre de 400x300 pixels).
Le temps de chargement de cette page est trop long à mon goût. 
Je songe donc à :
- remplacer ces photos par des miniatures (je sais faire),
- trouver une procédure permettant, par un clic sur l'une quelconque des miniatures, de charger la photo correspondante et l'afficher dans une page (unique pour toutes les photos) ou une fenêtre popup.

J'ai bien trouvé ici ou là des scripts réalisant cela mais ils obligent à charger, d'entrée de jeu, les miniatures et les photos correspondantes ce qui n'améliore en rien (au contraire) le temps de chargement.

La question est donc :
Est-il possible, uniquement avec des javascripts, de réaliser mon projet ? 

Merci de m'avoir lu.
jean
-- 

La théorie, c'est quand on sait tout et que rien ne fonctionne.
La pratique, c'est quand tout fonctionne et que personne ne sait pourquoi.
Albert Einstein

PetoleTeam · Accepted Answer

Bonjour,
Il va me falloir quelques temps pour digérer ton code qui est manifestement bien "au-dessus" de ce que je savais faire jusqu'ici.
rien que du très basique, rien d'insurmontable...

Bonne continuation.
;O)

PetoleTeam · Answer

Bonjour,
le preload des photos n'est pas une obligation surtout que l'on est pas sûr de toutes les visionner.
A partir de l'événement onclick de tes miniatures tu ouvres les photos grandeurs réelles dans une DIV ou dans une nouvelle fenêtre grâce à window.open(...) par exemple. 

;O)

cs_cyranorion · Answer

Bonjour PetoleTeam, bonjour à le Communauté,

Oui, j'ai bien vu ce que tu m'indiques mais mon problème est 
qu'actuellement toutes mes photos grandeur nature se chargent à l'ouverture de la page ainsi que les miniatures que je pourrais mettre à leur place.

Pour être plus clair, je ne cherche pas le script miracle mais une réponse à ma question :
"Est-il possible, uniquement avec des javascripts, de réaliser mon projet ?"

Merci pour ta contribution.
Très cordialement,
jean
-- 

 

  


La théorie, c'est quand on sait tout et que rien ne fonctionne.
La pratique, c'est quand tout fonctionne et que personne ne sait pourquoi.
Albert Einstein

PetoleTeam · Answer

- Si les photos grandeur nature se chargent c'est que c'est demandé.

- A la question la réponse est OUI.

;O)

cs_cyranorion · Answer

> Si les photos grandeur nature se chargent c'est que c'est demandé.

Evidemment ;o)
Je peux tout aussi évidemment les remplacer par des miniatures d'elles-mêmes, je sais faire avec ACDDee, à la moulinette.
C'est après que je coince vu que je suis un débutant en js, je n'ai jamais rien écrit et testé que des bricoles annexes pour mon site (exemple, afficher la date et heure système ... et j'en ai bavé ;o)

> A la question la réponse est OUI.

Merci beaucoup pour cette affirmation, point de départ absolu pour moi d'une recherche d'un ou plusieurs scripts et appels associés.

Encore merci.
Cordialement,
jean
-- 




La théorie, c'est quand on sait tout et que rien ne fonctionne.
La pratique, c'est quand tout fonctionne et que personne ne sait pourquoi.
Albert Einstein

PetoleTeam · Answer

une amorce de réponse Affichage Image pour ce faire, tu mets les miniatures dans un répertoire, ici small, et les grandes dans un autre répertoire, ici grande, avec le même nom d'image. Bonjour, ;O)

cs_cyranorion · Answer

Bonsoir,

J'ai cru rêver en voyant que tu m'aiguillais si vite et si bien. Merci beaucoup.

J'ai suivi tes consignes à la lettre et mis tout cela en place.

Cela marche très bien mais à priori tout en manipulant, j'attendais avec impatience l'apparition de mes grandes images. Or, n'apparaît que l'alerte montrant bien que le répertoire des photos à été changé. J'ai compris en décortiquant le script.
Mais je me retrouve comme un couillon de débutant en me demandant par quoi je dois remplacer le "alert( szImg);" pour que la grande photo apparaisse ... et où ?

J'ai toujours tendance à me dire que j'abuse en quémandant des conseils mais là, je suis coincé ;o)

Merci de t'intéresser au (petit) problème d'un retraité.
Cordialement,
jean
--

PetoleTeam · Answer

Bonjour,
remplace le alert par la modification du contenu de la DIV d'affichage, puis affiche la.

;O)

cs_cyranorion · Answer

Bonjour,

Je ne comprends pas ta consigne.
Jusqu'ici, j'affiche mes photos de la façon suivante :





 
Et j'ai plusieurs dizaines de photos !!!!
J'hésite à flanquer tout çà dans un script 

Pardon de ne pas avoir réagis plus tôt, j'étais absent de chez moi ce week-end. 

Merci pour ta patience.
Cordialement,
jean

PetoleTeam · Answer

Bonjour,
je pensais à un truc de ce style
dans ton document il y a une DIV déclarée comme ci dessous dans le body



et dans le code on modifie son contenu comme ci dessous, par exemple
//--------------------
function Charge( txt_){
  //-- remplace le repertoire miniature par repertoire grande
  var szImg = txt_.replace('small', 'grande');
  //-- Recup la DIV affichage
  var oDiv = document.getElementById( 'D_IMG');
  //-- Modifie le contenu avec nouvelle image
  oDiv.innerHTML = '';
  //-- Affiche la DIV
  oDiv.style.display = 'block';
}

à adapter suivant ton besoin...

nota:
avec des dimensions de 400 x 800 ce ne sont qu'en même pas des vignettes?

;O)

cs_cyranorion · Answer

Rebonjour,

Merci pour ton aide. 
Il va me falloir quelques temps pour digérer ton code qui est manifestement bien "au-dessus" de ce que je savais faire jusqu'ici.

Pour ta remarque sur la dimension des documents, les dimensions que tu cites sont celles de mes photos réelles, mes miniatures en sont des versions très réduites. 

Je risque de passer quelques jours avant de donner signe de vie car je ne me préoccupe pas seulement de ce projet de modification de "mon" site mais aussi de la gestion au quotidien de celui-ci ... et du courrier qui va avec.
Au cas où cela pourrait d'aider à m'aider ;o) :
http://www.cyranorion.fr/eta_sam/
Merci encore.
Très cordialement,
jean 
--

cs_cyranorion · Answer

Bonsoir,

> rien que du très basique, rien d'insurmontable... 

ni basique, ni surmontable à première vue pour moi quand je me suis penché sur le code que tu m'as suggéré ;o)
J'ai été me documenter sur "this" sur le net et commencé à entrevoir l'issue en pigeant un peu mieux les différentes lignes de code.
Après quelques bidouillages malheureux, c'est extrêmement surpris que j'ai vu s'afficher une photo en cliquant sur sa miniature.
Là, c'était du grand bonheur !!!!
Je te le dois totalement, merci.

Tu peux voir le résultat sur :
http://www.cyranorion.fr/atelier/apprentissage_javascript/miniatures/miniatures_3.html  

Dès que je trouve un bout de temps, je commence à introduire cela sur une copie de ma page réelle. 
Je me demande comment agencer cela pour que la photo "ouverte" n'apparaisse pas n'importe où. Je reviendrai peut-être solliciter à nouveau de l'aide dans ce sens sur le forum.

Trois questions avant de poster :
- faut-il, sur ce forum, cliquer sur le bouton "Réponse acceptée",
- serait-il de bon ton que j'affiche ici le code qui fonctionne,
- acceptes-tu de me donner ton nom car je compte bien l'afficher dans la page "Remerciements" du site que je gère.

Si nécessaire : cyranorion@sfr.fr 

 
La théorie, c'est quand on sait tout et que rien ne fonctionne.
La pratique, c'est quand tout fonctionne et que personne ne sait pourquoi.
Albert Einstein

PetoleTeam · Answer

Après quelques bidouillages malheureux, c'est extrêmement surpris que j'ai vu s'afficher une photo en cliquant sur sa miniature.
c'est la magie du javascript...

Je me demande comment agencer cela pour que la photo "ouverte" n'apparaisse pas n'importe où.
avec un peu de CSS, voir une pointe de javascript, on fait apparaître les éléments ou l'on veut

- faut-il, sur ce forum, cliquer sur le bouton "Réponse acceptée"
c'est effectivement de bon ton, même si peu le font, une réponse acceptée peut aider d'autres forumeux, c'est d'ailleurs cela l'esprit des forums, après avoir été aidé on aide en validant une ou plusieurs réponses ayant aidées à la résolution du sujet...

- serait-il de bon ton que j'affiche ici le code qui fonctionne, 
la je te laisse juge de l'apport du code quant à la compréhension final de la solution... 

- acceptes-tu de me donner ton nom car je compte bien l'afficher dans la page "Remerciements" du site que je gère. 
c'est juste PetoleTeam de Javascriptfr, un petit lien vers ce site et c'est suffisant, notre satisfaction étant des plus modeste...

A bientôt donc...
;O)

cs_cyranorion · Answer

Ben, me re-voila mais je ne sais pas si j'aurais du ouvrir un nouveau sujet ?

Sur la feuille où j'ai toutes mes photos j'ai aussi les "map" qui me permettent d'afficher le nom des individus au survol de leurs visages par le curseur de la souris.
La question est :
Peut-on regrouper toutes ces "map" dans un document annexe ?
Si oui :
- document de quel type ?
- comment associer une de ces "map" à l'image concernée ?

Merci.

Explication : j'ai essayé de mettre plusieurs de ces images et leurs "map" dans le prototype que tu m'as si bien aidé à construire mais, à la lecture, c'est un vrai foutoir et j'essaie d'organiser çà de façon plus rigoureuse.

Cordialement,
jean
-- 

La théorie, c'est quand on sait tout et que rien ne fonctionne.
La pratique, c'est quand tout fonctionne et que personne ne sait pourquoi.
Albert Einstein

PetoleTeam · Answer

Bonjour,
Ben, me re-voila mais je ne sais pas si j'aurais du ouvrir un nouveau sujet ? 
je pense que cela eu été préférable pour ne pas mélanger les genres...

Peut-on regrouper toutes ces "map" dans un document annexe ?  
il faut que ces MAPs appartiennent au document dans lequel elle sont utilisées

- comment associer une de ces "map" à l'image concernée ? 
en utilisant la syntaxe usemap="#nom_de_la_map"

encore plus d'explications sur
Graphiques composés de liens -cartes cliquables- (Image Maps)

nota: cette documentation est téléchargeable
Télécharger SELFHTML, une mine d'info...

;O)

cs_cyranorion · Answer

Bonjour, 

Question liminaire : comment fait-on pour transférer le texte du correspondant dans une réponse (je n'y arrive pas !)

>> je ne sais pas si j'aurais du ouvrir un nouveau sujet ?
> je pense que cela eu été préférable pour ne pas mélanger les genres...

Si j'ai hésité c'est parce qu'à mon avis, bien que parlant d'un autre aspect, je restais dans le même sujet.
En effet, dans mon "prototype", j'ai introduit de nouvelles photos avec leurs "map" .... et les "bulles" n'apparaissent plus.

> il faut que ces MAPs appartiennent au document dans lequel elle sont utilisées
> en utilisant la syntaxe usemap="#nom_de_la_map"

C'est ce que je fais. Voir :

http://www.cyranorion.fr/atelier/apprentissage_javascript/miniatures/index.html

Je ne vois pas où "toucher" pour que les noms des personnages apparaissent de nouveau au survol des visages par le curseur de la souris.

> Télécharger SELFHTML, une mine d'info...

Effectivement c'est impressionnant, j'ai adopté ... et je fouille pour trouver une réponse ... mais en vain. J'y retourne ;o)

Merci.
Cordialement,
jean 

La théorie, c'est quand on sait tout et que rien ne fonctionne.
La pratique, c'est quand tout fonctionne et que personne ne sait pourquoi.
Albert Einstein

PetoleTeam · Answer

Bonjour,
Question liminaire : comment fait-on pour transférer le texte du correspondant dans une réponse (je n'y arrive pas !) 
une selection du texte, un copier et un coller dans la zone de texte, that's All!

Au vue de ta source tu appliques la MAP à l'image small qui n'a de but que d'ouvrir la grande. C'est sur la grande qu'il faut donc appliquer la MAP.

Il en ressort qu'une toute petite modification du script va te permettre d'exploiter les MAPs déclarées dans les balises IMG.

la fonction devient
//--------------------------
function Charge( txt_, map_){ // ajout du parametre map_
  //-- remplace le repertoire miniature par repertoire grande
  var szImg = txt_.replace('small', 'grande');
  //-- Recup la DIV affichage
  var oDiv = document.getElementById( 'D_IMG');
  //-- Modifie le contenu avec nouvelle image  //-- MODIFICATION --//
  oDiv.innerHTML = '';
  //-- Affiche la DIV
  oDiv.style.display = 'block';
}
maintenant on passe la référence à la map que l'on souhaite utilisée...

l'appel de la fonction devient



;O)

cs_cyranorion · Answer

Bonjour,

Je tombe sur un os : çà ne fonctionne pas et tous les bidouillages tentés n'y changent rien !

J'ai voulu voir ce qu'il y avait dans "oDiv.innerHTML"
(voir http://www.cyranorion.fr/atelier/apprentissage_javascript/miniatures/index.html)

A la fin du contenu, je lis : ......" useMap=indefined>

Le problème est-il là ?
Je n'ai pas su corriger ;o(

Autre problème : les "title" et "alt" de mes photos n'apparaissent pas non plus ??

Merci pour ta patience.
Très cordialement,
jean


La théorie, c'est quand on sait tout et que rien ne fonctionne.
La pratique, c'est quand tout fonctionne et que personne ne sait pourquoi.
Albert Einstein

PetoleTeam · Answer

Bonjour,
quel abruti ! je parle de moi bien sûr!

Le nom des propriétés commence par une lettre minuscule.
Lorsque le nom est composé de plusieurs mots, la première lettre de chaque nouveau mot est en majuscule. C'est le formatage lowercamelCase.

En clair il ne faut pas écrire this.usemap mais this.useMap.
donc l'appel devient



Sorry !
;O)

cs_cyranorion · Answer

Bonjour,

Je pensais avoir répondu à ton dernier message, j'ai du rêver (j'ai du me contenter d'"accepter" ta réponse, pardon ;o)
Ta dernière modif proposée a tout mis d'aplomb, mon (ton) proto fonctionne à merveille, voir :
http://www.cyranorion.fr/atelier/apprentissage_javascript/miniatures/index.html

Merci beaucoup.

Mon problème va maintenant être de contrôler l'endroit où apparaît la grande image. Pour l'instant, elle apparaît au-dessous de la dernière miniature et il faut donc exécuter des va et vient verticaux pour observer la grande photo.
A l'instant, je n'ai aucune idée sur le sujet mais, obligé de m'absenter, je me pencherai sur la question dans quelques jours.

Très cordialement,
jean
-- 

 



La théorie, c'est quand on sait tout et que rien ne fonctionne.
La pratique, c'est quand tout fonctionne et que personne ne sait pourquoi.
Albert Einstein

PetoleTeam · Answer

Bonjour,
Mon problème va maintenant être de contrôler l'endroit où apparaît la grande image. 
proposition de style à mettre dans la feuille du même nom...
#D_IMG {
  position : absolute;    /* obligatoire pour ne pas s'afficher en fin de document */
  width : 800px;          /* largeur des images agrandies */
  min-height : 100px;
  left : 50%;             /* positionnement centre horizontal */
  top : 50%;              /* positionnement centre vertical */
  margin-left : -400px;   /* 1/2 largeur d'une image de 800 de large */
  margin-right : -400px;  /* 1/2 largeur */
  margin-top : -300px;    /* 1/2 hauteur d'une image de 600 de haut */
  margin-bottom : -300px; /* 1/2 hauteur */
  overflow : hidden;      /* masquage des debordement */ 
  text-align : center;    /* centrage a l'interieur du DIV */
  display : none;         /* masquage au depart */
  z-index  : 20;          /* pour affichage au dessus du reste */
}
l'affichage devrait s'en trouver plus classe !!

;O)

cs_cyranorion · Answer

Bonjour,
J'ai été absent de chez moi une quinzaine de jours au motif de naissance d'une petite fille.
J'ai eu l'excellente surprise de trouver hier ton dernier message et probablement la solution de mon dernier problème. Merci encore et encore.
Je suis évidemment fort en retard pour mes différentes activités mais je compte bien tester au plus tôt ton code Javascript.
Je ne manquerai pas de t'informer de mes résultats.
Très cordialement,
jean
-- 

La théorie, c'est quand on sait tout et que rien ne fonctionne.
La pratique, c'est quand tout fonctionne et que personne ne sait pourquoi.
Albert Einstein

cs_cyranorion · Answer

Bonjour PetoleTeam, Salut à la communauté,

>Je ne manquerai pas de t'informer de mes résultats.

C'est ce que j'avais écrit à la fin de mon dernier message le ...30/11/2010 !
C'est vrai qu'il s'est passé bien des choses depuis dont pas mal de problèmes de santé et emm... divers et j'ajoute que je suis un vieux mec ;o).
Pardon :-(

J'ai donc, grâce à toi, une petite page HTML qui fonctionne parfaitement, un clic sur une miniature fait apparaître l'image initiale.

J'ai voulu transférer ces procédures dans une nouvelle page qui se veut un reportage avec de nombreuses photos à manipuler de la même façon :
http://www.cyranorion.fr/eta/pelvezy_54-59/pelvezy.html
(voir en fin de code)

D'abord, pour que la procédure fonctionne, j'ai du remplacer "absolute" par "fixed" dans : "position : absolute;".
Mais ce fonctionnement n'est pas satisfaisant :
- dans WebExpert et sous IE, les images apparaissent à gauche, incomplètes et ne masquent pas le reste de la page qui est "dessous",
- sous FireFox, c'est à peu près correct mais je n'arrive pas à centrer correctement les images agrandies.

J'ai donc deux questions à te poser :
- pourquoi "position : absolute;" fontionne avec ma petite page test et non avec ma nouvelle page ?
- existe-t-il une aide précise et documentée dur les "margin" négatif (j'ai fouillé partout sans trouver d'explication à ma portée)

Peux-tu encore, s'il te plaît me sortir de la panade ?
Merci.

Très cordiales salutations,
jean

 
 


La théorie, c'est quand on sait tout et que rien ne fonctionne.
La pratique, c'est quand tout fonctionne et que personne ne sait pourquoi.
Albert Einstein

cs_cyranorion · Answer

Bonjour à la Communauté,

Mes problèmes sont maintenant réglés : Voir :
http://www.cyranorion.fr/eta/pelvezy_54-59/pelvezy.html

Un grand merci à javascriptfr.

Pour ce qui me concerne, le sujet peut être fermé;


La théorie, c'est quand on sait tout et que rien ne fonctionne.
La pratique, c'est quand tout fonctionne et que personne ne sait pourquoi.
Albert Einstein

cs_guillaume2vo · Answer

voici un code simple [images/VRV Fraise a plaquette.jpg ] Click to enlarge

Ouvrir une photo à partir de miniatures

25 réponses

Votre réponse

Discussions similaires