• 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

  • ...un Audio Player dans un Iframe... ...et un autre intégré dans Guppy

  • ...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 dédiés : WaterwheelCarousel et FeatureCarousel.

  • 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

  • Audio-Players

    Audio-Players

    ¤ Un Audio-player à mettre en place dans un iFrame. Il affiche les pochettes d'album des morceaux qui sont joués. Léger et "customisable", quelques skins en téléchargement lui sont destinées. Il peut être amélioré ! Adeptes du Javascript... à vos claviers ! wink

    Lisez le tutoriel

    ¤ Un deuxième Audio-player simple 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 à la dernière version (GuppY 5.01.07 et +). Elles peuvent être testées sur Démo-skins.

    Démo-skins

    Zone de téléchargement

    FAQ (voir pour les skins version 5.02.00)

 
Vous êtes ici :   Accueil » Feature Carousel
 
Prévisualiser...  Imprimer...  Imprimer la page...
Prévisualiser...  Imprimer...  Imprimer la section...
Recherche
 
Fermer
Calendrier

imasso.gif

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

Feature Carousel
un carousel jQuery, qui peut être intégré au coeur de GuppY, ou bien être utilisé dans un Iframe.

Ce carousel est une création de Brian Osborne : http://www.bkosborne.com

Il est édité sous la licence GPLv3.

Son fonctionnement est identique à ce que son auteur a prévu. J'ai ajouté l'option de réglage de l'opacité des images latérales et j'ai adapté le tout pour son intégration dans GuppY et/ou des Iframes.

Le zip d'intégration est téléchargeable ici. Il peut être installé avec l'installateur de GuppY. Celui-ci place un fichier jquery.featureCarousel.js dans le dossier inc/jshead de GuppY (dont les options peuvent être réglées dans la partie <script> ci-dessous), un fichier feature-carousel.css dans le dossier inc/csshead de GuppY (dont une grande partie peut être réglée dans la partie <style> ci-dessous) ainsi que des imagettes de navigation dans un dossier NavFeature placé dans le dossier img de GuppY. Vous pouvez bien sûr décompresser le zip et installer vous même par FTP , ces fichiers aux bons endroits.

Il est possible de créer des liens sur les images et sur les titres (légendes). Des réglages sont possibles et assez nombreux dans le style et le script du carousel. Il serait possible d'afficher plusieurs carousels Feature sur la même page, mais ceux-ci devraient avoir exactement les mêmes caractéristiques. Dans les exemples de l'article suivant, les carousels sont dans des Iframes, ce qui permet d'obtenir des effets différents à chaque fois.

Ci-dessous, Une bonne partie des réglages est opérationnelle, il fonctionne avec une pause au survol d'une image. Un clic sur une image latérale l'amène au centre.

Ci-dessous, le code utilisé : Une première partie <style> </style> et <script> </script> est à copier et coller au début du code source de l'article, de la boite libre, en y faisant les ajustements souhaités -cette partie est commentée le plus possible-.

