En poursuivant votre visite de ce site, vous acceptez l'utilisation de cookies pour permettre ses différents services. Voir les Mentions légales.
 
 
  • Sur ce site, vous trouverez : Camera ! Évidemment...

    ...mais aussi des carousels : WaterwheelCarousel par exemple...

  • ... des informations sur les iFrames responsives

    Une solution élégante pour rendre les iFrames (cadres, dans lesquels on intègre d'autres pages) "responsive design" : Ils s'adapteront automatiquement et de manière proportionnelle à la dimension de la page.

    Lisez le tutoriel

    Lisez également ces trois tutoriels : ici , ici  et  ici

    pour créer un bandeau "responsive design", constitué de cellules indépendantes, au contenu varié, à placer en haut, en bas, dans la boite édito, dans un article...de votre site.

  • ...un Audio Player dans un Iframe... ...un autre, simple, intégré dans Guppy... et... JPlayer ... intégré, lui aussi.

  • ...des images qui changent au survol de la souris... ...par exemple :

    ...mais bien d'autres effets à découvrir, notamment celui que vous êtes en train d'utiliser...

  • ...et bien sûr des skins pour habiller vos sites GuppY V5...la série "Transparences" avec ici FeatureCarousel

  • Camera

    Camera

    ¤ Camera est un slider développé par Manuel Masia. On peut l'utiliser très facilement dans GuppY. Dans ses différentes options possibles, on peut faire varier les transitions, les apparitions de titres, les vignettes de pagination. Camera peut même intégrer des vidéos ! Sur ce site quelques tutoriels pour mieux maitriser Camera.

    Informations Camera

    ¤ Deux carousels de Brian Osborne sont disponibles lisez les tutoriels : WaterwheelCarousel et FeatureCarousel.

    ¤ Deux "slideshows" sont disponibles avec ou sans JQuery : lisez les tutoriels : Accordion (CSS) et Circle Nav (JQuery).

  • iFrames

    iFrames responsives

    Une solution élégante pour rendre les iFrames (cadres, dans lesquels on intègre d'autres pages) "responsive design" : Ils s'adapteront automatiquement et de manière proportionnelle à la dimension de la page.

    Lisez le tutoriel

    Lisez également ces trois tutoriels : ici , ici  et  ici

    pour créer un bandeau "responsive design", constitué de cellules indépendantes, au contenu varié, à placer en haut, en bas, dans la boite édito, dans un article...de votre site.

  • Audio-Players

    Audio-Players

    ¤ Un Audio-player à mettre en place dans un iFrame. Léger et "customisable", quelques skins en téléchargement lui sont destinées.

    Lisez le tutoriel

    ¤ Un Audio-player simple avec playlist également peut être intégré directement dans GuppY.

    Lisez le tutoriel

    ¤ Un autre Audio-player (JPlayer) avec playlist également peut être intégré directement dans GuppY.

    Lisez le tutoriel

  • Effets au survol

    Effets au survol

    Des astuces amusantes, surtout en CSS, pour agrémenter les sites.

    Au survol de la souris : des images qui changent, qui pivotent et font apparaitre un nouveau contenu, les boutons déroulants offrant de nouvelles informations, une boîte-menu déroulante (celle-là même que vous utilisez)... et d'autres, à venir, sans doute.

    La possibilité aussi de personnaliser des infobulles dans une image mappée cliquable générée par Gimp (traitement d'image libre et gratuit). Lisez le tutoriel

    Des liens vers des tutoriels sont disponibles dans le menu "Astuces>Changements au survol"

  • Skins

    Skins pour GuppY V5

    Quelques skins sont disponibles en téléchargement pour habiller les sites GuppY. Elles sont toutes compatibles "Config Look" et adaptées aux dernières versions (à partir de GuppY 5.02.02) moyennant quelques champs à adapter dans "Config Look". Elles peuvent être testées sur Démo-skins en version 5.02.08 -ce sont celles qui sont proposées en téléchargement-.

    Démo-skins

    Zone de téléchargement

 
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 1100 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 43 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