Une galerie en javascript sans rechargement de la page (merci Ryle!)

22 août 2007, 15:45

Bonjour à tous!

Pour créer une galerie photo en php, j'ai utilisé des variables de session que je passe en url.

J'ai plusieurs miniatures (De 10 à 50) positionnées sur une div (avec un scroll) et au clic sur l'une d'elle, je fais charger à PHP, la photo en taille réelle. Tout fonctionne bien, cependant un élément ne me plaît pas, car il n'est pas pratique pour l'internaute.

En effet, à chaque clic sur l'une des miniatures (lien pour ouvrir la nouvelle page avec la photo agrandie), on assiste a un rechargement complet de la page, ce qui provoque un retour de l'ascenseur en position d'origine. L'internaute est donc obligé de scroller à chque fois qu'il veut cliquer sur une nouvelle miniature.

Comme une démo vaut mieux qu'une explication, je vous mets un lien sur lequel se pose le problème:

http://www.e-vendee.fr/medievales-commequiers.php

J'ai recherché et les seuls éléments que j'ai trouvé préconisent l'utilisation d'AJAX ou de flash, ce qui pose le problème de compatibilité des navigateurs, et du référencement.

Auriez-vous une idée pour empêcher le rechargement du scroll, que ce soit une idée ou un tuto?

J'espère que mes explications sont compréhensibles,

Merci par avance pour les éléments que vous voudrez bien m'apporter.

Cordialement

22 août 2007, 16:02

Pas besoin de flash ou d'ajax, une simple fonction javascript peut suffire.

En effet, au lieu dans ton lien de recharger la page en passant en argument le nom d'une image, tu peux tout aussi bien passer le nom de cette image à une fonction javascript qui mettra à jour le contenu d'un div, ou même directement l'attribut source d'une image

Code : Tout sélectionner

<a href="javascript:maFonction('monImage.jpg');"><img src="..."></a>
...
<div id="div_de_la_photo"></div>

<script ...>
function maFonction(image) {
  // modifie le contenu du div en insérant une balise image dont la source est passée en paramètre
  document.getElementById('div_de_la_photo').innerHTML = '<img src="'+image+'" />');
}
</script>

22 août 2007, 17:18

Salut Ryle et merci pour ta réponse!

çà faisait un moment que je n'étais pas venu t'embêter...

Il y a t-il des éléments à mettre dans le <Head> et d'autres dans le <body>??

Merci par avance

22 août 2007, 17:26

héhé, ca te manquait hein

bah euh.. non pas spécialement.. c'est peut être mieux de coller la fonction et les balises script dans le <head> au niveau recommandation w3c, mais sinon à priori n'importe quel navigateur l'interpretera correctement où qu'elle soit

22 août 2007, 17:42

Ok!!

Oui c'est clair, deux mois sans Ryle, c'est signe que l'on s'ennuie en php...

J'essaie ça et je te tiens au courant!

Merci encore!

@+

!

23 août 2007, 09:30

Salut Ryle!

J'ai testé et après plusieurs essais, je suis arrivé à quelque chose qui me convenait (que je trouve logique), mais a priori, les navigateurs n'on pas la-même logique que moi... (sans blague!!!!

)

Voici mon code:

Code : Tout sélectionner

<head><script ...> 
function maFonction(image) { 
  // modifie le contenu du div en insérant une balise image dont la source est passée en paramètre 
  document.getElementById('photodiv').innerHTML = '<img src="actualites/commequiers/'+image'" />'; 
} 
</script></head>
<body>
<div id="global">
	<div id="contenu">
		 <div id="photodiv"></div> 

		<div id="galerie">
	 <table width="200" border="0" cellpadding="2">
      <tr>
        <td width="100"><a href="javascript:maFonction('medievales-commequiers01.jpg');"><img class="img" src="actualites/medievales-petites/medievales-commequiers01.jpg" alt="Médiévales de Commequiers: Jongleur de diabolo en feu" title="Médiévales de Commequiers: Jongleur de diabolo en feu" /></a></td>
        <td width="100"><a href="javascript:maFonction('medievales-commequiers02.jpg');"><img class="img" src="actualites/medievales-petites/medievales-commequiers02.jpg" alt="Médiévales de Commequiers: Cavalier en équilibre sur sa fidèle monture" title="Médiévales de Commequiers: Cavalier en équilibre sur sa fidèle monture" /></a></td>

Vois-tu où se situe le problème. Je me suis rendu compte d'un truc avec les parenthèses. Dans le code que tu m'avais envoyé; il y avait une parenthèse de fin, mais pas d'ouverture au niveau du innerHTML (du coup, je l'ai squeezé, c'est peut-être lié à çà...)

Merci par avance pour ton aide.

@+!

PS: Je me suis permis d'écrire en invité, car je me suis dis que tu ne verrais pas mon problème, si tu avais déjà lu ma première réponse.

23 août 2007, 15:19

Bonjour à tous!

Je viens de trouver les erreurs.

J'avais fait un peu trop de zèle et entaillé le code un peu massivement. De plus, la petite parenthèse était effectivement en trop.

Le code devient donc pour une belle galerie en javascript; du coup, il n'y a même plus besoin de php...

