Truc 5 : Créer un Slider Jquery auto-alimenté avec AnySlider et Ajax.

Introduction:


Mieux qu’une liste, un slider permet de soulager l’expérience visuelle de l’utilisateur.

Plutôt que de l’utiliser pour de banales photos, on peut utiliser un slider pour présenter des fiches d’étudiants ou d’objets à vendre ou à modifier, générées à partir d’appels AJAX.

Exemple 1 : Avec le plug in AnySlider.js, sans appel Ajax.


Cliquer ici pour tester en live.

D’abord on crée index.html, avec en première partie les DIV, puis la fonction qui génére AnySlider en seconde partie. Pour plus de « fun » on présente le slider dans une fenêtre Jquery Dialog.

INDEX.HTML


<html lang="fr">
    <head>
    <meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />

    <!-- -----------------------------------------------DEBUT DU CHARGEMENT DES LIBRAIRIES------------------------ -->
            <!--    APPEL LIB JQUERY -->
            <script    type="text/javascript"     src="librairies/jquery.js">                    </script>
            
            <!--    APPEL LIB JQUERY UI ( look sympa du programme) -->
            <script type="text/javascript"     src="librairies/jquery-ui.min.js">            </script>
            <link     href="librairies/jquery-ui.css" rel="stylesheet" type="text/css">
            <script type="text/javascript"     src="librairies/jquery.dialogextend.js"    >    </script>
            
            <!--     TOUCH Pour les tablettes Android-->
            <script src="librairies/jquery.ui.touch-punch.js" language="javascript">    </script>
            
            <!--     ANYSLIDERS pour les DIVS-->
            <script src="librairies/jquery.anyslider.js">                                </script>
             <link rel="stylesheet" href="librairies/jquery-anyslider.css">
            
            <!--    CSS DU PROGRAMME -->
            <link     rel="stylesheet"                 type="text/css" href="style.css" />
    <!-- ----------------------------------------------FIN DU CHARGEMENT DES LIBRAIRIES------------------------ -->
    </head>

<body>

<div id="fen">

  <div class="slider-wrapper " >

            <div class="slider slider2 basique">

                <div>

                    Texte 1

                </div>

                <div>

                   Texte 2

                </div>

            </div>

        </div>
</div>



<script>
    $(function () {

        $('.slider2').anyslider({
            easing: 'easeOutBounce',
            interval: 0,
            keyboard: true,
            showBullets:false,
            speed: 1500
        });
        
        $('#fen').dialog({show: 'fade',hide: 'fold',width:800,height:600,autoOpen: true,draggable: true,appendTo: 'body'});
        
        
        
        
    });
</script>

</body>
</html>

mon fichier CSS général du programme est celui-ci :

STYLE.CSS


.slider {
    overflow: auto; 
    position: relative; 
    -ms-touch-action: pan-y;
    touch-action: pan-y;
}

.basique{
    
    
    border-top: medium solid gainsboro;
    border-bottom: medium solid gainsboro;
    border-left: medium solid gainsboro;
    border-right: medium solid gainsboro;
    background-color:tan;
    border-style:outset;
}

Et je modifie la ligne 16 du fichier css du plug in AnySliders, pour qu’il se place bien dans la fenêtre Jquery dialog (je mets width à 95% à la place de 100%):


.slider {
    border: 1px dotted #333;
    height: 250px;
    margin: 40px auto; 
    padding: 5px;
    text-align: left;
    width: 95%;
}

 

Ce qui donne :

slide

Remarque :

Ca fonctionne bien, cependant, on aimerait éventuellement avoir les numéros ou les noms des divs dans un menu inférieur. En effet, imaginons qu’on ait 150 étudiants dans des divs auto-générées par AJAX, ils serait bon de pouvoir naviguer dans un menu inférieur. C’est pour cela qu’on va tester un autre plug-in : Anythingsliders, et utiliser le code de quelqu’un qui l’a déjà fait avant nous.

Mais avant cela, nous allons améliorer l’exercice suivant avec un appel AJAX qui va nous sortir des fiches étudiants.

 

Exemple 2 : Avec le plug in AnySlider.js, avec un appel Ajax.


A tester ici .

On reprends tout le code de l’exo précedent, sauf qu’on ajoute un appel Ajax qui récupère un fichier JSON contenant la photo, les prénoms et les noms des étudiants d’une école… tout cela dans index.html.

Ensuite, dans la fonction de rappel $.ajax() de Jquery, on crée à la volée une nouvelle div par étudiant à l’aide d’une boucle jquery $.each(). On les génère dans la div qu’on a identifiée « general »(id=general).

