Ouvrir une photo à partir de miniatures

[Résolu]
Signaler
Messages postés
16
Date d'inscription
mardi 12 octobre 2010
Statut
Membre
Dernière intervention
25 octobre 2012
-
Messages postés
3
Date d'inscription
jeudi 28 octobre 2004
Statut
Membre
Dernière intervention
4 novembre 2012
-
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

25 réponses

Messages postés
16
Date d'inscription
mardi 12 octobre 2010
Statut
Membre
Dernière intervention
25 octobre 2012

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
Messages postés
16
Date d'inscription
mardi 12 octobre 2010
Statut
Membre
Dernière intervention
25 octobre 2012

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
Messages postés
16
Date d'inscription
mardi 12 octobre 2010
Statut
Membre
Dernière intervention
25 octobre 2012

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
Messages postés
16
Date d'inscription
mardi 12 octobre 2010
Statut
Membre
Dernière intervention
25 octobre 2012

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
Messages postés
3
Date d'inscription
jeudi 28 octobre 2004
Statut
Membre
Dernière intervention
4 novembre 2012

voici un code simple

<script type="text/JavaScript" src="mootools.js"></script>
<script type="text/JavaScript" src="http://www..ch/lightbox.js"></script>
<link rel="stylesheet" href="http://www..ch/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript">
//<![CDATA[
window.addEvent('domready',function(){
Lightbox.init({descriptions: '.lightboxDesc', showControls: true});
});
//]]>
</script>

[images/VRV Fraise a plaquette.jpg
]



Click to enlarge