En poursuivant votre visite de ce site, vous acceptez l'utilisation de cookies pour permettre ses différents services. Voir les Mentions légales.
 
Vous êtes ici :   Accueil » Diaporama avec Circle Nav JQuery et CSS
 
Prévisualiser...  Imprimer...  Imprimer la page...
Prévisualiser...  Imprimer...  Imprimer la section...
Recherche
 
Fermer

Calendrier

Astuces

 

Diaporama avec Circle Nav JQuery et CSS

rss Cet article est disponible en format standard RSS pour publication sur votre site web :
http://www.71site.fr/data/fr-articles.xml

Un diaporama dont les flèches de navigation utilisent des vignettes.
(JQuery et CCS)

La proposition ci-dessous est issue de ce site : (auteur : Mary Lou)

info licence : https://tympanus.net/codrops/licensing/

Tout est téléchargeable sur le site. Je me suis juste contenté de jouer avec et d'adapter la proposition pour un article, une boite libre de GuppY ou un autre CMS, bien sûr. Je n'ai pas réussi (encore ?) à ajouter la possibilité de placer des liens dans ce diaporama.

Tel qu'il est écrit, il n'est pas "responsive design". Il est donc plutôt à réserver aux pages en affichage WEB.

Les images, (640px*426px) sont issue de ce site : https://pixabay.com/ . Les vignettes, (120px*120px) sont un élément des ces images. Un dossier CircleNavImg contenant les images, les vignettes et les fichiers jquery (placé pour ce tutoriel, sur ce site dans le dossier img à la racine de Guppy) est téléchargeable ici. Vous pourrez adapter les chemins à votre propre configuration.

imageA imageB imageC imageD imageE imageF imageG

Survoler les flèches pour voir l'effet

Les codes utilisés sont ci-dessous.
Le contenu du premier onglet : Code .js et Style est obligatoire, au début du code source de l'article ou de la boite libre, ou pour le style dans styleplus.css.
Adapter à l'aide des quelques commentaires.
ATTENTION, si le style n'est pas dans styleplus.css, il faut placer les balises <style type="text/css"> au début du code source et </style> à la fin du style.
Puis dans le code source du corps de l'article ou de la boite libre, là où vous souhaitez placer les images, insérez le code correspondant à chaque effet en adaptant les contenus, bien sûr. Les parties surlignées en blanc seront à adapter à vos souhaits et votre configuration, notamment au niveau des chemins.

  • Code .js et Style
  • Codes du corps de l'article

Code .js et Style

<script type="text/javascript" src="img/CircleNavImg/js/jquery.tmpl.min.js"></script>
<script type="text/javascript" src="img/CircleNavImg/js/jquery.slideshow.js"></script>
<script type="text/javascript">
    $(function()
    {
        $('#cn-slideshow').slideshow();
    });
</script>
<script id="barTmpl" type="text/x-jquery-tmpl">
    <div class="cn-bar">
        <div class="cn-nav">
            <a href="#" class="cn-nav-prev">
                <span>Précédente</span>
                <div style="background-image:url(${prevSource});"></div>
            </a>
            <a href="#" class="cn-nav-next">
                <span>Suivante</span>
                <div style="background-image:url(${nextSource});"></div>
            </a>
        </div><!-- cn-nav -->
        <div class="cn-nav-content">
            <div class="cn-nav-content-prev">
                <span>Image précédente</span>
                <h3>${prevTitle}</h3>
            </div><!-- cn-nav-content-prev -->
            <div class="cn-nav-content-current">
                <span>Vue courante</span>
                <h2>${currentTitle}</h2>
            </div><!-- cn-nav-content-current -->
            <div class="cn-nav-content-next">
                <span>Image suivante</span>
                <h3>${nextTitle}</h3>
            </div><!-- cn-nav-content-next -->
        </div><!-- cn-nav-content -->
    </div><!-- cn-bar -->
</script>

