Plugin JQuery – cercleTrigoSlider

Ce plugin JQuery a été développé par Tristan Ollivier. Son site est disponible à l’adresse suivante :

http://www.tristanollivier.com

Le but de ce plugin est d’afficher un slider circulaire. Pour l’utilisation, il suffit d’utiliser une liste d’images en HTML, puis d’appeler le plugin en JQuery pour générer le code du plugin. Voici un exemple d’utilisation du plugin :

<!DOCTYPE html>
<html>
<head>
    <!-- Inclusion des fichiers du plugin -->
    <link rel="stylesheet" type="text/css" media="screen, print" href="css/jquery.cercleTrigoSlider.css" />
    <script type="text/javascript" src="js/jquery.cercleTrigoSlider.js" ></script>

    <!-- Script pour générer le slider -->
    <script type="text/javascript">
        $(document).ready(function(){
            $("#cts-centre").cercleTrigoSlider();
        });
    </script>
</head>
<body>
    <div id="cts-centre">
        <img src="images/planete1.jpg" data-title="Mercure" data-description="Mercure est la planète la plus proche du Soleil et la moins massive du Système solaire" />
        <img src="images/planete2.jpg" data-title="Vénus" data-description="Vénus est la deuxième des huit planètes du Système solaire en partant du Soleil, et la sixième par masse ou par taille décroissantes" />
        <img src="images/planete3.jpg" data-title="Terre" data-description="La Terre est la troisième planète du Système solaire par ordre de distance croissante au Soleil, et la quatrième par taille et par masse croissantes" />
        <img src="images/planete4.jpg" data-title="Mars" data-description="Mars est la quatrième planète par ordre de distance croissante au Soleil et la deuxième par masse et par taille croissantes sur les huit planètes que compte le Système solaire" />
        <img src="images/planete5.jpg" data-title="Jupiter" data-description="Jupiter est une planète géante gazeuse. Il s'agit de la plus grosse planète du Système solaire, plus volumineuse et massive que toutes les autres planètes réunies" />
        <img src="images/planete6.jpg" data-title="Saturne" data-description="Saturne est la sixième planète du Système solaire par ordre de distance au Soleil et la deuxième plus grande, aussi bien en taille qu'en masse, après Jupiter" />
        <img src="images/planete7.jpg" data-title="Uranus" data-description="Uranus est une planète géante de glaces de type Neptune froid" />
        <img src="images/planete8.jpg" data-title="Neptune" data-description="Neptune est la huitième et dernière planète du Système solaire par distance croissante au Soleil" />
    </div>
</body>
</html>

Et voici le rendu :

Ma participation à ce projet fût le calcul des emplacements pour les bulles autour de l’image principale. En effet, le plugin calcule automatiquement les emplacements des bulles en fonction du nombre de ces dernières. Le but étant d’avoir un espacement équidistant entre les bulles peu importe le nombre de celles-ci pour avoir un affichage le plus géométrique possible.

Laisser un commentaire