Le module finalisé
--> VOIR LA DEMO ET ESSAYER CE MODULE <--
| Pour télécharger les fichiers de ce module, c'est par ici |
Je ne vais pas ici vous détaillez toute la conception de cette galerie, ce serait revenir au base de l'intégration de balises HTML et de leur définition de règles CSS, ce qui rendrait ce tuto interminable.
Je vous fournirais les codes nécessaire à la mise en place de ce module sur votre site en vous fournissant les informations permettant d'y apporter vos retouches et définir ainsi votre style.
Le design de ce module reste relativement simple, son intégration est réalisée par quelques balises HTML et leur règle de style.
Le tout est comme d'habitude inséré dans une page au format HTML5.
Ensuite se présente un code Javascript, celui-ci sera directement lié à l'utilisation de la bibliothèque JQuery, qui permettra le chargement d'un fichier XML (contenant les appels d'images), la création de 2 ancres (symbolisées par les boutons associés) utilisées pour la navigation "next" et "prev" et la mise en boucle de la série d'image proposée.
Pour finaliser ce design, une petite barre de chargement (image au format .gif) est ajoutée afin de permettre aux visiteurs de votre site d'etre informé du chargement des images. Ce plus n'est pas obligatoire mais peut permettre à l'utilisateur d'etre certain du bon fonctionnement de la galerie au cas où vos images seraient volumineuses (c'est mieux qu'un écran noir).
Dans cet exemple, les codes CSS et JavaScript sont insérés directement dans la page HTML, rien ne vous empeche de créer des feuilles .css et .js séparée, il vous suffira alors de les appeler dans le <head> de votre page .html.
Tous les chemins de fichiers sont écris dans l'idée que tous les éléments composant cette galerie sont situés dans le meme dossier.
Si vous utilisez plusieurs dossiers, pensez à réécrire les chemins adéquats, celui du fichier .xml dans le code JavaScript et celui des images dans le fichier .xml.
Si vous renommez le fichier .xml, n'oubliez pas de reporter cette modification dans le code JavaScript.
Le code HTML à insérer dans la page contenant votre galerie
...
</head>
<body>
<div id="conteneur">
<div id="galerie">
<div id="imageplaceholder"></div>
</div>
<!-- la div id="footer" n'est absolument pas nécessaire, vous pouvez la supprimez si vous le souhaitez -->
<div id="footer">
<a href="http://dbmwebdesign.fr"><img src="http://dbmwebdesign.fr/favicon.png" alt="logo"
width="12" height="12" hspace="5" border="0">By www.dbmwebdesign.fr</a>
</div>
<!-- fin de la div id="footer" -->
</div>
</body>
</html>
Le code CSS définnissant le style de ce module
#conteneur { /*conteneur du module*/
margin: auto;
width: 800px;
margin-top: 200px;
background: #000;
padding-top:30px;
padding-right:30px;
padding-left:30px;
padding-bottom:5px;
border-radius:5px;
}
#galerie { /*contient le placeholder et les boutons de navigation, ces derniers sont positionner par rapport à ce conteneur */
position: relative;
margin: auto;
width: 800px;
height: 350px;
overflow: hidden;
}
#prev { /*bouton image précédente*/
width: 50px;
height: 50px;
position: absolute;
top: 150px;
left: 20px;
background: transparent url(images/leftarrow.png) no-repeat top left;
cursor: pointer;
}
#next { /*bouton image suivante*/
width: 50px;
height: 50px;
position: absolute;
top: 150px;
right: 20px;
background: transparent url(images/rightarrow.png) no-repeat top left;
cursor: pointer;
}
#imageplaceholder { /*conteneur dans lequel sont affichée les images*/
position: relative;
width: 800px;
height: 350px;
background: black url(images/loading.gif) no-repeat center center;
border-radius:5px;
}
/* en liaison avec la div id=footer, peut etre supprimé */
#footer { background:#000; text-align:center; color:#CCC; margin-top:5px;}
#footer a { color:#CCC; text-decoration:underline; }
#footer a:hover { color:#FFF; text-decoration:underline; }
Le code JavaScript permettant l'utilisation de ce module
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Slider CSS3 JQuery et HTML5</title>
<!-- on appel la bibliothèque JQuery -->
<script type="text/javascript" src="jquery.js"></script>
<!-- -->
<script type="text/javascript">
$(document).ready(function(){
var currentimage;
$.ajax({
url: 'galerie.xml',
type: 'GET',
dataType: 'xml',
error: function(){
alert('Error loading XML document');
},
success: function(xmlData){
setupImages(xmlData);
}
});
function setupImages(xmlData) {
currentimage = $(xmlData).find("image:first");
var t = setTimeout(function(){showNewImage()}, 1000);
var newhtml = "<a title=\"move to previous image\" id=\"prev\"></a><a title=\"move to next image\" id=\"next\"></a>";
$("#galerie").append(newhtml);
$("#prev").click(function(){
var tmp = $(currentimage).prev();
if ($(tmp).find("path").text()=="") {
currentimage = $(xmlData).find("image:last");
} else {
currentimage = tmp;
}
showNewImage();
});
$("#next").click(function(){
var tmp = $(currentimage).next();
if ($(tmp).find("path").text()=="") {
currentimage = $(xmlData).find("image:first");
} else {
currentimage = tmp;
}
showNewImage();
});
}
function showNewImage() {
var image = $(currentimage).find("path").text();
$("#imageplaceholder").animate({opacity:0},500, function(){
$(this).css({"backgroundImage":"url("+image+")"}).animate({opacity:1},500, function(){
});
});
}
});
</script>
Le code XML permettant de cibler les images à afficher
<gallery>
<image>
<path>images/sportcars1.jpg</path>
</image>
<image>
<path>images/sportcars2.jpg</path>
</image>
<image>
<path>images/sportcars3.jpg</path>
</image>
<image>
<path>images/sportcars4.jpg</path>
</image>
<image>
<path>images/sportcars5.jpg</path>
</image>
<image>
<path>images/sportcars6.jpg</path>
</image>
</gallery>
Vous voilà maintenant en possession d'un module de galerie d'image plutot agréable.
Il y a encore d'autre possibilité d'ajout de fonction à celui-ci, comme par exemple y intégrer un système de notation des images, ... Ca vous intrigue ! Cliquez ici pour en savoir plus.