jQuery – Extensions (bibliothèques construites sur le socle jQuery)

LEÇON

 

la bibliothèque jQuery est tellement utile, efficace et populaire que beaucoup de développeurs basent leur propres bibliothèques sur jQuery.

Ainsi, pour utiliser certaines bibliothèques JavaScript, il faut d'abord avoir jQuery, puis par dessus ajouter la bibliothèque en question. Sans jQuery derrière, la bibliothèque ne marchera pas.

De telles bibliothèques il y en a des milliers disponibles, parfois gratuite, parfois payante.

On va regarder une seule qui est une bibliothèque pour les "sliders" (diaporama avec des images qui "glissent") - fonctionnalité quasiment omniprésente sur les sites vitrine aujourd'hui.

 

Nivo slider

 

Téléchargement :

 

Exemple Nivo Slider

 

nivo_slider.html

<!DOCTYPE html>
<html>
    <head>

        <meta charset="UTF-8">
        <title>JavaScript</title>

        <link rel="stylesheet" href="nivo-slider.css" type="text/css" />
        <script type="text/javascript" language="JavaScript" src="jquery-1.12.4.js"></script>
        <script type="text/javascript" language="JavaScript" src="jquery.nivo.slider.js"></script>

        <script type="text/javascript" language="JavaScript">
          $(window).load(function() {
            $('#slider').nivoSlider({ prevText: '&nbsp;&lt;', nextText: '&gt;&nbsp;', });
          });
        </script>

        <style>
        body { width:960px; margin:0 auto; background-color:#eeeeee; color:white; font-size:64px; font-weight:bold;}
        .section { background-color:white; text-align:center; margin:80px 0px; padding:80px 0px; }
        </style>

    </head>

    <body>

        <div class="section">

            <div id="slider" class="nivoSlider">
                <img src="http://www.web-design-codex.fr/wp-content/uploads/2014/11/portugal.jpg"/>
                <img src="http://www.web-design-codex.fr/wp-content/uploads/2015/03/portugal2.jpg"/>
                <img src="http://www.web-design-codex.fr/wp-content/uploads/2015/03/portugal3.jpg"/>
            </div>

        </div>

    </body>

</html>

 

Presque le même exemple, mais avec choix d'effet de transition possible, suppression des liens de navigation sous le slider (sans tricher via color:white !) et configuration de la taille du slider via la taille du div parent :

<!DOCTYPE html>
<html>
    <head>
 
        <meta charset="UTF-8">
        <title>JavaScript</title>
 
        <link rel="stylesheet" href="nivo-slider.css" type="text/css" />
        <script type="text/javascript" language="JavaScript" src="jquery-1.12.4.js"></script>
        <script type="text/javascript" language="JavaScript" src="jquery.nivo.slider.js"></script>
 
        <script type="text/javascript" language="JavaScript">
          $(window).load(function() {
            $('#slider').nivoSlider({ prevText: '&nbsp;&lt;',
			                          nextText: '&gt;&nbsp;',
			                          effect: 'slideInRight,slideInLeft',
									  controlNav: false,
									  });
          });
        </script>
 
        <style>
        body { width:960px; margin:0 auto; background-color:#eeeeee; font-size:20px; font-weight:bold;}
        .section { background-color:white; text-align:center; margin:80px 0px; padding:80px 0px; }
		.slider-wrapper {width: 400px; margin:0 auto; font-size:64px; color:white; }
        </style>
 
    </head>
 
    <body>
 
        <div class="section">
 
          <p>Mon slider configuré</p>
		  
          <div class="slider-wrapper"> 
			
            <div id="slider" class="nivoSlider">
                <img src="portugal.jpg"/>
                <img src="portugal2.jpg"/>
                <img src="portugal3.jpg"/>
            </div>
			
          </div>
		  
        </div>
 
    </body>
 
</html>

Documentation :
http://docs.themeisle.com/article/487-nivo-slider-settings