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

Diaporama fondu-enchainé JQuery en une ligne !

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

Publié le 31-08-2017

Votes : 9 - Note : 4.7

jquery

html

css

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:

“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

64hartza 2020-10-03

Salut et merci pour ce truc très efficace.

J'ai comme tout le monde fait face à l'image n'apparaissant qu'à partir de la 2ème et après un gros délai, problème résolu en css...

J'ai également créé une boucle while pour automatiser le biniou et l'appliquer selon mes besoins, à des pages (et images) différentes.

Je vais tâcher ici d'expliquer toute la démarche :
dans une feuille de style css que je charge depuis ma page ("bandeau.php en l'occurrence) :



@keyframes image1disparait {

0% { opacity:1; }

100% { opacity:0;}

}



.image1disparait {opacity:1;animation: image1disparait 0.02s ease-in-out 4s forwards;}

la page "bandeau.php" en elle-même :

<?php

$largeurbandeau = "99%"; // max 99%

$hauteurbandeau = "180px"; // <<>>

$textebandeau = "<br>Accompagnement, Soins, Enseignement"; // <<>>



// ....... réglage nb d'images bandeau / page ......................



if ( $contenu == "accueil" ) { $nbdimages = 6; }

if ( $contenu == "epiki" ) { $nbdimages = 5; }

if ( $contenu == "bio" ) { $nbdimages = 6; }

if ( $contenu == "geo" ) { $nbdimages = 6; }

if ( $contenu == "ateliers" ) { $nbdimages = 6; }

if ( $contenu == "actu" ) { $nbdimages = 6; }

if ( $contenu == "tarifs" ) { $nbdimages = 4; }

if ( $contenu == "contact" ) { $nbdimages = 6; }



// .................................................................



?>

<html><head>

 <style type="text/css">

<!--

@font-face {font-family: 'himsomnia'; src: url('himsomnia.otf');}

#first {width:100%; height:180px; float:left;margin-left:0px;}

.over {width:100%; height:180px; float:left;margin-left:0px;overflow:hidden; }

#first div {position: relative;width:100%; height:180px;overflow:hidden;}

.slide img {width:100%; height:180px;}

.sl {position: relative;width:100%; height:180px;overflow:hidden;float:left;margin-left:0px;}

.sl img {position: absolute;width:100%; height:180px;}

.sl span {font-family: himsomnia;font-size:25px;color:#FFF; text-shadow: 1px 1px #000;padding:2px;}

span {font-family: himsomnia;font-size:25px;color:#000; padding: 0 2px;}

-->

</style>

</head>

avec fichier police himsomnia.otf posé sur la racine du site.

<?php 

$image1 = "bandeaux/";

$image1 .= $contenu;

$image1 .= "/1.jpg";



?>



	<div align="center" class="image1disparait" style="background-image:url('<?php echo $image1; ?>');background-size:100%;position: absolute;

			width:<?php echo $largeurbandeau; ?>; 

			height:<?php echo $hauteurbandeau; ?>;">

			<span><?php echo $textebandeau; ?></span>

	</div>

			

	<div class="slide sl">

	

		<?php 

		$compteur = 1;

		

		while ( $compteur <= $nbdimages ) {

		

		$limage = "bandeaux/";

		$limage .= $contenu;

		$limage .= "/";

		$limage .= $compteur;

		$limage .= ".jpg";

			

			

		?>

			<div align="center" style="background-image:url('<?php echo $limage; ?>');background-size:100%;position: absolute;

			width:<?php echo $largeurbandeau; ?>; 

			height:<?php echo $hauteurbandeau; ?>;">

			<span><?php echo $textebandeau; ?></span>

			</div>

		<?php	



		 $compteur++;

		

		

		} ?>

		

    </div>

	

<script src="jquery.min.js"></script>





<script>

$('.slide div').slice(0).hide();

    setInterval(function(){

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

      },3000);

</script>

			

</body>

</html>

$contenu est appelé en $_GET et me permet d'appliquer l'effet bandeau à la page que je veux ( include de "bandeau.php" ).

Il m'a donc suffi de placer mes images dans ./bandeaux/nomdelapage/ ...

J'ai également bien sûr placé jquery.min.js sur la racine.

Tout fonctionne, merci encore, et si mon petit retour peut servir en quelqu'un tant mieux.

exemple du résultat ici : https://audreysimra/test021/

64hartza 2020-10-03

Pardon, mauvais lien, le bon ici :

https://audreysimra.com/test021/index.php?c=accueil

64hartza 2020-10-03

J'ai oublié de poser ici le fichier index.php qui contient le tout...

<?php

if(!empty($_GET))

  { }

else {

header('Location: index.php?c=accueil');

exit();

}

?>



<?php

// du blabla prog autre ... puis





if(!empty($_GET))

  {

	$contenu = $_GET["c"];

	$contenupage = $contenu;

	$contenupage .= ".php";

  }



?>

html :

<html>

<head>

<title>Audrey Simra</title>



<link rel="stylesheet" href="stylepc.css" type="text/css" media="screen" />



</head>

<body>

- blabla prog = le haut de ma page avant bandeau

puis



  <?php include('bandeau.php'); ?>

	

	<br>

	

   <?php include("$contenupage"); ?>

			

	<br>

	

   <?php include('pdp.php'); ?>

	

			

</body>

</html>

Recap : un fichier stylepc.css contenant (entre autres) le CSS "image1disparait" + un fichier himsomnia.otf sur la racine, + le fichier jquery.min.js sur la racine aussi + les fichiers images dans bandeaux/nomdelapage + bandeau.php (voir mon post de tout à l'heure pour tout ça).

GBNet 2020-10-05

@ 64hartza Merci pour le retour et le partage d'expérience, ainsi que son évolution ;-)

Publier un commentaire :

Nom/Pseudo :

Anti-spam : capcha

Raccourcis : php css html sql js img

Votre message :

Prévisualiser

GB-Net.fr 2024