Comment cliquer sur une vignette et l'agrandir ?

Marsh Posté le 17-05-2009 à 02:12:25

J'aimerai mettre en ligne quelques images sur une page web, mais plutot que de les empliller, j'aimerait qu'elle aparaissent sous forme de petites vignettes qui une fois cliquée par l'utilisateur se chargent dans leur taille normale dans une zone d'affichage
Voilà à peu près le résultat souhaité (sur le plan graphique)

Les carrés gris sont les vignettes et le grand rectangle c là que je veux la photo à sa taille normale.
Je sais faire la partie XHTML/CSS sans problème, je peux aussi disposer des images dans la teille d'origine et en vignette, mais ce que je ne sais pas faire c'est toute la partie JS?/JQUERY?/AJAX?...
Je veux éviter de recharger la page à chaque fois en HTML ou utiliser des frames, donc je me dis que d'après ce que j'ai compris de mes lectures, je dois utiliser AJAX ou un truc dans le genre pour "ajouter de l'interactivité à la page".
D'avance merci pour votre aide.

Reply

Marsh Posté le 17-05-2009 à 02:12:25

Reply

Marsh Posté le 17-05-2009 à 11:53:23

JavaScript...
Jquery te permettra de faire des interaction plus belles (fondu entre 2 images) utile mais il faut d'abord bien connaitre javascript !
Ajax, c'est encore plus compliqué, ça te permettra par exemple d'externaliser les URL des images si tu veux modifier plus facilement ta banque d'image sans modifier le fichier HTML/JS en soit...

A tu des notion en JS ?

Message édité par abais le 17-05-2009 à 12:40:10

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.

Reply

Marsh Posté le 17-05-2009 à 11:53:48

En réalité ton système dépendra d'une chose : as tu 2 fichiers par image (vignette + taille réelle), ou un seul en taille réelle ?

Reply

Marsh Posté le 17-05-2009 à 12:38:54

Voila un exemple :
(Je n'ai pas trouver les bonnes balise de coloriage syntaxique pour le html)
(pour eviter d'avoir des "#" au copié/collé, double clique dans le cadre du code)

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>P'tite galerie</title>
 
<script type="text/javascript">
 
//Déclarons la fonction qu'on utilisera... je l'appel openImage()...
 
function openImage(cible){
    // cible est un argument, il sera remplacer par ce qu'on aura mis dans les parenthèses quand on appelera la fonction...
    var urlImage = cible;  // on créé une variable contenant l'url de l'image
    var imgCont = document.getElementById("imgCont" );// Celle correspondant à la div qui contiendra la grde image
    imgCont.innerHTML = "<img src='"+urlImage+"' width='400' height='300' alt='' />"; // Change le contenue HTML de notre div...
}
 
</script>
 
<style type="text/css">
#imgCont { float:left; width:400px; height:300px; border:1px solid black; }
</style>
 
</head>
<body>
 
    <div id="imgCont"></div>
    
    <a href="#" onclick="openImage('monimage1.jpg')">image 1</a><br />
    <a href="#" onclick="openImage('monimage2.jpg')">image 2</a><br />
    <a href="#" onclick="openImage('monimage3.jpg')">image 3</a><br />
    <a href="#" onclick="openImage('monimage4.jpg')">image 4</a><br />
    
</body>
</html>

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.

Reply

Marsh Posté le 17-05-2009 à 16:38:10

"A tu des notion en JS ?"
Non, je fais de la programmation depuis des années, mais JS a toujours été pour moi une bete noire, donc je ne m'y suis jamais mis!
"En réalité ton système dépendra d'une chose : as tu 2 fichiers par image (vignette + taille réelle), ou un seul en taille réelle ?"
Oui, je peux avoir deux fichiers par image sans problème ou juste la taille réelle mais je préfère en utiliser deux pour ne pas ralentir le chargement des vignettes.

Grand merci à toi abais, j'ai lu le code et j'ai tout compris je pense, maintenant à moi de l'améliorer via css et tout le reste
Je te remercie bcp !

---------------
Forum d'assistance informatique & Cours et tutorials gratuits en informatique

Reply

Marsh Posté le 17-05-2009 à 17:13:49

Bon je viens de mettre le tout sur une page de test mais ca ne marche pas même si le code me semble logique :
http://banacne.com/portfolio.html
où est l'erreur ?

---------------
Forum d'assistance informatique & Cours et tutorials gratuits en informatique

Reply

Marsh Posté le 17-05-2009 à 17:45:35

Gros bêta, la fonction c'est openImage, avec un I majuscule !
...