T.V
- Les sliders de comparaison permettent aux utilisateurs de comparer rapidement 2 images (généralement de type avant-après, mais pas nécessairement). On fait glisser un curseur pour afficher moins l'image d'avant et plus l'image d'après, et vice versa. Voici comment créer votre propre slider de comparaison interactif.
Ou, dans la campagne ci-dessous, déplacez le curseur blanc pour comparer les images :
Les sliders de comparaison sont parfaits dans certaines situations telles que la présentation de transformations à vos clients : mode, paysages, rénovation de cuisine, etc. Il ne doit pas forcément s'agir de chronologies (avant et après), mais pourquoi pas d'une comparaison créative entre produits par exemple.
Créez un slider de comparaison d'images pour votre campagne
Suivez les instructions ci-dessous pour créer et utiliser votre slider.
Étape 1) Créez votre campagne Qualifio
Étape 2) Accédez aux liens vers les images que vous souhaitez comparer
Si vous n'avez nulle part où héberger vos photos, vous pouvez les télécharger dans Qualifio > Documents > Bibliothèque Multimédia.
Étape 3) Ajoutez un peu de code
Vous n'avez pas besoin de savoir le code pour utiliser ce slider. Cependant, pour configurer celui-ci, vous devrez remplacer les liens des images par les vôtres. Ne vous inquiétez pas, c'est très simple !
1. Commencez par copier le code ci-dessous :
<div id="slider"><img alt="Before" src="//files.qualifio.com//library/product_team_0/images/2019/tab/slider-friends-quiz-colour.jpg" style="width: 594px; height: 446px;" /> <img alt="After" src="//files.qualifio.com//library/product_team_0/images/2019/tab/slider-friends-quiz-grey.jpg" style="width: 594px; height: 446px;" /></div>
Ensuite, collez-le dans votre campagne et insérez vos propres liens d'image. N'oubliez pas d'ajuster la taille (largeur et hauteur), aussi !
Remarque : Vous pouvez ajouter votre slider n'importe où dans votre campagne sauf dans les onglets Règlements, Gagnants et Contact. Nous vous recommandons également de ne pas utiliser la récapitulation des bonnes réponses dans l'écran de sortie si vous avez utilisé des sliders pour illustrer vos questions.
2. Copiez ce second code dans votre campagne à l'étape Apparence > Paramètres avancés > CSS :
.before-after{position:relative;display:inline-block;vertical-align:top;user-select:none;max-width:100%}.before-after .photo img{display:block;max-width:100%;height:auto}.before-after .photo.before{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;transform:translate(-50%)}.before-after .photo.before img,.before-after .photo.before .layer{transform:translate(50%)}.before-after .drag-handler{width:5px;background-color:#fff;margin:0 0 0 -2px;position:absolute;left:50%;top:0;height:100%;opacity:.25}.before-after .drag-handler .drag-element{position:absolute;left:-16px;top:50%;width:38px;height:38px;margin:-16px 0 0 0;background-color:#fff;cursor:col-resize;border-radius:100%;-webkit-border-radius:100%}.before-after:hover .drag-handler{opacity:1}
3. Enfin, copiez ce troisième et dernier code dans votre campagne, toujours à l'étape Apparence > Paramètres avancés > JavaScript :
var BeforeAfter=(function(){function a(b){this.handler=b;if(this.checkHandlerExist()&&this.checkImagesExist()){this.init();this.bindEvents()}}a.prototype.init=function(){this.wrapHandler();this.wrapImages();this.createHandler()};a.prototype.wrapHandler=function(){var c=this.getHandler().innerHTML;var b=document.createElement("div");b.className="before-after";b.innerHTML=c;this.getHandler().innerHTML=b.outerHTML};a.prototype.wrapImages=function(){var b=this.getImages();for(var d=0,c=b.length;d<c;d++){b[d].outerHTML=this.getWrappedImage(b[d].outerHTML,d)}};a.prototype.getWrappedImage=function(d,c){var b=document.createElement("div");b.className="photo";b.innerHTML=d;if(c===0){b.className+=" before"}else{b.className+=" after"}return b.outerHTML};a.prototype.createHandler=function(){var d=this.getHandler().querySelector(".before-after");var c=document.createElement("div");c.className="drag-handler";c.draggable=true;var b=document.createElement("div");b.className="drag-element";c.appendChild(b);d.innerHTML+=c.outerHTML};a.prototype.checkHandlerExist=function(){return this.getHandler()!==undefined};a.prototype.checkImagesExist=function(){return this.getImages().length===2};a.prototype.getImages=function(){var b=this.getHandler().querySelectorAll("img");if(b.length===0){return this.getHandler().querySelectorAll(".layer")}return b};a.prototype.bindEvents=function(){var b=this;"mousedown touchstart".split(" ").forEach(function(c){b.getDragHandler().addEventListener(c,function(d){d.preventDefault();d.stopPropagation();b.markDragStart()})});"mouseup touchend".split(" ").forEach(function(c){document.addEventListener(c,function(){b.markDragStop()})});"mousemove touchmove".split(" ").forEach(function(c){b.getContainer().addEventListener(c,function(f){if(b.isDragStart()){var d=c==="touchmove"?f.changedTouches[0].clientX:f.clientX;b.update(d)}})})};a.prototype.getHandler=function(){return this.handler};a.prototype.getContainer=function(){return this.getHandler().querySelector(".before-after")};a.prototype.getDragHandler=function(){return this.getHandler().querySelector(".drag-handler")};a.prototype.getDragHandlerOffsetX=function(){return this.getDragHandler().offsetLeft};a.prototype.getPositionByOffset=function(c){var d=(c-this.getHandlerOffsetX())*100/this.getImagesWidth();var b=null;if(d<0){b=0}else{if(d>100){b=100}else{b=d}}return b};a.prototype.update=function(c){var b=this.getPositionByOffset(c);this.updateDragHandlerPosition(b);this.updatePhotoBefore(b)};a.prototype.updateDragHandlerPosition=function(b){this.getDragHandler().style.left=b+"%"};a.prototype.updatePhotoBefore=function(b){var d=this.getPhotoBefore();var c=this.getPhotoBeforeImage();var e=100-b;d.style.transform="translate("+(-1*e)+"%)";c.style.transform="translate("+e+"%)"};a.prototype.getPhotoBefore=function(){return this.getHandler().querySelector(".photo.before")};a.prototype.getPhotoBeforeImage=function(){var b=this.getPhotoBefore().querySelector("img");if(b===null){return this.getPhotoBefore().querySelector(".layer")}return b};a.prototype.getImagesWidth=function(){return this.getHandler().querySelector(".before-after").offsetWidth};a.prototype.getHandlerOffsetX=function(){return this.getHandler().getBoundingClientRect().left};a.prototype.markDragStart=function(){this.dragStart=true};a.prototype.markDragStop=function(){this.dragStart=false};a.prototype.isDragStart=function(){return this.dragStart===true};return a})();document.addEventListener("DOMContentLoaded",function(){var a=new BeforeAfter(document.querySelector("#slider"))});
Étape 4) Prévisualisez votre slider
Vous pouvez voir à quoi ressemble le slider dans votre campagne grâce à notre mode de Prévisualisation.
Le slider est bien sûr responsive et fonctionne sur tous les appareils. Idéal sur mobile !
Trucs & astuces
- Utilisez des images de même taille.
- Le slider n'a que 2 couches. Il n'est pas possible de comparer les différences entre 3 images.
- Le curseur a une orientation verticale. Il n'est pas possible de le rendre horizontal.
- Il n'y a pas de limite au nombre de curseurs que vous pouvez utiliser dans une campagne. Cependant, vous ne pouvez utiliser qu'un seul curseur sur chaque écran de campagne.
Voilà, c'est tout. Nous espérons que cela vous fera gagner du temps et que vous utiliserez ce slider dans vos campagnes.