Ouvrir une photo à partir de miniatures [Résolu]

cs_cyranorion 16 Messages postés mardi 12 octobre 2010Date d'inscription 25 octobre 2012 Dernière intervention - 28 oct. 2010 à 17:57 - Dernière réponse :  cs_guillaume2vo
- 4 nov. 2012 à 13:56
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
Afficher la suite 

Votre réponse

25 réponses

Meilleure réponse
PetoleTeam 3435 Messages postés lundi 26 décembre 2005Date d'inscription 14 janvier 2011 Dernière intervention - 2 nov. 2010 à 18:02
3
Merci
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)

Merci PetoleTeam 3

Avec quelques mots c'est encore mieux Ajouter un commentaire

Codes Sources a aidé 90 internautes ce mois-ci

Commenter la réponse de PetoleTeam
Meilleure réponse
PetoleTeam 3435 Messages postés lundi 26 décembre 2005Date d'inscription 14 janvier 2011 Dernière intervention - 2 nov. 2010 à 22:14
3
Merci
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)

Merci PetoleTeam 3

Avec quelques mots c'est encore mieux Ajouter un commentaire

Codes Sources a aidé 90 internautes ce mois-ci

Commenter la réponse de PetoleTeam
Meilleure réponse
PetoleTeam 3435 Messages postés lundi 26 décembre 2005Date d'inscription 14 janvier 2011 Dernière intervention - 3 nov. 2010 à 19:02
3
Merci
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)

Merci PetoleTeam 3

Avec quelques mots c'est encore mieux Ajouter un commentaire

Codes Sources a aidé 90 internautes ce mois-ci

Commenter la réponse de PetoleTeam
Meilleure réponse
PetoleTeam 3435 Messages postés lundi 26 décembre 2005Date d'inscription 14 janvier 2011 Dernière intervention - 4 nov. 2010 à 16:00
3
Merci
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)

Merci PetoleTeam 3

Avec quelques mots c'est encore mieux Ajouter un commentaire

Codes Sources a aidé 90 internautes ce mois-ci

Commenter la réponse de PetoleTeam
Meilleure réponse
PetoleTeam 3435 Messages postés lundi 26 décembre 2005Date d'inscription 14 janvier 2011 Dernière intervention - 5 nov. 2010 à 13:05
3
Merci
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)

Merci PetoleTeam 3

Avec quelques mots c'est encore mieux Ajouter un commentaire

Codes Sources a aidé 90 internautes ce mois-ci

Commenter la réponse de PetoleTeam
Meilleure réponse
PetoleTeam 3435 Messages postés lundi 26 décembre 2005Date d'inscription 14 janvier 2011 Dernière intervention - 14 nov. 2010 à 09:15
3
Merci
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)

Merci PetoleTeam 3

Avec quelques mots c'est encore mieux Ajouter un commentaire

Codes Sources a aidé 90 internautes ce mois-ci

Commenter la réponse de PetoleTeam
PetoleTeam 3435 Messages postés lundi 26 décembre 2005Date d'inscription 14 janvier 2011 Dernière intervention - 29 oct. 2010 à 11:36
0
Merci
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)
Commenter la réponse de PetoleTeam
cs_cyranorion 16 Messages postés mardi 12 octobre 2010Date d'inscription 25 octobre 2012 Dernière intervention - 29 oct. 2010 à 13:35
0
Merci
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
Commenter la réponse de cs_cyranorion
PetoleTeam 3435 Messages postés lundi 26 décembre 2005Date d'inscription 14 janvier 2011 Dernière intervention - 29 oct. 2010 à 13:39
0
Merci
- Si les photos grandeur nature se chargent c'est que c'est demandé.

- A la question la réponse est OUI.

;O)
Commenter la réponse de PetoleTeam
cs_cyranorion 16 Messages postés mardi 12 octobre 2010Date d'inscription 25 octobre 2012 Dernière intervention - 29 oct. 2010 à 15:02
0
Merci
> 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
Commenter la réponse de cs_cyranorion
PetoleTeam 3435 Messages postés lundi 26 décembre 2005Date d'inscription 14 janvier 2011 Dernière intervention - 29 oct. 2010 à 16:10
0
Merci
une amorce de réponse
<html>
<head>
<title>Affichage Image</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
//--------------------
function Charge( txt_){
  //-- remplace le repertoire miniature par repertoire grande
  var szImg = txt_.replace('small', 'grande');
  //-- affiche le nom de l'image grandeur nature
  alert( szImg);
}
</script>
</head>





</html>

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)
Commenter la réponse de PetoleTeam
cs_cyranorion 16 Messages postés mardi 12 octobre 2010Date d'inscription 25 octobre 2012 Dernière intervention - 29 oct. 2010 à 18:15
0
Merci
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
--
Commenter la réponse de cs_cyranorion
PetoleTeam 3435 Messages postés lundi 26 décembre 2005Date d'inscription 14 janvier 2011 Dernière intervention - 30 oct. 2010 à 11:56
0
Merci
Bonjour,
remplace le alert par la modification du contenu de la DIV d'affichage, puis affiche la.

;O)
Commenter la réponse de PetoleTeam
cs_cyranorion 16 Messages postés mardi 12 octobre 2010Date d'inscription 25 octobre 2012 Dernière intervention - 1 nov. 2010 à 09:43
0
Merci
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
Commenter la réponse de cs_cyranorion
PetoleTeam 3435 Messages postés lundi 26 décembre 2005Date d'inscription 14 janvier 2011 Dernière intervention - 1 nov. 2010 à 12:02
0
Merci
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)
Commenter la réponse de PetoleTeam
cs_cyranorion 16 Messages postés mardi 12 octobre 2010Date d'inscription 25 octobre 2012 Dernière intervention - 1 nov. 2010 à 12:39
0
Merci
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
--
Commenter la réponse de cs_cyranorion
cs_cyranorion 16 Messages postés mardi 12 octobre 2010Date d'inscription 25 octobre 2012 Dernière intervention - 2 nov. 2010 à 19:19
0
Merci
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
Commenter la réponse de cs_cyranorion
cs_cyranorion 16 Messages postés mardi 12 octobre 2010Date d'inscription 25 octobre 2012 Dernière intervention - 3 nov. 2010 à 17:43
0
Merci
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
Commenter la réponse de cs_cyranorion
cs_cyranorion 16 Messages postés mardi 12 octobre 2010Date d'inscription 25 octobre 2012 Dernière intervention - 4 nov. 2010 à 14:05
0
Merci
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
Commenter la réponse de cs_cyranorion
cs_cyranorion 16 Messages postés mardi 12 octobre 2010Date d'inscription 25 octobre 2012 Dernière intervention - 5 nov. 2010 à 11:14
0
Merci
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
Commenter la réponse de cs_cyranorion

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.