<style type="text/css">
.carousel-container { /*attribut du conteneur*/
  width:650px; /*largeur*/
  margin:5px auto; /*marges extérieures -auto pour centrer en largeur-*/
}
#carousel { /*attribut du carousel*/
  height:260px; /*hauteur*/
  width:650px; /*même largeur que ci-dessus*/
  background:#CCCCCC; /*couleur de fond*/
  font-size:12px; /*taille de caractère*/
  font-family: Arial; /*police de caractère*/
}
.carousel-feature {  
  border:1px solid #5d5d5d; /*bordure des images épaisseur - nature - couleur*/
}
.carousel-feature .carousel-caption {  /*attribut des légendes*/
  bottom:0px; /*position*/
  width:100%; /*% d'occupation de l'image*/
  background: rgba(100, 100, 100, .8); /*couleur de fond +opacité*/
}
.carousel-feature .carousel-caption p { /*attribut du paragraphe des légendes*/
  margin:0; /*marges extérieures*/
  padding:5px; /*marges intérieures*/
  font-weight:bold; /*type de caractère bold - normal*/
  font-size:12px; /*taille de caractère*/
  color:#FFFFFF; /*couleur des caractères*/
}
.tracker-summation-container {  /*attribut du conteneur pagination résumée 1 of ...*/
  color:#FFFFFF; /*couleur des caractères*/
  left:20px; /*position*/
  top:240px; /*position*/
  padding: 0 2px; /*marges intérieures*/
  margin: 0 -4px; /*marges extérieures*/
  background:#000000; /*couleur de fond*/
}
.tracker-individual-container {  /*attribut du conteneur pagination individuelle*/
  color:#FFFFFF; /*couleur des caractères*/
  right:20px; /*position*/
  top:240px; /*position*/
  padding:0; /*marges intérieures*/
  margin:0; /*marges extérieures*/
}
.tracker-individual-container .tracker-individual-blip { /*attribut des numéros de pagination individuelle*/
  margin: 0 -4px; /*marges extérieures*/
  padding: 0 2px; /*marges intérieures*/
  color:#5B5B5B; /*couleur des caractères*/
  text-align:center;
  background:#E1E1E1; /*couleur de fond*/
}
.tracker-individual-container .tracker-individual-blip-selected { /*attribut du numéro de pagination individuelle sélectionné*/
  color:#FFFFFF; /*couleur des caractères*/
  font-weight:bold; /*type de caractère bold - normal*/
  background:#000000; /*couleur de fond*/
}
#carousel-left { /*position du bouton de navigation gauche*/
  bottom:25px;
  left:280px;  
}
#carousel-right { /*position du bouton de navigation droit*/
  bottom:25px;
  right:280px;
}
</style>
<script type="text/javascript">
      $(document).ready(function() {
        var carousel = $("#carousel").featureCarousel({
          // Pour les options :
          // Utilisez les quotes uniquement pour les variables "chaine de caractères"
          // une virgule après chaque option, sauf pour la dernière
        });

        $("#but_prev").click(function () {
          carousel.prev();
        });
        $("#but_pause").click(function () {
          carousel.pause();
        });
        $("#but_start").click(function () {
          carousel.start();
        });
        $("#but_next").click(function () {
          carousel.next();
        });
      });
      $.fn.featureCarousel.defaults = {    
    largeFeatureWidth :   0, // Image centrale, valeur mise à 0 = dimensions originales. Entre 0 et 1 = sert de coefficient multiplicateur
    largeFeatureHeight:      0, // des dimensions originales. Plus grand que 1 = mettre les valeurs souhaitées en pixels fixes pour toutes les images
    smallFeatureWidth:    .7, // coefficient multiplicateur pour les images latérales
    smallFeatureHeight:      .7,  // coefficient multiplicateur pour les images latérales
    smallFeatureOpacity:  0.6, // opacité des images latérales
    topPadding:           5, // marge haute intérieure du carousel
    sidePadding:          10, // marges latérales intérieures du carousel
    smallFeatureOffset:      50, // marges hautes supplémentaires pour les images latérales du carousel
    startingFeature:      1, // item au démarrage du carousel
    carouselSpeed:        1000, // temps en millisecondes de la transition
    autoPlay:             4000, // temps de l'affichage en millisecondes, peut être négatif=inverse le sens, 0 pour désactiver l'autoplay
    pauseOnHover:         true, // avec l'autoplay, pause au survol (true or false)
    stopOnHover:          false, // avec l'autoplay, stop au survol (false or true)
    trackerIndividual:    true, // numéro de pagination (true or false)
    trackerSummation:     true, // affichage du type pagination résumée "2 of 8" (true or false)
    preload:              true, // préchargement de toutes les images avant (peut être long...) (true or false)
    leftButtonTag:        '#carousel-left', // sélecteur pour la flèche gauche du carousel
    rightButtonTag:       '#carousel-right',  // sélecteur pour la flèche droite du carousel
    animationEasing:      'swing', // type d'animation de la transition : linear, easeInOutCubic, easeInExpo... voir ici par exemple : http://easings.net/fr
    captionBelow:         false, // place la légende SOUS l'image (true or false)
                    
// IMPORTANT : Ne pas modifier
    movedToCenter:        $.noop, // callback function for when a feature has animated to the center
    leavingCenter:        $.noop, // callback function for when feature left center
    clickedCenter:        $.noop  // callback function for when center feature was clicked
  };
</script>

Une seconde partie qui correspond au corps du carousel est à placer à l'endroit souhaité. Dans l'éditeur de GuppY, vous pourrez régler les textes des légendes, les liens dans celles-ci, et/ou sur les images.

<div class="carousel-container">
    <div id="carousel">
        <div class="carousel-feature"><img alt="Image01" class="carousel-image" src="photo/imagesFeatureC/Image01.jpg" />
            <div class="carousel-caption">
                <p style="text-align: center;">
Ce Feature Carousel peut s'intègrer dans GuppY et se règler facilement.</p>
            </div>
        </div>

        <div class="carousel-feature"><img alt="Image02" class="carousel-image" src="photo/imagesFeatureC/Image02.jpg" />
            <div class="carousel-caption">
                <p style="text-align: center;">
Les images du Carousel peuvent être placées et réglées différemment.</p>
            </div>
        </div>

        <div class="carousel-feature"><img alt="Image03" class="carousel-image" src="photo/imagesFeatureC/Image03.jpg" />
            <div class="carousel-caption">
                <p style="text-align: center;">
On peut afficher des légendes... Ou pas !</p>
            </div>
        </div>

        <div class="carousel-feature"><img alt="Image04" class="carousel-image" src="photo/imagesFeatureC/Image04.jpg" />
        </div>

        <div class="carousel-feature"><img alt="Image05" class="carousel-image" src="photo/imagesFeatureC/Image05.jpg" />
            <div class="carousel-caption">
                <p style="text-align: center;">
La couleur du fond et du texte de la légende peuvent être modifiées ainsi que leur opacité.</p>
            </div>
        </div>

        <div class="carousel-feature"><img alt="Image06" class="carousel-image" src="photo/imagesFeatureC/Image06.jpg" />
            <div class="carousel-caption">
                <p style="text-align: center;">
