begin process at 2012 05 29 13:05:40
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

CSS

 > 

Général

 > 

Ouvrir une photo à partir de miniatures

Derniers messages déposésPoser une question dans le forum ou lancer une discussion

Ouvrir une photo à partir de miniatures

jeudi 28 octobre 2010 à 17:57:24 | Ouvrir une photo à partir de miniatures

cyranorion
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
vendredi 29 octobre 2010 à 11:36:33 | Re : Ouvrir une photo à partir de miniatures

PetoleTeam

Membre Club
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)
vendredi 29 octobre 2010 à 13:35:07 | Re : Ouvrir une photo à partir de miniatures

cyranorion
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
vendredi 29 octobre 2010 à 13:39:31 | Re : Ouvrir une photo à partir de miniatures

PetoleTeam

Membre Club
- Si les photos grandeur nature se chargent c'est que c'est demandé.

- A la question la réponse est OUI.

;O)
vendredi 29 octobre 2010 à 15:02:12 | Re : Ouvrir une photo à partir de miniatures

cyranorion
> 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
vendredi 29 octobre 2010 à 16:10:11 | Re : Ouvrir une photo à partir de miniatures

PetoleTeam

Membre Club
une amorce de réponse
Code HTML :
<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>
<body>
<img src = "small/image_1.jpg" alt = "small/image_1.jpg" onclick="Charge( this.src);"><br>
<img src = "small/image_2.jpg" alt = "small/image_2.jpg" onclick="Charge( this.src);">
</body>
</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)
vendredi 29 octobre 2010 à 18:15:37 | Re : Ouvrir une photo à partir de miniatures

cyranorion
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
--
samedi 30 octobre 2010 à 11:56:21 | Re : Ouvrir une photo à partir de miniatures

PetoleTeam

Membre Club
Bonjour,
remplace le alert par la modification du contenu de la DIV d'affichage, puis affiche la.

;O)
lundi 1 novembre 2010 à 09:43:31 | Re : Ouvrir une photo à partir de miniatures

cyranorion
Bonjour,

Je ne comprends pas ta consigne.
Jusqu'ici, j'affiche mes photos de la façon suivante :
<p class="album">
<img src="../photos/denjean01.jpg" title="Chercher Denjean, Bettiga et Aubrun !" alt="Chercher Denjean, Bettiga et Aubrun !" usemap="#denjean01" height="395" width="800" >
<img src="../photos/denjean02.jpg" title="Chercher Szopa et Virenque !" alt="Chercher Szopa et Virenque !" usemap="#denjean02" height="471" width="800" >
</p>

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
lundi 1 novembre 2010 à 12:02:23 | Re : Ouvrir une photo à partir de miniatures

PetoleTeam

Membre Club
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
Code HTML :
<div id="D_IMG" onclick="this.style.display ='none';"></div>

et dans le code on modifie son contenu comme ci dessous, par exemple
Code Javascript :
//--------------------
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 = '<img src ="' + szImg +'" alt = "' +szImg +'">';
  //-- 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)

1 2 3

Cette discussion est classée dans : ouvrir, page, photo, photos, miniatures

Répondre à ce message

Sujets en rapport avec ce message

appel d'une fonction selon paramètres passés... [ par poucinette51 ] Bonjour,je ne m'y connais pas trop en javascript et je bloque sur un truc :/Voila, j'ai une page qui affiche des photos miniatures, une autre page qui est-ce posible, ça me stress ! [ par gnosis35 ] bonjour, je fais un diaporama. j'affiche 5 images en vignette. j'aimerai pouvoir remplacer ces 5 vignettes par 5 autres en cliquant sur un bouton su Ouvrir une photo dans fenêtre. [ par bcab0696 ] Bonjour à tous, Certainement une question que vous avez eu des dizaines de fois mais bon je ne trouve pas la réponse. Je cherche donc un code en html ouvrir un formulaire dans un div au-dessus de la page [ par cora83 ] Bonjour, voilà je ne sais pas trop comment m'y prendre... j'aimerais que lorsque que l'on clique sur une image, un formulaire (dans un div) s'ouvre a Ouvrir deuxième fenetre [ par webide ] Bonjour, J'essaie désespérément d'ouvrir une deuxième fenêtre sur une page d'un script que j'utilise (osdate). Il fonctionnes avec des fichiers tpl et ouvrir un lien sur un nouvelle ongle ou une nouvelle page [ par cyrilherve ] slut, je suis cherche un script qui permettra qu'en cliquant sur un lien, il s'ouvre plutot soit sur un nouvel onglet soit sur une nouvelle page  cdt petit probleme css [ par gaucyril ] Bonjour, je suis en train de mettre en page un site internet en css. Mais j'ai une petite question. Donc voila j'ai une liste de résultat en php qui a ouvrir fermer des div sur une même page css/javascript [ par catejo ] Bonjour à tous, j'ai un petit problème de script pour activer le deuxieme bouton Pour l'instant seul le premier bouton fonctionne . Que faut-t-il mo ouvrir un lien dans un "DIV" d'une même page sans recharger les autres [ par louseb84 ] salut a tous. voilà je me suis décider a m'inscrire après avoir parcouru pas mal de poste et de codes sources sans y trouver réponse. je me suis mis Rezize et incrustation sur page d'accueil [ par mlies ] Bonjour, je suis un vrai grand débutant... En Javascript et sur ce site... Du coup savoir si je post au bon endroit ? Bref, j'avais un webmaster...u


Nos sponsors


Sondage...

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,733 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)