Le module complété
--> VOIR LA DEMO ET ESSAYER CE MODULE <--
| Pour télécharger les fichiers de ce module, c'est par ici |
Nous avons vu précédemment comment élaborer une galerie d'image unique et stylée.
Je vais maintenant vous proposer quelques bouts de code qui vous permettrons une vraie intéraction avec les visiteurs de votre site en leur permettant de noter les images visualisées.
Nous apporterons un petit complément au code JavaScript en y ajoutant des fonctions permettant d'afficher la note actuelle de l'image, de permettre à l'utilisateur de donner la sienne, recalculer la note en fonction de celle qui vient d'etre donnée par le visiteur et empecher le votre multiple d'un meme internaute sur une image.
En complément, nous ajouterons au fichier .xml les balises nécessaires à l'affichage et au calcul de la note présentée puis nous intégrerons un fichier .php permettant de mettre le fichier .xml pour mémoriser la note moyenne (basée sur les notes données et le nombre de vote).
Nous ajouterons évidemment quelques balises HTML dans notre document et les règles CSS y étant associées.
Code HTML supplémentaire
...
</head>
<body>
<div id="conteneur">
<div id="galerie">
<div id="imageplaceholder"></div>
<!-- ######### code à ajouter dans votre fichier html ############## -->
<div id="instructions">Chargement des images</div>
<div id="rating">
<div id="starbg">
<div id="stars">
</div>
</div>
</div>
<!-- ####### fin du supplément ######## -->
</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>
Code CSS à ajouter
...
#instructions { /*affiche le texte d'information */
display: none;
position: absolute;
bottom: 30px;
color: #fff;
width: 800px;
text-align: center;
}
#rating { /*conteneur du module de vote */
display: none;
position: absolute;
width: 300px;
height: 30px;
background: rgba(0,0,0,0.8);
border-radius: 10px 10px 0 0;
left: 250px;
bottom: 0px;
}
#starbg { /*fond d'affichage des note*/
position: relative;
background: transparent url(images/starbg.png) no-repeat top left;
width: 300px;
height: 30px;
border-radius: 10px 10px 0 0;
cursor: pointer;
}
#stars { /*affichage de la note*/
position: relative;
background: transparent url(images/stars.png) no-repeat top left;
width: 300px;
height: 30px;
border-radius: 10px 10px 0 0;
}
#galerie:hover #rating, #galerie:hover #instructions { /*le module ne s'affiche qu'au survol de la galerie*/
display: block;
}
On retravaille le fichier XML
<?xml version="1.0" encoding="UTF-8"?>
<galerie>
<image>
<path>images/sportcars1.jpg</path> <!-- on défini l'image -->
<rating>4</rating> <!-- note actuelle affichée -->
<numvotes>1</numvotes> <!-- nombre de vote éffectué sur cette image -->
<hasvoted>false</hasvoted> <!--possibilité de vote // False: vote possible ; true: impossible de voter -->
</image>
<image>
<path>images/sportcars2.jpg</path>
<rating>2</rating>
<numvotes>1</numvotes>
<hasvoted>false</hasvoted>
</image>
...
</galerie>
On établie un fichier php permettant la mise à jour du document xml
Pour cet exemple, le fichier PHP est nommé "updatexml.php" et placé dans le meme dossier que les fichiers .html, .xml et .js
$file = 'galerie.xml';
$xml = simplexml_load_file($file);
$score = $xml->xpath('/galerie/image[path="'.$_GET["image"].'"]/rating');
$numvotes = $xml->xpath('/galerie/image[path="'.$_GET["image"].'"]/numvotes');
$oldscore = (double)$score[0];
$votes = (integer)$numvotes[0];
$tmpscore = ($oldscore*$votes)+$_GET['rating'];
$votes = $votes+1;
$newscore = $tmpscore/$votes;
$score[0][0] = $newscore;
$numvotes[0][0] = $votes;
$fp = fopen('galerie.xml', 'w');
fwrite($fp, $xml->asXML());
fclose($fp);
?>
Et pour finir on complète notre script JavaScript
<!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;
<!--#######code a ajouter ###########################################################-->
var score = 0;
var numvotes = 0;
var starwidth = 0;
<!-- -->
$.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();
<!--#######code a ajouter ######################################################################-->
var caption = $(currentimage).find("caption").text();
score = parseFloat($(currentimage).find("rating").text());
numvotes = parseInt($(currentimage).find("numvotes").text());
starwidth = parseInt(score*40)+50;
$("#stars").css({width:starwidth});
$("#imagelabel").removeClass("active");
<!-- -->
$("#imageplaceholder").animate({opacity:0},500, function(){
$(this).css({"backgroundImage":"url("+image+")"}).animate({opacity:1},500, function(){
<!--#######code a ajouter ########################################################################-->
$("#imagelabel").addClass("active");
<!-- -->
});
});
<!--#######code a ajouter ########################################################################-->
$("#imagelabel").text(caption);
if ($(currentimage).find("hasvoted").text()=="false") {
$("#instructions").html("Cliquez pour noter cette image");
} else {
$("#instructions").html("Vous avez déjà noté cette image");
}
}
$("#starbg").mousemove(function(e){
var offset = $(this).offset();
var position = e.pageX - parseInt(offset.left);
var starwidth = (parseInt((position-50)/40)+1)*40+50;
if ($(currentimage).find("hasvoted").text()=="false") {
$("#stars").css({width:starwidth});
}
}).mouseout(function(){
$("#stars").css({width:starwidth});
}).click(function(){
if ($(currentimage).find("hasvoted").text()=="false") {
$(currentimage).find("hasvoted").text("true");
newscore = parseInt($("#stars").css("width"));
var tmpscore = (parseInt((newscore-50)/40));
totalscore = score*numvotes;
totalscore = totalscore+tmpscore;
numvotes = numvotes + 1;
score = parseInt((totalscore/numvotes)*100)/100;
$(currentimage).find("rating").text(score);
starwidth = parseInt(score*40)+50;
$("#stars").css({width:starwidth});
tmppath = $(currentimage).find("path").text();
$.get("updatexml.php", { image: tmppath, rating: tmpscore } );
$("#instructions").html("Note validée !");
} else {
$("#instructions").html("Vous ne pouvez pas noter 2 fois");
}
<!-- -->
});
});
</script>
Et voilà, vous voici maintenant avec un module qui permettra aux visiteurs de votre site de noter vos photos.