Accueil Blog ⇉ Diaporama fondu-enchainé JQuery en une ligne !

jquery

html

css

illustration_article

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(0).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(0).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 27-07-2020
Article précédent


Prism, coloration syntaxique
Article suivant


Oups, MySQL : Field ‘xx’ doesn’t have a default value

Commentaires

 sylvain  2020-07-26

Bonjour,
je n'ai pas réussi à faire fonctionner ce script.
Où met-on le petit bout de JQ ?
Cordialement

 GBNet  2020-07-27

Bonjour,
Vous avez deux solutions :
Dans le fichier lui-même, de préférence vers la fin, entre deux tags script, comme ceci :

<head>...</head>
<body>
<!--la page html ici-->

<script>
//appel JQuery ici
</script>

<script>
//votre script ici
</script>

</body>

ou idéalement, dans un fichier externe que vous appelez comme ceci :

<script src = "path/to/monfichier.js"></script>

et sans oublier encore d'appeler le JQuery avant.

PS : Vous pouvez récupérer la majorité des erreurs JS dans la console de votre navigateur en faisant [ctrl] + [shift] + [i] ou [F12] puis click sur "console)

J'espère que ça vous aura aidé !

Cordialement
Guillaume

NOTE IMPORTANTE : Sur ce modeste blog, les bouts de code que je mets doivent impérativement être revus si besoin. Par exemple, la ligne
$('.slide img').slice(0).hide();

est adaptée pour l'exemple 1, mais pas du tout pour le 3. En effet, dans le 1 on sélectionne les images qui sont dans la classe "slide" tandis que dans le 3, ce sont des div, elle devra donc ressembler à :
$('.slide div').slice(0).hide();

.

Idem pour la suivante qui passera de
.next('img').

pour le 1 à
.next('div').

pour le 3.

 Sylvain  2020-07-27

Bonjour,
voici le résultat de vos explications, très détaillées : http://www.citt36.fr/articles.php?lng=fr&pg=563&tconfig=5
Merci !
Ce n'est pas la 1ère image déclarée qui s'affiche mais la 2ème (la 1ère apparaît bien mais en dernière position) : je présume que cela est dû à la pause de 6000 dans cet exemple.
Est-il possible d'afficher les images en "slider" (je doute que ce terme soit techniquement juste), de manière qu'un visiteur puisse revenir à la précédente ou passer directement à la suivante ?
Bien cordialement

 GBNet  2020-07-27

Rebonjour Sylvain,

Merci pour le retour.
Ça fait un effet bizarre, c'est normal le fadeOut à 0 ?
Pour la 1ère img, avez-vous essayé en mettant le slice() à 1 de façon à cacher toutes les img sauf elle ?
Pour le slider, oui, c'est très possible mais il faudra changer un peu l'approche.
Si vous me laissez une adresse mail (à contact@gb-net.fr) ce sera plus facile pour échanger des liens que sur ce blog.

Cordialement
Guillaume

Publier un commentaire :



capcha   



Raccourcis : php css html sql js img

Prévisualiser
GB-Net.fr 2020



fleche haut
Résultats de votre recherche pour :
reduce close