Home

Informatique // Code Source – Galerie Jquery & XML – Tutorial

Code Source – Galerie Jquery & XML – Tutorial

Capture du 2015-11-02 16:53:52

Bonjour je vous présente ici ma Galerie JQuery.
Elle charge une liste d’images gérée en XML.

Commencez par lier les fichiers nécessaires dans votre header :

<!– JQuery –>
<script type= »text/javascript » src= »js/jquery-1.11.3.min.js »></script>
<!– PnkGallery –>
<link href=’css/pnk-gallery.css’ rel=’stylesheet’ type=’text/css’>
<script type= »text/javascript » src= »js/pnk-gallery.js »></script>

Voici le format du XML :

<?xml version= »1.0″ encoding= »UTF-8″?>
<galerie>
<image>
<filename>photo1.jpg</filename>
<caption>description</caption>
</image>
<image>
<filename>photo2.jpg</filename>
<caption>description</caption>
</image>
<image>
<filename>photo3.jpg</filename>
<caption>description</caption>
</image>
<image>
<filename>photo4.jpg</filename>
<caption>description</caption>
</image>
<image>
<filename>photo5.jpg</filename>
<caption>description</caption>
</image>
<image>
<filename>photo6.jpg</filename>
<caption>description</caption>
</image>
<image>
<filename>photo7.jpg</filename>
<caption>description</caption>
</image>
<image>
<filename>photo8.jpg</filename>
<caption>description</caption>
</image>
<image>
<filename>photo9.jpg</filename>
<caption>description</caption>
</image>
</galerie>

Pour appeller la galerie, insérez le script ci dessous :

<script>
afficheDiaporama(‘nomDuDossier’);
</script>

 

La démo de la galerie est disponible ici -> demo
Pour télécharger le fichier compressé c’est ici -> tar.gz

Hav Fun !