Carousels - Flexbannieres (un slider de bannières aléatoires avec Flexslider)

→ Un slideshow de bannières "animées" aléatoires totalement responsive qui utilise Flexslider...

Un exemple fonctionne dans la partie démo de ce site, installé seul dans une boîte d'une section horizontale. Rafraîchir la page pour voir d'autres bannières.

C'est le procédé que j'utilise sur ce site (sous adHoc également) : https://www.lacompagniedeselles.fr/, il me sert simplement à agrémenter l'affichage. A chaque chargement ou rafraîchissement de la page, c'est une nouvelle bannière "animée" qui s'affiche aléatoirement. Il est très simple de prévoir des liens internes ou externes sur ces images (voire sur des titres qui peuvent être ajoutés... voir plus bas...). Ce n'est pas le cas sur l'exemple ci-dessous issu du site de la Compagnie des Elles.

J'avais cherché une solution lors de l'annonce de la disparition de Flashplayer (qui avait, reconnaissons-le, des possibilités intéressantes, malgré ses défauts...) pour afficher des bannières "animées"... simples et à mon goût... C'est vers Flexslider initié par Tyler Smith (WooThemes) sous licence GPLv2, que je me suis tourné. Attention !, pas de "vraies" animations, mais de simples images qui s'enchaînent avec un effet de fondu (fade) et ici, elles ne "tournent" pas en boucle et l'effet s'arrête sur la dernière image.

Le procédé s'affiche dans un Iframe responsive, il est donc impératif de se référer au tutoriel (et pages suivantes) de ce site qui permet cette possibilité. Un des exemples, différent dans ses réglages, utilise d'ailleurs également Flexslider...

Les images produites ont été conçues avec Photofiltre (une de ses versions est gratuite), ou Gimp, logiciel de traitement d'image open source et gratuit. L'utilisation "judicieuse" des calques permet d'obtenir rapidement une série d'images. Les formats classiques peuvent être utilisés : .jpg .gif .png ... et mélangés éventuellement. Attention cependant... Le jeu des opacités dans le fichier javascript jquery.flexslider.js a été modifié pour une fluidité des transitions, et les images se superposent en restant "visibles", cela peut poser problème si vous utilisez beaucoup les transparences, cela n'en pose aucun si vous utilisez des images .jpg ou des images opaques. Me contacter si c'est nécessaire.

Un zip (flexbannieres.zip), téléchargeable ici contient les fichiers nécessaires à la réalisation de ce procédé. Il contient deux dossiers : FLEXSLIDER et BANNIERES qui contiennent respectivement :
- les fichiers nécessaires à Flexslider,
- les images et fichiers des bannières de démonstration pour exemple.

S'y trouve également le fichier flexbannieres.phtml (qui peut être simplement renommé en flexbannieres.php suivant votre serveur local ou en ligne qui acceptera l'un ou l'autre ou les deux...) et l'image "ratio" de l'Iframe ratio300x73.gif qui seront appelés dans l'Iframe responsive. J'ai placé le tout dans le dossier images d'adHoc. Voir ci-dessous les trois exemples... en rafraîchissant la page plusieurs fois.

→ Ci-dessous le fichier flexbannieres.phtml

Pour exploiter ce fichier, il vous suffit de l'éditer avec notepad++ par exemple, de faire les modifications souhaitées et de changer éventuellement l'extension (.php ou .phtml) en fonction de votre serveur local ou en ligne.

