Diaporama fondu-enchainé JQuery en une ligne !

Publié le 31-08-2017
etoiles_notation etoiles_notation etoiles_notation etoiles_notation etoiles_notation
Votes : 7 - Note : 4.6




Pas de place pour un plugin ? Vous cherchez un bout de script simple et efficace ? Cette page est pour vous.



jquery

html

css


Diaporama fondu-enchainé JQuery en une ligne !

J'avais trouvé ce minuscule bout de code par hasard il y a quelques années en cherchant tout à fait autre chose et sur le coup, j'ai été tellement épaté par sa simplicité et son évidence que plusieurs années après, j'ai plaisir à le partager.

Pour ceux qui veulent un simple diapo, fondu-enchaîné, sans s'encombrer d'un plugin ou d'une usine à gaz, voici l'idée:

help “Il faut impérativement empiler les img ”


Plaçons nos images dans une div, peu importe combien, elle seront toutes "impactées" par le script ; la seule chose qui compte vraiment, c'est de les empiler. Pour ce faire, on leur donne une position absolute en CSS. Voir en bas, l'exemple 1 sans la position absolute, et l'exemple 2 avec.

HTML (violent)



<div class="slide">
<img src="images/1.jpg" />
<img src="images/2.jpg" />
<img src="images/3.jpg" />
</div>


Et le petit bout de JQ :


$('.slide img').slice(1).hide();
setInterval(function(){
$('.slide > :first-child').fadeOut(1500).next('img').fadeIn(1500).end().appendTo('.slide');
},2000);


C'est tout !




En deux mots :

$('.slide img').slice(1).hide();

sélectionne et cache tout ce qui est à un index supérieur à 0, le setInterval joue le diapo à la valeur donnée, ici 2 secondes, et ensuite le chainage :

 $('.slide > :first-child').fadeOut(1500).next('img').fadeIn(1500).end().appendTo('.slide');


sélection du premier enfant => disparition [fadeout] => on passe au suivant [next] qu'on fait apparaître [fadein] => retour à l'état antérieur du chainage avec end() et ajout du :first-child à notre div.



Quelques petites remarques :
Si on veut éviter que les images concernées n'apparaissent une fraction de seconde au départ, il faudra intervenir dans le DOM, mais ce sera moins portable.
On peut raccourcir un peu, par exemple, img:eq(0) à la place de :first-child, et se passer de 'img' dans le next.

Il est possible ensuite de jouer avec autre chose que des images directement : dans l'exemple 3 , ce sont des div avec des images en arrière plan, chacun ayant un texte différent lui-même avec un lien différent.


<div class="slide">
<div style="background-image:url('images/1.jpg');background-size:contain;position: absolute;width:300px; height:200px;">
<a href="exemple1.com" style="text-decoration: none;"><span>Des div indépendantes...</span></a></div>
<div style="background-image:url('images/2.jpg'); background-size:cover;position: absolute;width:300px; height:200px;">
<a href="exemple2.com" style="text-decoration: none;"><span>Avec différents CSS...</span></a></div>
<div style="background-image:url('images/3.jpg'); position: absolute;width:300px; height:200px;">
<a href="exemple3.com" style="text-decoration: none;"><span>Et différents liens ! </span></a></div>
</div>



Et toujours avec cette petite ligne de JQuery !





Original ici

Addendum : la fonction gt() étant donnée deprecated chez JQuery, on la remplace par slice() ; notez que lt(), obsolète également, est remplacée elle aussi par slice();
plus d'infos



Modifié le 15-10-2019

Commentaires

Pas encore de commentaire

Publier un commentaire :



capcha   






GB-Net.fr 2019