(Bien sûr, il est toujours possible de remplir tout ça avec une base de données, mais dans mon cas la page est évènmentielle, et ne sera pas modifiée)

Dans le <head> de votre page:

Code : Tout sélectionner

<head>
<script ...> 
function maFonction(image) { 
  // modifie le contenu du div en insérant une balise image dont la source est passée en paramètre 
  document.getElementById('photodiv').innerHTML = '<img src="actualites/commequiers/'+image+'" />';  
} 
</script>
</head>

Et dans le <body>:

Code : Tout sélectionner

<body>
<div id="global">
	 <div id="photodiv"><img src="Images/grandes/01.jpg" alt="Image par défaut" title="Image par défaut"/></div> 
	<div id="contenu">
	<table width="200" border="0" cellpadding="2">
      <tr>

Avec, pour chaque image de la galerie:

Code : Tout sélectionner

        <td width="100"><a href="javascript:maFonction('medievales-commequiers01.jpg');"><img class="img" src="Images/petites/01.jpg" alt="Médiévales de Commequiers: Jongleur de diabolo en feu" title="Médiévales de Commequiers: Jongleur de diabolo en feu" /></a></td>
        <td width="100"><a href="javascript:maFonction('medievales-commequiers02.jpg');"><img class="img" src="Images/petites/02.jpg" alt="Médiévales de Commequiers: Cavalier en équilibre sur sa fidèle monture" title="Médiévales de Commequiers: Cavalier en équilibre sur sa fidèle monture" /></a></td>
//...............
</tr></table></div>
</body>

- Point supplémentaire: La partie:

Code : Tout sélectionner

'<img src="actualites/commequiers/'+image+'" />';

qui me posait problème, allège le code; en effet, s'il on avait omis le chemin avant le '+image+', on aurait été obligé d'indiquer le chemin complet à chaque photo... on y gagne donc quelques octets.

Merci pour tout Ryle: j'ai bien compris le code...

Enfin je crois

@+!!

23 août 2007, 15:41

Cool

Aller, tiens, pis tant qu'on y est, tu peux aussi y passer un titre dans ta fonction pour l'afficher dans ta galerie :

Code : Tout sélectionner

<a href="javascript:maFonction('medievales-commequiers02.jpg', 'Médiévales de Commequiers: Cavalier en équilibre sur sa fidèle monture');">
  <img class="img" src="actualites/medievales-petites/medievales-commequiers02.jpg" 
     alt="Médiévales de Commequiers: Cavalier en équilibre sur sa fidèle monture" />
</a>

function maFonction(image, titre) { 
  // modifie le contenu du div en insérant une balise image dont la source est passée en paramètre 
  document.getElementById('photodiv').innerHTML = '<img src="actualites/commequiers/'+image'" alt="'+titre+'"/>'; 
  // ajoute un retour à la ligne et un titre
  document.getElementById('photodiv').innerHTML+= '<br />' + titre;
}

Et si tu veux y coller un peu de php malgré tout, rien ne t'empêche de faire un dossier spécial contenant toutes les photos et le parcourir avec read_dir pour générer les liens et les miniatures

23 août 2007, 16:13

Oh non!!! J'voulais y ariver tout seul!!!

Lol!

Oui enfin entre vouloir et pouvoir....

Je m'y attelle monseigneur du web, grand gourou du php et du js...

Apparemment ça ne marche pas chez moi, mais je vais tâcher de bien chercher avant de t'ennuyer à nouveau.

Juste une question: à quoi sert la stucture avec le saut de ligne et le titre?? et comment est faite sa construction ? Notamment je ne comprends pas le + avant le = de cette structure:

Code : Tout sélectionner

document.getElementById('photodiv').innerHTML+= '<br />' + titre;

Merci d'avance!

23 août 2007, 16:21

Alors z'en gros :
document.getElementById('photodiv') : correspond à ton div
document.getElementById('photodiv').innerHTML : correspond quant à lui à son contenu

Comme en php, le += permet d'additionner (ou en l'occurence concaténer), des éléments à la suite de ta variable (et donc ici au ton contenu de ton div). Ainsi ton div contiendra ta balise image, suivi d'une balise <br> et du titre de l'image qui sera donc affiché à l'écran sous la photo (enfin si tu veux qu'il le soit, sinon tu le dégages

)

" variable+= 'yyy' " équivaut à " variable = variable + 'yyy' "

23 août 2007, 16:33

D'accord, j'avais pas tout compris alors:

je voulais simplement que la balise alt de la grande image récupère le alt de chaque petite. Mais çà ne doit pas en être très loin; donc je vais chercher.

Dès que je trouve je te dis, enfin si je trouve... !

Ciao! Merci encore!

23 août 2007, 16:35

ben cf le code ci-dessus, une fois que tu passes le titre à ta fonction tu peux en faire ce que tu veux, comme par exemple l'insérer dans ta balise image en tant que alt et title

L'idée c'est vraiment de générer le code html qui sera affiché dans le div, comme tu le ferais avec php

24 août 2007, 00:36

Je comprends Ryle!

Merci pour toutes tes explications et le temps passé!

On se sent bien quand même sur ce forum!!

@+!

Une galerie en javascript sans rechargement de la page (merci Ryle!)

Qui est en ligne