Feature Carousel
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 : https://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.
Attention, ce zip a changé : avec la version 5.03.00 de GuppY, l'ancienne installation ne fonctionne plus !
Si vous aviez installé Feature Carousel avant et qu'il ne fonctionne plus : Supprimez sans remord par FTP :
¤ le fichier jquery.featureCarousel.js dans le dossier inc/jshead de GuppY
¤ le fichier feature-carousel.css dans le dossier inc/csshead de GuppY
¤ le dossier NavFeature (et son contenu) placé dans le dossier img de GuppY.
Vous pouvez installer ce nouveau zip avec la fonction Installer dans l'admin de GuppY ou bien décompresser le zip et envoyer par FTP le dossier FeatureCarousel et son contenu dans le dossier photo de GuppY.
Dans ce dossier FeatureCarousel, il y a
* le dossier js qui contient les fichiers jquery.featureCarousel.js, jquery-1.8.3.js,
* le dossier css qui contient le fichier feature-carousel.css,
* le dossiers images qui contient quelques flèches de navigation (vous pouvez ajouter les vôtres et adapter...)
NB: c'est exactement le même contenu et au même endroit que le zip de Feature Carousel dans des Iframes, ceci dans un but de simplification de l'ensemble...
Quelques modifications ont été mises en place suite à ce nouveau mode d'installation. Elles sont dans les codes ci-dessous.
Si vous souhaitez réparer un carousel mis en place avant 5.03.00 et qui ne fonctionne plus, inspirez-vous de ce tutoriel et des codes ci-dessous, et n'hésitez surtout pas à poster sur ce forum si vous rencontrez la moindre difficulté...
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.
Ce Feature Carousel peut s'intègrer dans GuppY et se règler facilement.
Les images du Carousel peuvent être placées et réglées différemment.
On peut afficher des légendes... Ou pas !
La couleur du fond et du texte de la légende peuvent être modifiées ainsi que leur opacité.
La légende peut être placée au dessous de l'image.
On peut modifier ou supprimer la pagination, les boutons de navigation.
On peut placer des liens dans les légendes... (images libres de droits : Pixabay)
... mais aussi sur les images...
... et ceci très facilement, puisque accessible directement dans l'éditeur de GuppY.
Installez ce Carousel au coeur de GuppY ou dans un Iframe.
Amusez-vous !
Ci-dessous, le code utilisé : Une première partie : <link ..../>...<... /script> (obligatoire !), <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-.
<link charset="utf-8" href="photo/FeatureCarousel/css/feature-carousel.css" rel="stylesheet" />
<script src="photo/FeatureCarousel/js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
<script src="photo/FeatureCarousel/js/jquery.featureCarousel.js" type="text/javascript" charset="utf-8"></script>
<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-image {
border:1px solid #5d5d5d; /*bordure des images épaisseur - nature - couleur*/
}
.carousel-feature {
border:0px; /*IMPORTANT !! NE PAS ENLEVER POUR LA REGLE CI-DESSUS !!*/
}
.carousel-feature .carousel-caption { /*attribut des légendes*/
bottom:0px; /*position en bas*/
left:0px; /*position à gauche*/
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:-15px 0; /*marges extérieures HB DG*/
padding:0 5px; /*marges intérieures HB DG*/
font-weight:bold; /*type de caractère bold - normal*/
font-size:12px; /*taille de caractère*/
color:#FFFFFF; /*couleur des caractères*/
background:transparent; /*couleur de fond du paragraphe*/
}
.carousel-feature .carousel-caption p a { /lien dans les paragraphes*/
color:#FFFF00; /*couleur des caractères*/
font-weight:bold; /*type de caractère bold - normal*/
}
.carousel-feature .carousel-caption p a:hover { /lien survolé dans les paragraphes*/
color:#FFAE5E; /*couleur des caractères*/
font-weight:bold; /*type de caractère bold - normal*/
}
.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 : https://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="photo/FeatureCarousel/images/fleche-gaucheG.png" /></div>
<div id="carousel-right"><img src="photo/FeatureCarousel/images/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="https://mon-lien.fr" target="_blank">Mon Lien</a></p>
</div>
</div>
<div class="carousel-feature"><a href="https://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="photo/FeatureCarousel/images/fleche-gaucheB.png" /></div>
<div id="carousel-right"><img src="photo/FeatureCarousel/images/fleche-droiteB.png" /></div>
</div><!--fin class="carousel-container"-->
Notez que les différentes séries de flèches de navigation sont situées dans le dossier photo/FeatureCarousel/images. Vous pouvez ajouter les vôtres, puis adapter "carousel-left" et "carousel-right" à la fin du code du carousel.
Si vous souhaitez afficher ce type de carousel dans un Iframes, regardez ici. Les réglages sont, à très peu d'éléments près, les mêmes.
Pour toute question ou aide afin d'utiliser ce type de carousel, veuillez poster sur le forum de ce site.
Dernière modification : 25/12/2019 @ 06:44
Catégorie : - Carousels
Page lue 96411 fois