→ Dans le [style type='txt/css]...[/style], préciser éventuellement des règles, notamment pour .flex-caption (qui n'existe pas à l'origine) si vous ne le faites pas directement dans le fichier de style FLEXSLIDER/flexslider.css (voir celui-ci plus bas).

→ Modifier, ajouter ou supprimer des options dans le [script type="text/javascript]...[/script] (voir plus bas la liste des options par défaut du fichier FLEXSLIDER/jquery.flexslider.js dans laquelle j'ai "francisé" en partie, les commentaires).

→ Enfin, dans la partie [body]...[/body] dans la variable tableau (array) placer les noms de vos fichiers de bannières : ici "banniere1" "banniere2" "banniere3" avec les extensions .php. Voir plus bas un exemple du contenu de ces fichiers qui appellent les images.

→ Voici le code d'intégration de ce fichier dans le code source :


<div style="margin:auto;max-width:600px;">

<div class="iframe-responsive-wrapper">
<img class="iframe-ratio" src="images/ratio300x73.gif" />
<iframe marginheight="0" marginwidth="0" scrolling="no" src="images/flexbannieres.phtml" width="600" height="146" frameborder="0"></iframe>
</div>

</div>

→ Ci-dessous le fichier de style flexslider.css

Essentiellement pour la partie class .flex-caption.


/*
 * jQuery FlexSlider v2.2.0
 * http://www.woothemes.com/flexslider/
 *
 * Copyright 2012 WooThemes
 * Free to use under the GPLv2 license.
 * http://www.gnu.org/licenses/gpl-2.0.html
 *
 * Contributing author: Tyler Smith (@mbmufffin)
 * * Quelques modifications pour utilisations particulières : JeanDenis 2014-2021 https://adhoc.71site.fr
 * * Aménagements de style et ajout class flex-caption
 * * Modifiez à votre gré ce fichier mais n'en supprimez pas les références aux origines SVP
 */

/* Browser Resets
*********************************/
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus  {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;}

/* Icon Fonts
*********************************/
/* Font-face Icons */
@font-face {
	font-family: 'flexslider-icon';
	src:url('fonts/flexslider-icon.eot');
	src:url('fonts/flexslider-icon.eot?#iefix') format('embedded-opentype'),
		url('fonts/flexslider-icon.woff') format('woff'),
		url('fonts/flexslider-icon.ttf') format('truetype'),
		url('fonts/flexslider-icon.svg#flexslider-icon') format('svg');
	font-weight: normal;
	font-style: normal;
}

/* FlexSlider Necessary Styles
*********************************/
.flexslider {margin: 0; padding: 0;}
.flexslider .slides > li { margin-left: 0} /* Hide the slides before the JS is loaded. Avoids image jumping transforamtion proposée par Fred68 */
.flexslider .slides img {width: 100%; display: block;}
.flex-pauseplay span {text-transform: capitalize;}

/* Clearfix for the .slides element */
.slides:after {content: "\0020"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
html[xmlns] .slides {display: block;}
* html .slides {height: 1%;}

/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */
.no-js .slides > li:first-child {display: block;}

/* FlexSlider Default Theme
*********************************/
.flexslider { margin: 0 0 60px; background: #fff; border: 4px solid #fff; position: relative; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2); box-shadow: 0 1px 4px rgba(0,0,0,.2); zoom: 1; }
.flex-viewport { max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; }
.loading .flex-viewport { max-height: 300px; }
.flexslider .slides { zoom: 1; }
.carousel li { margin-right: 5px; }

/* Direction Nav */
.flex-direction-nav {*height: 0;}
.flex-direction-nav a  { text-decoration:none; display: block; width: 15px; height: 20px; position: absolute; top: 5px; z-index: 10; overflow: hidden; opacity: 0; cursor: pointer; color: rgba(255,255,255,0.8); text-shadow: 1px 1px 0 rgba(0,0,0,0.8); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease; }
.flex-direction-nav .flex-prev { left: -50px; }
.flex-direction-nav .flex-next { right: -50px; text-align: right; }
.flexslider:hover .flex-prev { opacity: 0.8; left: 10px; }
.flexslider:hover .flex-next { opacity: 0.8; right: 10px; }
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover { opacity: 1; }
.flex-direction-nav .flex-disabled { opacity: 0!important; filter:alpha(opacity=0); cursor: default; }
.flex-direction-nav a:before  { font-family: "flexslider-icon"; font-size: 15px; display: inline-block; content: '\f001'; }
.flex-direction-nav a.flex-next:before  { content: '\f002'; }

/* Pause/Play */
.flex-pauseplay a { display: block; width: 15px; height: 20px; position: absolute; top: 5px; left: 30px; opacity: 1; z-index: 10; overflow: hidden; cursor: pointer; color: rgba(255,255,255,0.8); text-shadow: 1px 1px 0 rgba(0,0,0,0.8); }
.flex-pauseplay a:before  { font-family: "flexslider-icon"; font-size: 15px; display: inline-block; content: '\f004'; }
.flexslider:hover .flex-pauseplay  a { opacity: 0.8;}
.flexslider:hover .flex-pauseplay a:hover { opacity: 1; }
.flex-pauseplay a.flex-play:before { content: '\f003'; }

/* Titres : Class ajoutée au style d'origine */
.flex-caption {
width:100%;
padding: 5px 0;
position: absolute;
left: 0px;
bottom: -18px;
background: rgba(0, 0, 0, 0);
font-family: "arial";
color: rgba(255,255,255,1.0);
text-align: center;
font-size: 18px;
font-weight:bold;
line-height: 18px;
}
.flex-caption a {color:#FFF;text-decoration:none;}
.flex-caption a:hover {color:#FFFF00;text-decoration:none;}

/* Control Nav */
.flex-control-nav {width: 100%; position: absolute; bottom: -40px; text-align: center;}
.flex-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; *display: inline;}
.flex-control-paging li a {width: 11px; height: 11px; display: block; background: #666; background: rgba(0,0,0,0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); -moz-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); -o-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); box-shadow: inset 0 0 3px rgba(0,0,0,0.3); }
.flex-control-paging li a:hover { background: #333; background: rgba(0,0,0,0.7); }
.flex-control-paging li a.flex-active { background: #000; background: rgba(0,0,0,0.9); cursor: default; }

.flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;}
.flex-control-thumbs li {width: 25%; float: left; margin: 0;}
.flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;}
.flex-control-thumbs img:hover {opacity: 1;}
.flex-control-thumbs .flex-active {opacity: 1; cursor: default;}

@media screen and (max-width: 860px) {
.flex-direction-nav .flex-prev { opacity: 1; left: 10px;}
.flex-direction-nav .flex-next { opacity: 1; right: 10px;}
}

→ Ci-dessous les options par défaut "facilement" modifiables du fichier .js jquery.flexslider.js

Options qu'il vaut sans doute mieux ajouter ou modifier dans votre fichier flexbannieres.php (ou .phtml)


  //FlexSlider: Default Settings
  $.flexslider.defaults = {
    namespace: "flex-",             //{NEW} String: Prefix string attached to the class of every element generated by the plugin (ne pas modifier)
    selector: ".slides > li",       //{NEW} Selector: Must match a simple pattern. '{container} > {slide}' -- Ignore pattern at your own peril (ne pas modifier)
    animation: "fade",              //String: type d'animation "fade" ou "slide"
    easing: "swing",                //{NEW} String: type de transition jQuery "swing" "linear"... et beaucoup d'autres : ( https://api.jqueryui.com/easings/ )
    direction: "horizontal",        //String: direction du "slide", "horizontal" ou "vertical"
    reverse: false,                 //{NEW} Boolean: inverse la direction de l'animation (true ou false)
    animationLoop: false,            //Boolean: animation en boucle (true ou false)
    smoothHeight: false,            //{NEW} Boolean: en mode du "slide" horizontal, animation 'douce' (true ou false)
    startAt: 0,                     //Integer: image de départ (0 = première image)
    slideshow: true,                //Boolean: démarrage automatique (true ou false)
    slideshowSpeed: 0,           //Integer: durée d'affichage d'une image en millisecondes
    animationSpeed: 1300,            //Integer: durée de la transition entre deux images en millisecondes
    initDelay: 0,                   //{NEW} Integer: délai d'initialisation au départ en millisecondes
    randomize: false,               //Boolean: ordre d'affichage aléatoire (true ou false)
    thumbCaptions: false,           //Boolean: Placer des légendes sur les vignettes si "thumbnails" en controlNav (true ou false).

    // Usability features
    pauseOnAction: false,            //Boolean: pause du slider si interaction avec les éléments de contrôle (true ou false)
    pauseOnHover: false,            //Boolean: pause du slider au survol (true ou false)
    pauseInvisible: true,           //{NEW} Boolean: pause du slider lorsque l’onglet est invisible (true ou false)
    useCSS: true,                   //{NEW} Boolean: utilisation transitions CSS3  (true ou false)
    touch: false,                    //{NEW} Boolean: utilisation navigation tactile si écran adapté (true ou false)
    video: true,                   //{NEW} Boolean: si usage vidéos dans le slider, évite les transformations 3D CSS3 (true ou false)

    // Primary Controls
    controlNav: false,               //Boolean: créer la navigation pour le contrôle de pagination (true ou false)
    directionNav: false,             //Boolean: créer la navigation pour le contrôle prev/next de navigation (true ou false)
    prevText: "",               //String: mettre le texte (ou laisser vide) pour l'item "Previous" directionNav
    nextText: "",               //String: mettre le texte (ou laisser vide) pour l'item "Next" directionNav

    // Secondary Navigation
    keyboard: false,                 //Boolean: navigation avec les flèches du clavier (true ou false)
    multipleKeyboard: false,        //{NEW} Boolean: navigation avec les flèches du clavier si plusieurs sliders sont affichés (true ou false)
    mousewheel: false,              //{UPDATED} Boolean: navigation avec la molette de la souris, nécessite jquery.mousewheel.js (https://github.com/brandonaaron/jquery-mousewheel) 
    pausePlay: false,               //Boolean: créer contrôle pause/play
    pauseText: "",              //String: mettre le texte (ou laisser vide) pour l'item "Pause"
    playText: "",               //String: mettre le texte (ou laisser vide) pour l'item "Play"

    // Special properties
    controlsContainer: "",          //{UPDATED} jQuery Object/Selector: Declare which container the navigation elements should be appended too. Default container is the FlexSlider element. Example use would be $(".flexslider-container"). Property is ignored if given element is not found.
    manualControls: "",             //{UPDATED} jQuery Object/Selector: Declare custom control navigation. Examples would be $(".flex-control-nav li") or "#tabs-nav li img", etc. The number of elements in your controlNav should match the number of slides/tabs.
    sync: "",                       //{NEW} Selector: Mirror the actions performed on this slider with another slider. Use with care.
    asNavFor: "",                   //{NEW} Selector: Internal property exposed for turning the slider into a thumbnail navigation for another slider

    // Carousel Options
    itemWidth: 0,                   //{NEW} Integer: Box-model width of individual carousel items, including horizontal borders and padding.
    itemMargin: 0,                  //{NEW} Integer: Margin between carousel items.
    minItems: 1,                    //{NEW} Integer: Minimum number of carousel items that should be visible. Items will resize fluidly when below this.
    maxItems: 0,                    //{NEW} Integer: Maxmimum number of carousel items that should be visible. Items will resize fluidly when above this limit.
    move: 0,                        //{NEW} Integer: Number of carousel items that should move on animation. If 0, slider will move all visible items.
    allowOneSlide: true,           //{NEW} Boolean: Whether or not to allow a slider comprised of a single slide

    // Callback API
    start: function(){},            //Callback: function(slider) - Fires when the slider loads the first slide
    before: function(){},           //Callback: function(slider) - Fires asynchronously with each slider animation
    after: function(){},            //Callback: function(slider) - Fires after each slider animation completes
    end: function(){},              //Callback: function(slider) - Fires when the slider reaches the last slide (asynchronous)
    added: function(){},            //{NEW} Callback: function(slider) - Fires after a slide is added
    removed: function(){},           //{NEW} Callback: function(slider) - Fires after a slide is removed
    init: function() {}             //{NEW} Callback: function(slider) - Fires after the slider is initially setup
  };

→ Et enfin un exemple d'un fichier d'images qui sera choisi et inclus aléatoirement dans flexbannieres.php (.phtml) ici le fichier banniere3.php

Pour exploiter ces fichiers, il vous suffit de les éditer avec notepad++ par exemple, de faire les modifications souhaitées et de changer leur nom.

→ Ici, ce fichier et les images sont placés dans le dossier BANNIERES, vous pouvez les placer ailleurs en adaptant les chemins.

→ Des images sont répétées deux fois, c'est volontaire... afin que l'affichage de celles-ci "dure" plus longtemps (pas d'effet de "fade" perceptible).

→ Les deux dernières images montrent la façon dont on peut placer des liens : sur l'image uniquement pour l'avant-dernière et dans le flex-caption en plus pour la dernière.

NB : Je commence toujours ces bannières par une image totalement transparente : c'est afin que la série d'images apparaisse avec un effet de "fade" plus agréable... Mais c'est affaire de goût, évidement...

La place "naturelle" de ce type de procédé me semble être dans une boîte du Header (de préférence, probablement en Top ou en Bottom...). Il est évidemment possible de maintenir ou de désactiver son apparition en affichage sur smartphone. Là encore, c'est affaire de goût...

Veuillez, s'il vous plait, ne pas supprimer les références aux origines de Flexslider et à ce site dans les fichiers que vous utiliserez. Me contacter sur le forum de ce site pour toute question ou aide pour utiliser ces procédures.




Astuces

adHoc

Iframes responsives

Camera

Unite Gallery

Animations au survol

Autres astuces en CSS

Audio-Players

Carousels