La légende peut être placée au dessous de l'image.</p>
            </div>
        </div>

        <div class="carousel-feature"><img alt="Image07" class="carousel-image" src="photo/imagesFeatureC/Image07.jpg" />
            <div class="carousel-caption">
                <p style="text-align: center;">
On peut modifier ou supprimer la pagination, les boutons de navigation.</p>
            </div>
        </div>

        <div class="carousel-feature"><img alt="Image08" class="carousel-image" src="photo/imagesFeatureC/Image08.jpg" />
            <div class="carousel-caption">
                <p style="text-align: center;">
On peut placer des liens dans les légendes... (images libres de droits : <a href="https://pixabay.com/fr/" target="_blank">Pixabay</a>)</p>
            </div>
        </div>

        <div class="carousel-feature"><a href="https://pixabay.com/fr/" target="_blank"><img alt="Image09" class="carousel-image" src="photo/imagesFeatureC/Image09.jpg" /></a>
            <div class="carousel-caption">
                <p style="text-align: center;">
... mais aussi sur les images...</p>
            </div>
        </div>

        <div class="carousel-feature"><img alt="Image10" class="carousel-image" src="photo/imagesFeatureC/Image10.jpg" />
            <div class="carousel-caption">
                <p style="text-align: center;">
... et ceci très facilement, puisque accessible directement dans l'éditeur de GuppY.</p>
            </div>
        </div>

        <div class="carousel-feature"><img alt="Image11" class="carousel-image" src="photo/imagesFeatureC/Image11.jpg" />
            <div class="carousel-caption">
                <p style="text-align: center;">
Installez ce Carousel au coeur de GuppY ou dans un Iframe.</p>
            </div>
        </div>

        <div class="carousel-feature"><img alt="Image12" class="carousel-image" src="photo/imagesFeatureC/Image12.jpg" />
            <div class="carousel-caption">
                <p style="text-align: center;">
Amusez-vous !</p>
            </div>
        </div>
    </div><!--fin id="carousel"-->

    <div id="carousel-left"><img src="img/NavFeature/fleche-gaucheG.png" /></div>
    <div id="carousel-right"><img src="img/NavFeature/fleche-droiteG.png" /></div>
</div><!--fin class="carousel-container"-->

Les images utilisées sont -sur ce site- dans un dossier photo/imagesFeatureC, à vous d'adapter les vôtres. La stucture (à copier-coller et adapter, notamment au niveau des liens...) de ce code est globalement celle-ci:

<div class="carousel-container">
    <div id="carousel">
        <div class="carousel-feature"><img alt="
Image1" class="carousel-image" src="photo/mes_images/Image1.jpg" />
            <div class="carousel-caption">
                <p style="text-align: center;">
Légende image1</p>
            </div>
        </div>

        <div class="carousel-feature"><img alt="Image2" class="carousel-image" src="photo/mes_images/Image2.jpg" />
            <div class="carousel-caption">
                <p style="text-align: center;">
Légende image2</p>
            </div>
        </div>

        <div class="carousel-feature"><img alt="Image3" class="carousel-image" src="photo/mes_images/Image3.jpg" />
        </div>

        <div class="carousel-feature"><img alt="Image4" class="carousel-image" src="photo/mes_images/Image4.jpg" />
            <div class="carousel-caption">
                <p style="text-align: center;">
Légende image4. Lien :<a href="http://mon-lien.fr" target="_blank">Mon Lien</a></p>
            </div>
        </div>

        <div class="carousel-feature"><a href="http://mon-lien.fr" target="_blank"><img alt="Image5" class="carousel-image" src="photo/mes_images/Image5.jpg" /></a>
            <div class="carousel-caption">
                <p style="text-align: center;">
Légende image5</p>
            </div>
        </div>

        <div class="carousel-feature"><img alt="Image6" class="carousel-image" src="photo/mes_images/Image6.jpg" />
            <div class="carousel-caption">
                <p style="text-align: center;">
Légende image6</p>
            </div>
        </div>
    </div><!--fin id="carousel"-->

    <div id="carousel-left"><img src="img/NavFeature/fleche-gaucheB.png" /></div>
    <div id="carousel-right"><img src="img/NavFeature/
fleche-droiteB.png" /></div>
</div><!--fin class="carousel-container"-->

Si vous souhaitez afficher ce type de carousel dans un Iframes, regardez ici. Les réglages sont exactement les mêmes.

Pour toute question ou aide afin d'utiliser ce type de carousel, veuillez poster sur le forum de ce site.


Date de création : 19/12/2016 @ 08:03
Catégorie : Astuces - Carousels
Page lue 657 fois


Réactions à cet article

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

Vous êtes ici :   Accueil » Feature Carousel
Préférences

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


  Nombre de membres 31 membres
Connectés :
( personne )
Snif !!!
Lettre d'information
Pour avoir des nouvelles de ce site, inscrivez-vous à notre Newsletter.
4twCX
Recopier le code :
10 Abonnés