Finalement, on applique le plugin anyslider comme dans l’exo 1 , sur la classe CSS .slider2, et cela fonctionne impeccable. On a donc accès à touts nos fiches étudiants, à l’aide du slider, peut importe qu’il y ait 5 étudiants, ou 1000 étudiants.

Le code :

<html lang="fr">
	<head>
	<meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />

	<!-- -----------------------------------------------DEBUT DU CHARGEMENT DES LIBRAIRIES------------------------ -->
			<!--	APPEL LIB JQUERY -->
			<script	type="text/javascript" 	src="librairies/jquery.js">					</script>
			
			<!--	APPEL LIB JQUERY UI ( look sympa du programme) -->
			<script type="text/javascript" 	src="librairies/jquery-ui.min.js">			</script>
			<link 	href="librairies/jquery-ui.css" rel="stylesheet" type="text/css">
			<script type="text/javascript" 	src="librairies/jquery.dialogextend.js"	>	</script>
			
			<!-- 	TOUCH Pour les tablettes Android-->
			<script src="librairies/jquery.ui.touch-punch.js" language="javascript">	</script>
			
			<!-- 	ANYSLIDERS pour les DIVS-->
			<script src="librairies/jquery.anyslider.js">								</script>
			 <link rel="stylesheet" href="librairies/jquery-anyslider.css">
			
			<!--	CSS DU PROGRAMME -->
			<link 	rel="stylesheet" 				type="text/css" href="style.css" />
	<!-- ----------------------------------------------FIN DU CHARGEMENT DES LIBRAIRIES------------------------ -->
	</head>

<body>

<div id="fen">

	<div class="slider-wrapper " >

		<div class="slider slider2 basique" id="general"> 

              <!-- Les div ci dessous ne servent plus à rien, Jquery va en générer dynamiquement à cet endroit en fonction des données ajax reçues
                <div > 

                    Texte 1

                </div>

                <div >

                   Texte 2

                </div> 
 -->
		</div>
</div>

	<script>
		$(function () {
			// Création de la fenêtre Jquery Dialog
			$('#fen').dialog({show: 'fade',hide: 'fold',width:300,height:400,autoOpen: true,draggable: true,appendTo: 'body'});
			
			// Appel Ajax et création des Fiches
			$.ajax({
					type: "POST",
					url: "listingEtudiant.php",
					dataType: "json", 
					success: function (data) {
						$.each(data, function(i, item) { // Pour chaque élément du fichier JSON reçu, afficher le nom et le prénom de l'étudiant dans une div différente.
								$("#general").append('<div  class="" ><img src="images/'+data[i].photo+'" class="photographie">'+data[i].prenom+'..'+data[i].nom+'</img>');
								$("#general").append('</div>');
							});
							
							// Création du Slider qui sépare chaque div en sliders à l'aide de la classe CSS slider2...
							$('.slider2').anyslider({
								easing: 'easeOutBounce',
								interval: 0,
								keyboard: true,
								showBullets:false,
								speed: 1500
							});
					}
			});
		});

	</script>

</body>
</html>

Remarque : Bien sur, pour l’instant, il n’y a rien dans les divs, hormis la photo, le nom et le prénom, mais on peut ajouter pleins d’autres choses, des images, des graphes etc …

Ce qui donne :slider2

Voici le fichier JSON qui est déjà assez gros :