<style type="text/css">
.cn-slideshow {
    width: 640px; /*largeur*/
    height: 426px; /*hauteur*/
    position: relative;
    margin: 0 auto; /*marges extérieures*/
    background: #fff; /*couleur fond*/
    border-top: 5px solid #385c5b; /*bordure haute*/
    box-shadow: 1px 1px 3px rgba(0,0,0,0.2); /*ombre portée*/
}
.cn-loading { /*mise en place de l'image loader : peut être laissée en l'état*/
    position: absolute;
    z-index:999;
    text-indent: -9000px;
    opacity:0.6;
    top:50%;
    left:50%;
    margin:-25px 0 0 -25px;
    width:50px;
    height:50px;
    background:#000 url(img/CircleNavImg/ajax-loader.gif) no-repeat center center;
    border-radius: 25px;
}
.cn-images { /*mise en place des images : ne pas modifier*/
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}
.cn-images img { /*mise en place des images : ne pas modifier*/
    position: absolute;
    top: 0px;
    left: 0px;
    display: none;
}
.cn-bar { /*attributs de la barre de navigation*/
    background: transparent url(img/CircleNavImg/bar.png) repeat top left; /*fond*/
    height: 70px; /*hauteur*/
    position: absolute;
    bottom: 0px; /*positions*/
    right: 0px;
    left: 0px;
    color: #f8f8f8; /*couleur de texte*/
    z-index: 999; /*index superposition : important*/
}
.cn-nav-content { /*contenu central de la barre*/
    position: absolute;
    top: 0px; /*position*/
    height: 100%; /*hauteur*/
    right: 70px; /*position à droite*/
    left: 70px; /*position à gauche*/
    overflow: hidden;
    text-shadow:1px 1px 1px rgba(0,0,0,0.3); /*ombre portée du texte*/
}
.cn-nav-content div { /*contenus latéraux*/
    float: left;
    width: 130px; /*largeur*/
    color:#e1e1e1; /*couleur*/
}
.cn-nav-content span { /*contenus span latéraux*/
    color:#282828; /*couleur*/
    text-shadow:1px 1px 1px rgba(255,255,255,0.5); /*ombre portée du texte*/
}
.cn-nav-content div.cn-nav-content-current { /*contenu zone centrale*/
    text-align: center;
    width: 280px; /*largeur*/
    position:absolute;
    top:0px; /*positions*/
    left:50%;
    margin-left:-140px; /*marge extérieure gauche = 1/2 width*/
}
.cn-nav-content h2,
.cn-nav-content h3 { /*attributs titres*/
    padding: 0; /*marges intérieures*/
    margin: 0; /*marges extérieures*/
    line-height:24px; /*hauteur ligne*/
    font-family:Georgia, serif; /*famille police*/
    font-style:italic; /*style police*/
}
.cn-nav-content h2 {
    font-size: 18px; /*taille police*/
    color: #fff; /*couleur*/
}
.cn-nav-content h3 {
    font-size: 12px; /*taille police*/
    color: #D0AB47; /*couleur*/
}
.cn-nav-content-current span { /*contenus span courant zone centrale*/
    color:#D0AB47; /*couleur*/
    text-shadow:1px 1px 1px rgba(0,0,0,0.3); /*ombre portée du texte*/
}
.cn-nav-content div.cn-nav-content-prev { /*zone contenu latéral gauche*/
    margin-left: 20px; /*marge extérieure gauche*/
}
.cn-nav-content div.cn-nav-content-next { /*zone contenu latéral droit*/
    text-align: right; /*alignement*/
    margin-right: 20px; /*marge extérieure droite*/
    float:right;
}
.cn-nav-content div span { /*contenus div span de la barre*/
    display: block;
    padding-top: 10px; /*marge intérieure haute*/
    font-family:Verdana, sans serif; /*famille police*/
    text-transform: uppercase; /*tout en majuscule*/
    font-weight: bold; /*gras de la police*/
    letter-spacing: 2px; /*écartement des lettres*/
}
.cn-nav > a { /*liens de navigation*/
    position: absolute;
    top: 0px; /*position*/
    height: 70px; /*hauteur*/
    width: 70px; /*largeur*/
}
a.cn-nav-prev { /*lien de navigation gauche*/
    left: 0px; /*position gauche*/
}
a.cn-nav-next { /*lien de navigation droit*/
    right: 0px; /*position droite*/
}
.cn-nav a span { /*liens de navigation span : placement des flèches*/
    width: 46px; /*largeur*/
    height: 46px; /*hauteur*/
    display: block;
    text-indent: -9000px;
    border-radius: 23px; /*arrondis : 1/2 width et height*/
    cursor: pointer;
    opacity: 0.9; /*opacité*/
    position: absolute;
    top: 50%; /*positions*/
    left: 50%;
    margin: -23px 0 0 -23px; /*marges extérieures H D B G*/
    transition: all 0.4s ease; /*transition : tout : temps et nature*/
}
.cn-nav a.cn-nav-prev span { /*liens de navigation span : couleur et flèche gauche*/
    background: #385c5b url(img/CircleNavImg/prev.png) no-repeat center center;
}
.cn-nav a.cn-nav-next span { /*liens de navigation span : couleur et flèche droite*/
    background: #385c5b url(img/CircleNavImg/next.png) no-repeat center center;
}
.cn-nav a div { /*liens de navigation div : Ne pas modifier sauf éventuellement dernière ligne*/
    width: 0px;
    height: 0px;
    position: absolute;
    top: 50%;
    left: 50%;
    overflow: hidden;
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
    margin: 0px;
    border-radius: 0px;
    transition: all 0.2s ease-out; /*transition : tout, temps et nature*/
}
.cn-nav a:hover span { /*liens de navigation span au survol : couronne autour de la vignette*/
    width: 100px; /*largeur*/
    height: 100px; /*hauteur*/
    border-radius: 50px; /*arrondis : 1/2 width et height*/
    opacity: 0.8; /*opacité*/
    margin: -50px 0 0 -50px; /*marges extérieures H D B G*/
    background-color:#D0AB47; /*couleur*/
}
.cn-nav a:hover div { /*liens de navigation div au survol : vignette*/
    width: 90px; /*largeur*/
    height: 90px; /*hauteur*/
    background-size: 120% 120%; /*zoom éventuel de la vignette : à ajuster ou supprimer*/
    margin: -45px 0 0 -45px; /*marges extérieures H D B G*/
    border-radius: 45px; /*arrondis : 1/2 width et height*/
}
</style>

