Comment cliquer sur une vignette et l'agrandir ?

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Comment cliquer sur une vignette et l'agrandir ?

numerixx

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.

Publicité

abais

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.

Profil supprimé

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 ?

abais

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.

numerixx

"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

numerixx

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

abais

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

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

numerixx

Tu l'as dit, gros beta effectivement !
Merci pour tout

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

FORUM HardWare.fr

Programmation

HTML/CSS

Comment cliquer sur une vignette et l'agrandir ?

Sujets relatifs
Agrandir le textarea de FCKeditor	CSS vs JavaScript & Reduire/Agrandir texte
Empecher d'agrandir une fenetre java.	Agrandir une image au survol de la mignature: Problème
agrandir les icone des album (coppermine)	Valider formulaire sans cliquer sur le bouton
Cliquer dans une zone en forme d'anneau	modifier le "fancy index" (index automatique apache)
pb : Je n'arrive plus à cliquer à cause d'un z-index	wxWidget : agrandir une fenetre
Plus de sujets relatifs à : Comment cliquer sur une vignette et l'agrandir ?

Page générée en 0.055 secondes