[{"id":"10","nom":"CHIPIE","prenom":"Candice","age":"35","datenaissance":"02-03-1976","adresse":"","dateentree":"03-03-2015","datesortie":"10-03-2015","paiement":"1000","pays":"","photo":"f1.jpg"},{"id":"166","nom":"CHOUBALA","prenom":"Thierry","age":"28","datenaissance":"12-10-1976","adresse":"12 Avenur des lilas","dateentree":"11-09-2014","datesortie":"15-10-2015","paiement":"90","pays":"BELGIQUE","photo":"bouton-ENF.png"},{"id":"7","nom":"DOLORIS","prenom":"Jobert","age":"27","datenaissance":"14-10-1978","adresse":"12 rue des oies, Biarritz","dateentree":"15-03-2014","datesortie":"22-10-2014","paiement":"150","pays":"FRANCE","photo":"h5.jpg"},{"id":"180","nom":"DUPONT","prenom":"Roger","age":"57","datenaissance":"01-01-1970","adresse":"12 rue des tomates","dateentree":"01-01-1970","datesortie":"01-01-1970","paiement":"120","pays":"","photo":"h2.jpg"},{"id":"179","nom":"DURAND","prenom":"Thierry","age":"57","datenaissance":"25-03-1980","adresse":"12 rue des tomates","dateentree":"03-09-2014","datesortie":"10-03-2015","paiement":"120","pays":"BELGIQUE","photo":"h1.jpg"},{"id":"6","nom":"FRANCIS","prenom":"Dillinger","age":"47","datenaissance":"01-01-1970","adresse":"24 rue de lis cannes","dateentree":"01-01-1970","datesortie":"18-03-2015","paiement":"120","pays":"","photo":"h4.jpg"},{"id":"161","nom":"GOLUS","prenom":"Philipbert","age":"45","datenaissance":"11-02-1955","adresse":"","dateentree":"13-10-2014","datesortie":"19-02-2015","paiement":"450","pays":"UK","photo":"kansastrain.jpg"},{"id":"2","nom":"GONZAGUES","prenom":"Xavier","age":"32","datenaissance":"15-10-1970","adresse":"141 bd fleurs","dateentree":"08-01-2014","datesortie":"20-08-2015","paiement":"110","pays":"ANGLETERRE","photo":"h2.jpg"},{"id":"181","nom":"GONZO","prenom":"Jolus","age":"0","datenaissance":"01-01-1970","adresse":"","dateentree":"01-01-1970","datesortie":"01-01-1970","paiement":"","pays":"NON","photo":"88ce5a1f961832585f329292d22451fc.jpg"},{"id":"162","nom":"HULEUX","prenom":"Jojo","age":"53","datenaissance":"10-02-1978","adresse":"","dateentree":"14-10-2014","datesortie":"01-01-1970","paiement":"100","pays":"NON","photo":"nicb.jpg"},{"id":"57","nom":"JOBERT","prenom":"Eric","age":"24","datenaissance":"10-01-1970","adresse":"12 rue flipo","dateentree":"10-06-2014","datesortie":"01-01-1970","paiement":"200","pays":"","photo":"eric.jpg"},{"id":"1","nom":"MICHEL","prenom":"Henri","age":"28","datenaissance":"01-01-1970","adresse":"12 rue lilas","dateentree":"01-01-1970","datesortie":"01-01-1970","paiement":"120","pays":"","photo":"h1.jpg"},{"id":"165","nom":"PHILIBERT","prenom":"Jolo","age":"47","datenaissance":"10-02-1969","adresse":"","dateentree":"19-11-2014","datesortie":"14-02-2015","paiement":"110","pays":"USA","photo":"88ce5a1f961832585f329292d22451fc.jpg"},{"id":"163","nom":"PHILIPBERT","prenom":"Jalanne","age":"50","datenaissance":"10-02-1978","adresse":"","dateentree":"11-11-2014","datesortie":"17-02-2015","paiement":"125","pays":"BELGIQUE","photo":"f6.jpg"},{"id":"158","nom":"PHILIPPE","prenom":"Bertand","age":"46","datenaissance":"10-02-1978","adresse":"12 rue des koloks","dateentree":"12-08-2014","datesortie":"22-01-2015","paiement":"465","pays":"USA","photo":"preuve-logement-facture-eau.jpg"},{"id":"182","nom":"TEST1","prenom":"Test1","age":"0","datenaissance":"03-03-2015","adresse":"","dateentree":"04-03-2015","datesortie":"11-03-2015","paiement":"","pays":"NON","photo":"eric.jpg"},{"id":"183","nom":"TEST2","prenom":"Test2","age":"0","datenaissance":"01-01-1970","adresse":"","dateentree":"01-01-1970","datesortie":"01-01-1970","paiement":"","pays":"NON","photo":"each1.jpg"},{"id":"184","nom":"TEST3","prenom":"Test3","age":"0","datenaissance":"03-03-2015","adresse":"","dateentree":"01-03-2015","datesortie":"01-03-2015","paiement":"","pays":"NON","photo":"each1.jpg"},{"id":"185","nom":"TEST4","prenom":"Trst4","age":"0","datenaissance":"01-01-1970","adresse":"","dateentree":"01-01-1970","datesortie":"01-01-1970","paiement":"","pays":"","photo":"eric.jpg"},{"id":"5","nom":"THOMAS","prenom":"Jalabert","age":"15","datenaissance":"14-10-1978","adresse":"20 allee truc 42010paris","dateentree":"15-02-2014","datesortie":"22-10-2014","paiement":"100","pays":"FRANCE","photo":"h3.jpg"}]


Publicités