Galerie photo avec menu ruban

Télécharger le projet
Commenter

Description

Firefox ? IE ? Safari

Démo ici :
http://www.jean-mi.com/JMGalerie

Galerie fonctionnant avec la librairie de "The Rubik's Man" et inspirée de scripts trouvés sur le Web (voir liens dans la conclusion).
  • Fichier XML à préparer (files/galerie.xml)

Insérez le nombre d'albums et de photos que vous souhaitez sur le même modèle que l'exemple :
<album id= « [ID de l'album] »>
<photo title= « [Titre de la photo] » src= « files/[Nom de l'image] » />
</album>
  • Dossier à organiser (files/)

Insérez vos images dans le dossier « files ».
Les images grand format ont pour début de nom de fichier « files/gd_[Nom de l'image] » tandis que les miniatures ont pour début de nom de fichier « files/[Nom de l'image] ».
[Nom de l'image] doit etre identique pour les deux formats.
Aussi c'est le nom des miniatures « files/[Nom de l'image] » qui doivent figurer dans le fichier XML (« src » des photos).
[Nom de l'image] peux contenir des noms de dossiers/sous-dossiers (comme dans l'exemple : le dossier « macbookpro »).
  • Paramètres de la fonction

Le premier indique l'ID de l'album présent dans le fichier XML (<album id= «[ID de l'album]»>)
Le second indique la première image sélectionnée (ex : 3)

Source / Exemple : 


<!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>JMGalerie</title>

<link rel="stylesheet" href="JMpack/JMGalerie_styles.css" type="text/css" />
<script type="text/javascript" src="JMpack/therubiksman_lib.js"></script>
<script type="text/javascript" src="JMpack/JMGalerie.js"></script>
	
</head>
<body>

	
<div id="JMgalerie">

	<p>Votre navigateur ne peux pas afficher ce diaporama.<br />Pour palier à ce problème, vous devez activer le JavaScript dans les options de votre navigateur.</p>
	
</div>

<script language="javascript">

	window.onload = JMGalerie("macbookpro", 1);

</script>
	
	
	
</body>
</html>

Conclusion :


The Rub's Man Librairie
http://www.javascriptfr.com/codes/AJAX-LIBRAIRIE-SIMPLIFIEE-PERMETTANT-LIGNE-FAIRE-REQUETES_39686.aspx

///////////////////////////////////////

Ce script est amené à etre amélioré
N'hésitez pas à poster vos commentaires

///////////////////////////////////////
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (cs_JeMi)