Galerie photos fancybox et fichier XML ?

**arnofly** · 27/07/2010, 16h46

Bonjour,

J'aimerais réaliser une galerie de photos avec fancybox en utilisant un fichier xml qui contiendrait les images, afin de faciliter les modifications/ajouts de photos à venir.

<novice inside>Première question, est-ce que cela est possible... ?</novice inside>

Si oui, j'ai fait plusieurs essais, mais alors sans aucun résultat ! J'avais pourtant réussi a mettre en place cette solution pour une galerie en flash, mais là...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
 
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.2.pack.js"></script>
	<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.1.js"></script>
	<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.1.css" media="screen" />
 	<link rel="stylesheet" href="style.css" />
	<script type="text/javascript">
		$(document).ready(function() {
			$("a[rel=jqueryFancyboxGallery]").fancybox({
				'transitionIn'		: 'none',
				'transitionOut'		: 'none',
				'titlePosition' 	: 'over',
				'titleFormat'		: function(title, currentArray, currentIndex, currentOpts) {
					return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
				}
			});
		});
	</script>
</head>
 
<body>
 
  <!-- remplacement des liens ci-dessous par une fonction accédant au fichier xml -->
 
  <p><a rel="jqueryFancyboxGallery" href="galerie-photos/p1.jpg"><img src="galerie-photos/p1_mini.jpg" alt="" border="0" /></a></p>
  <p><a rel="jqueryFancyboxGallery" href="galerie-photos/p2.jpg"><img src="galerie-photos/p2_mini.jpg" alt="" border="0" /></a></p>
  <p><a rel="jqueryFancyboxGallery" href="galerie-photos/p3.jpg"><img src="galerie-photos/p3_mini.jpg" alt="" border="0" /></a></p>
 
  <!-- pour la creation du fichier xml, je veux bien aussi un petit coup de pousse... -->
 
</body>
</html>

merci à vous.

**Watilin** · 28/07/2010, 13h09

Salut,
oui c’est possible

JQuery permet de parcourir le XML comme le HTML, sans distinction ! Avec un XML chargé en mémoire, par exemple récupéré via Ajax, il suffit d’appeler .find().

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
var xml;
 
// requête basique
$.get('fichier.xml', function( data ) {
	xml = data;
});

Prenons par exemple l’arbre XML suivant (si c’est bizarre tkt, ça sort de mon imagination) :

Code XML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<gallery>
  <image width="320" height="180">
    <title>Paysage</title>
    <location>/img/paysage.jpg</location>
  </image>
  <image weight="2.7MB">
    <location>/land/photo.jpg</location>
  </image>
</gallery>

Tu peux accéder à la deuxième image de ce document comme ceci :

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

var imageNode = xml.find('image:eq(1)');

Pense aussi à la méthode .each().

Ensuite, pour construire une image HTML, ça pourra ressembler à ça :

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
va $newImg = $('<img alt="'
	+ imageNode.find('title').text()
	+ '" src="' + imageNode.find('location').text()
	+ '" />');

Je te laisse adapter mon exemple pour ton cas.

Note que si le fichier XML est sur la machine du client, tu ne peux pas y accéder en JS pour des raisons de sécurité.

**arnofly** · 29/07/2010, 16h39

Merci Watilin.

Vu mon niveau, ça me semble bien compliqué tout ça

Sinon, j'aurais peut-être du préciser que j'aimerais ne pas avoir à modifier le code JS ds le fichier HTML lorsque je voudrais ajouter des images à ma gallerie. En gros je cherche une fonction qui lit les images les unes apres les autres, ds le XML sans connaitre le nombre de photos totale à lire. Le changement d'image se fait par un clic de souris de l'utilisateur, classique quoi

**Watilin** · 29/07/2010, 19h56

Ça aussi c’est très simple

En reprenant mon exemple, j’obtiens le nombre d’images en faisant simplement :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

xml.find('image').length

Sinon, il ressemble à quoi ton XML ?

**arnofly** · 29/07/2010, 21h36

Envoyé par Watilin

Sinon, il ressemble à quoi ton XML ?

A rien...

Je ne sais pas vraiment comment m'y prendre. J'ai essayé plusieurs trucs, le dernier étant ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?xml version="1.0" encoding="UTF-8"?> 
 
  <lesImages> 
 
	<photo>
		<a rel="jqueryFancyboxGallery" href="galerie-photos/chambre-iles.jpg"><img src="galerie-photos/chambre-iles.jpg" alt="" width="100" height="65" border="0" /></a>
	</photo>
	<photo>
		<a rel="jqueryFancyboxGallery" href="galerie-photos/chambre-marine.jpg"><img src="galerie-photos/chambre-marine.jpg" alt="" width="100" height="65" border="0" /></a>
	</photo>
	<photo>
		<a rel="jqueryFancyboxGallery" href="galerie-photos/chambre-romantique.jpg"><img src="galerie-photos/chambre-romantique.jpg" alt="" width="100" height="65" border="0" /></a>
	</photo>
	<photo>
		<a rel="jqueryFancyboxGallery" href="galerie-photos/chambre-savane.jpg"><img src="galerie-photos/chambre-savane.jpg" alt="" width="100" height="65" border="0" /></a>
	</photo>
	<photo>
		<a rel="jqueryFancyboxGallery" href="galerie-photos/chambre-soleil.jpg"><img src="galerie-photos/chambre-soleil.jpg" alt="" width="100" height="65" border="0" /></a>
	</photo>
 
  </lesImages>

Je crois que ça ne va pas du tout

C'est la deuxième fois de ma vie que je cherche à utiliser un fichier XML, un peu largué le garçon

Mais bon, ces fichiers semblent incontournables aujourd'hui, alors je me jette l'eau. Pareil pour le JS, je ne maitrise pas du tout, mais je me force pour progresser. 3615 ma vie

**Watilin** · 29/07/2010, 23h40

Bah le principe du XML c’est que c’est toi qui décides de la structure. Dans mon exemple, c’est moi qui ai décidé que l’élément racine s’appellerait <gallery>, que les images s’appelleraient <image>, etc. Pareil pour les attributs.

Naturellement, les navigateurs ne sont pas censés savoir ce qu’ils doivent faire avec du XML. L’important c’est que ton script soit capable d’interpréter ton document XML, il faut donc construire les deux ensemble.

Galerie photos fancybox et fichier XML ?

jQuery

Vue hybride

Discussions similaires

Partager

Partager