Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
Lien pour comprendre pourquoi le contenu n'est pas sous hide
Lien pour comprendre pourquoi le contenu n'est pas sous hide
Salut à tous,
Je viens de me fendre d'un petit plugin permettant de proposer à vos membres le choix d'une image de fond, sur l'élément que vous voulez (que ça soit votre en-tête, le fond de votre chatbox, le fond du forum, etc.). Le choix est ensuite sauvegardé, et l'utilisateur retrouvera ce fond à chaque page visitée, y compris après fermeture du navigateur.
Le projet sur GitHub - Exemple en live sur CodePen
1. Préparer le html
La première chose, c'est de créer un sélecteur. Si vous n'êtes pas familier avec les éléments de formulaire en html, vous pouvez vous référer au chapitre "les listes déroulantes" sur OpenClassrooms.
Il va donc falloir ajouter un bout de code dans votre template. À vous de voir où vous souhaitez le mettre. Par défaut, je vous suggère de lui trouver une place dans le template overall_header, après <body>. Pour cela, allez dans votre interface d'administration, puis "Affichage" → "Templates" → "Général". Après toute modification, pensez à appliquer celles-ci (bouton "+" vert une fois que vous aurez sauvegardé, dans la liste des templates).
Voilà un exemple du code à mettre :
- Code:
<select id="change-background" class="select">
<option value="image1" data-image="http://adresseimage1.jpg">Image 1</option>
<option value="image2" data-image="http://adresseimage1.jpg">Image 2</option>
<option value="image3" data-image="http://adresseimage1.jpg">Image 3</option>
<option value="image4" data-image="http://adresseimage1.jpg">Image 4</option>
</select>
- value="" est un identifiant pour l'élément sélectionné dans la liste. Veillez à ce que chaque valeur soit unique !
- data-image="" doit contenir l'url (adresse) de votre image. Elle peut être hébergée n'importe où.
Sur la balise <select>, l'ID peut être modifié selon votre envie, mais attention à bien reporter la modification dans le Javascript par la suite. La classe ne sert qu'à styliser votre élément en CSS, vous pouvez choisir ce que vous voulez.
À vous, par la suite, d'appliquer du CSS pour améliorer le rendu du sélecteur, modifier sa position, etc.
2. Préparer le JS
Vient ensuite le moment d'ajouter le plugin à vos scripts. Pour ça, vous avez deux solutions :
La première, c'est d'ajouter un nouveau script directement dans l'administration de votre forum. Pour ça, rendez-vous sur "Modules" → "HTML & Javascript" → "Gestion des codes Javascript". Enfin, cliquez sur "Créer un nouveau Javascript".
Là, vous allez devoir remplir quelques champs. Indiquez un titre, cochez "toutes les pages", et dans le dernier champ, on écrira le code indiqué plus loin.
La seconde méthode, c'est d'ajouter le script directement dans votre html ; vous pouvez faire ça dans votre template overall_header, JUSTE AVANT la ligne </head> (et non <head> !), ou bien dans overall_footer_end, JUSTE AVANT la ligne </body>.
Dans un cas comme dans l'autre, voici comment ajouter le code :
- Code:
<script type="text/javascript">
/* ici le contenu du script que l'on verra plus loin */
</script>
Maintenant que tout ceci est prêt, voilà le code en question (en deux parties distinctes). D'abord, le plugin en lui-même (minifié et compressé pour un gain de place / poids) :
- Code:
(function(e,t){e.fn.changeBackground=function(t){t=e.extend({target:"body"},t);this.each(function(){function a(e){r.css({"background-image":'url("'+e+'")'})}function f(){n.val(localStorage[s])}var n=e(this),r=e(t.target),i="fondForum:"+window.location.host+"Img",s="fondForum:"+window.location.host+"Select",o,u;if(localStorage[i]){a(localStorage[i]);f()}n.on("change",function(){u=n.find(":selected").data("image");o=n.val();a(u);localStorage.setItem(i,u);localStorage.setItem(s,o)})});return this}})(jQuery);
Vous pouvez le copier-coller directement aux emplacements présentés plus tôt.
Ensuite, il faut instancier le plugin sur le sélecteur html. Pour ça, on ajoute ceci juste après le code qu'on vient de copier :
- Code:
$(document).ready(function() {
$('#change-background').changeBackground();
});
La première ligne sert à attendre que jQuery (et la page en elle-même) ait fini de charger. La seconde, c'est celle qui nous intéresse.
On y appelle le plugin sur notre élément (le sélecteur). Remarquez (si vous n'êtes pas familier avec le jQuery) que la syntaxe est la même que pour le CSS. Ainsi, on avait défini un attribut id="change-background" sur notre élément html, on l'appelle donc avec le croisillon (non, ce n'est pas une dièse). Si vous changez votre ID dans le html, vous devez le changer ici aussi.
On y appelle le plugin sur notre élément (le sélecteur). Remarquez (si vous n'êtes pas familier avec le jQuery) que la syntaxe est la même que pour le CSS. Ainsi, on avait défini un attribut id="change-background" sur notre élément html, on l'appelle donc avec le croisillon (non, ce n'est pas une dièse). Si vous changez votre ID dans le html, vous devez le changer ici aussi.
Ensuite, enregistrez votre code. Le voici fonctionnel.
3. Les options
En l'état, le plugin fonctionne par défaut sur l'élément body (le fond de la page). Vous pouvez ajuster ce point en modifiant l'instanciation du plugin (voir juste au-dessus).
- Code:
$(document).ready(function() {
$('#change-background').changeBackground({
target: '.monElement'
});
});
La syntaxe change légèrement : On passe une option au plugin. Ici, l'élément important est '.monElement'. C'est une syntaxe CSS classique, à vous d'écrire le sélecteur CSS qui convient pour cibler l'élément sur lequel vous souhaitez agir, en lieu et place du body.
4. Multiple
Vous pouvez avoir plusieurs sélecteurs. Il faut que ceux-ci aient un ID différent dans le html. Ensuite, il suffit de les instancier chacun à leur tour :
- Code:
$(document).ready(function() {
$('#change-background').changeBackground();
$('#autre-element').changeBackground();
});
Conclusion
Je ne cache rien, vous pouvez prendre tout ça en l'état. N'hésitez pas à poser des questions si besoin. Il est possible que le plugin évolue avec le temps et propose de nouvelles options et d'autres fonctionnalités, ou bien qu'il soit simplement amélioré ; auquel cas, ce sera signalé ici. Il vous suffira de copier/coller le nouveau code pour le remplacer.