Codes du corps de l'article

<div class="wrapper">
    <div class="cn-slideshow" id="cn-slideshow">
        <div class="cn-images">
            <img alt="imageA" data-thumb="img/CircleNavImg/vgnts/A.jpg" src="img/CircleNavImg/images/A.jpg" style="display:block;" title="Neige et glace A" />
            <img alt="imageB" data-thumb="img/CircleNavImg/vgnts/B.jpg" src="img/CircleNavImg/images/B.jpg" title="Neige et glace B" />
            <img alt="imageC" data-thumb="img/CircleNavImg/vgnts/C.jpg" src="img/CircleNavImg/images/C.jpg" title="Neige et glace C" />
            <img alt="imageD" data-thumb="img/CircleNavImg/vgnts/D.jpg" src="img/CircleNavImg/images/D.jpg" title="Neige et glace D" />
            <img alt="imageE" data-thumb="img/CircleNavImg/vgnts/E.jpg" src="img/CircleNavImg/images/E.jpg" title="Neige et glace E" />
            <img alt="imageF" data-thumb="img/CircleNavImg/vgnts/F.jpg" src="img/CircleNavImg/images/F.jpg" title="Neige et glace F" />
            <img alt="imageG" data-thumb="img/CircleNavImg/vgnts/G.jpg" src="img/CircleNavImg/images/G.jpg" title="Neige et glace G" />
        </div><!-- cn-images -->
    </div><!-- cn-slideshow -->
</div><!-- cn-wrapper -->

ATTENTION : Sur les écrans tactiles, smartphones, tablettes (si vous utilisez ce diaporama sur ces supports)... l'effet de survol, évidemment ne fonctionne pas et il faut "cliquer" pour déclencher l'effet.

Amusez-vous bien...

Me contacter sur le forum de ce site pour toute question ou aide pour utiliser cette procédure.


Date de création : 06/01/2019
Catégorie : Astuces - Carousels
Page lue 2683 fois


Réactions à cet article


Personne n'a encore laissé de commentaire.
Soyez donc le premier !

Vous êtes ici :   Accueil » Diaporama avec Circle Nav JQuery et CSS

Préférences


Se reconnecter :
Votre nom (ou pseudo) :
Votre mot de passe
<O>


  Nombre de membres 45 membres
Connectés :
( personne )
Snif !!!

Lettre d'information

Pour avoir des nouvelles de ce site, inscrivez-vous à notre Newsletter.

Avant de soumettre ce formulaire, veuillez lire et accepter les Mentions légales.

J'accepte :
Recopier le code :
16 Abonnés