Bannière avec images défilantes

Voir le sujet précédent Voir le sujet suivant Aller en bas

Bannière avec images défilantes

Message par Galaa le Mer 28 Mar - 2:27

Tuto piqué sur VK, si jamais ça t’intéresse. Wink
C'est pour obtenir une bannière avec images défilantes, comme ceci : http://essaisow.forumgratuit.org/

****

Alors on va procéder par ordre, parce que mine de rien, ce n'est pas si simple.

Une bannière animée va se composer de trois parties :
- une image de fond, fixe
- les images défilantes (avec un ordre d'apparition des images aléatoire)
- le logo qui sera au premier plan, fixe

Il faut que toutes les images (fond, images, logo) soient aux même dimensions.

1) Le CSS

Dans le panel admin, onglet Affichage => Images et couleurs => Couleurs, onglet Feuille de style, on colle à la fin de la page :

Code:
#logo { position:relative; z-index:3; }
/*---------- YOU CAN CHANGE THIS STUFF -----------*/
#bannerRotator { width:900px; height:500px; margin:0px auto; background:url("http://s4.noelshack.com/old/up/back-91c715e990.png"); }
#bannerRotator ul li img{ max-width:900px; max-height:500px; }

/*---------- YOU MIGHT BREAK IT IF YOU CHANGE THIS STUFF -----------*/
#bannerRotator { position:relative; }
#bannerRotator ul { list-style:none; padding:0; position:relative; margin:0; }
#bannerRotator ul li { display:none; position:absolute; }
#bannerRotator ul li a { text-decoration:none; }

Dans l'exemple, les dimensions des images sont 900px de largeur et 500px de hauteur. Pensez donc à les changer pour mettre les dimensions de vos images à vous.

Puis on enregistre.

2) Le Javascript

Allez dans l'onglet Modules => HTML & JAVASCRIPT => Gestion des codes Javascript. Pour le moment, on va mettre l'option Activer la gestion des codes Javascript à Non. Puis cliquez sur le bouton Créer un nouveau javascript. Mettez le titre que vous voulez, et cochez la case Sur toutes les pages. Puis dans la page, on colle ceci :

Code:
function bannerRotator(selector, scrollTime, pauseTime, nav){
 
  $(selector+" li:first").css("display", "block"); //show the first list item
  var count = $(selector+" li").size(); //get total number of list items
  if(count > 1){ //dont do anything if there is only one list item. 
   
     if(scrollTime == null){ var scrollTime=500; } //default scroll time (length of transition)
    if(pauseTime== null){ var pauseTime=5000; } //default pause time (how long to hold the image between transitions)
   
    $(selector+" li").each(function( intIndex ){ $(this).attr('rel', (intIndex+1)); }); //add the list position to the each of the items

    if(nav != null){
      var i = 1;
      $(selector).append("<div id='bannerNav'></div>"); //create navigation buttons
      while(i <= count){
         if(i == $(selector+" li:visible").attr('rel')){  //if its the nav item that belongs to the visible image, mark it as the active nav item
          $('#bannerNav').append("<a class='active' rel='"+i+"' href='#'></a> ");
         }
         else{
           $('#bannerNav').append("<a rel='"+i+"' href='#'></a> ");
         }
         i++;
       }
      $('#bannerNav').append("<span class='pause'></span> "); //pause button
      $('#bannerNav').append("<span href='#' class='play' style='display:none;'></span> "); //play button

      $("#bannerNav a").click(function () { //handle navigation by clicking nav items
        $("#bannerNav a.active").removeClass('active');                           
         $(this).addClass('active'); //move the active nav item to this item
         var currentClassName = $(selector+" li:visible").attr('rel');
         var nextClassName = $(this).attr('rel');
         var storedTimeoutID = $("#bannerNav").attr('timeoutID');

         clearTimeout(storedTimeoutID);//stop the images from looping when a nav button is pressed
         $("span.pause").hide();
         $("span.play").show();
   
         if( nextClassName != currentClassName ){ //only change images if they clicked on a new item (not the one they are viewing)
          $(selector+" li:visible").fadeOut(scrollTime);
           $(selector+" li[rel="+nextClassName+"]").fadeIn(scrollTime);
         }
         return false;
      });
   
      $("span.pause").click(function () { //stop the images looping on pause click
        var storedTimeoutID = $("#bannerNav").attr('timeoutID');
         clearTimeout(storedTimeoutID);
         $("span.pause").hide();
         $("span.play").show();
      });
   
      $("span.play").click(function () { //start the images looping on play click
        scrollImages(count, selector, scrollTime, pauseTime);
         $("span.play").hide();
         $("span.pause").show();
      });
    }
   
    var timeout = setTimeout(function(){
      scrollImages(count, selector, scrollTime, pauseTime);
    }, pauseTime);
   
    $("#bannerNav").attr('timeoutID', timeout); //save the timeout id so we can cancel the loop later if a nav button is pressed
  }
}

function scrollImages(count, selector, scrollTime, pauseTime){
  currentClass = $(selector+" li:visible").attr('rel'); //get the list position of the current image
  nextClass = $(selector+" li:visible").attr('rel'); //open a new variable for the next class
  if (currentClass == count ){ nextClass=1; } //if you've reached the end of the images... start from number 1 again
  else{ nextClass++; } //if not just add one to the last number
   
  $(selector+" li[rel="+currentClass+"]").fadeOut(scrollTime); //fade out old image
  $("#bannerNav a.active").removeClass('active'); //remove active class from our nav
   
  $(selector+" li[rel="+nextClass+"]").fadeIn(scrollTime); //fade in new image
  $("#bannerNav a[rel="+nextClass+"]").addClass('active'); //add new active class to the next nav item
 
  var timeout = setTimeout(function(){ scrollImages(count, selector, scrollTime, pauseTime); }, pauseTime); //scroll the banners again after waiting for pauseTime 
  $("#bannerNav").attr('timeoutID', timeout); //save the timeout id so we can cancel the loop later if a nav button is pressed
}


var tableBan = new Array(
   "http://s4.noelshack.com/uploads/images/5774150357217_303.png",
   "http://s4.noelshack.com/uploads/images/18660539469429_alastor.png",
   "http://s4.noelshack.com/uploads/images/19010209358943_angie.png",
   "http://s4.noelshack.com/uploads/images/4298662660743_belzebuth.png",
   "http://s4.noelshack.com/uploads/images/10736020410588_benjamin_marshall.png",
   "http://s4.noelshack.com/uploads/images/18358926503742_billy_dirnt.png",
   "http://s4.noelshack.com/uploads/images/19670226760602_cassandra_santamaria.png",
   "http://s4.noelshack.com/uploads/images/16144702928244_charlie_green.png",
   "http://s4.noelshack.com/uploads/images/4144339634589_draven.png",
   "http://s4.noelshack.com/uploads/images/2883929038254_el_verdugo.png",
   "http://s4.noelshack.com/uploads/images/15192273580704_freddy_energizer.png",
   "http://s4.noelshack.com/uploads/images/17045421037425_james_strike.png",
   "http://s4.noelshack.com/uploads/images/3024130066749_jyrki_puhdas.png",
   "http://s4.noelshack.com/uploads/images/17390056500432_luther_kay.png",
   "http://s4.noelshack.com/uploads/images/9097751533860_mask_marvel.png",
   "http://s4.noelshack.com/uploads/images/6880027388454_methodcobra.png",
   "http://s4.noelshack.com/uploads/images/19703696813262_sylvain_primeau.png",
   "http://s4.noelshack.com/uploads/images/16789933998684_the_crow.png",
   "http://s4.noelshack.com/uploads/images/19535756968926_the_n.png",
   "http://s4.noelshack.com/uploads/images/13800781693809_yoo_jin.png"               
);

function shuffle(a)
{
  var j = 0;
  var valI = '';
  var valJ = valI;
  var l = a.length - 1;
  while(l > -1)
  {
      j = Math.floor(Math.random() * l);
      valI = a[l];
      valJ = a[j];
      a[l] = valJ;
      a[j] = valI;
      l = l - 1;
   }
   return a;
}

$(document).ready(function(){
   var rand = shuffle(tableBan);
   $.each( rand, function(key, value){
      $('#bannerRotator ul').append('<li><img src="' + value + '" alt="bannerImage' + key + '" /></li>');
   });
   bannerRotator('#bannerRotator', 500, 5000, true);
});

Dans ce code, on remarquera que les images défilantes sont stockées dans un tableau javascript appelé TableBan. Lorsqu'il y aura de nouvelles images à ajouter, ou des images à supprimer, c'est dans ce tableau qu'il faudra faire les modifications. A la fin de chaque ligne du tableau (contenant les liens des images), il y a une virgule SAUF la dernière ligne du tableau. Il faut respecter ça, sinon le script ne marche pas.

On enregistre la page.

3) Le HTML

Dernière grosse étape, modification du template. Pour ça, on va dans l'onglet Affichage => Templates => Général, puis dans la liste des templates, cliquez sur overall_header. Le code de cette page s'affiche.

Tout d'abord il faut vérifier un point. Pour ça, cherchez dans le code ceci :

Code:
{HOSTING_JS}

Si vous ne le trouvez pas, il faudra alors l'ajouter. Pour cela, cherchez dans le code ceci :

Code:
<!-- END switch_ticker_new -->

Et on ajoute juste après ceci :

Code:
{HOSTING_JS}

Après cette vérification, on va passer à l'ajout de notre bannière animée. Pour cela, on va chercher ceci :

Code:
<!-- BEGIN switch_logo_center -->
<a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>

et on remplace ce code par ceci :

Code:
<!-- BEGIN switch_logo_center -->
<div id="bannerRotator">
  <ul>
  </ul>
  <a href="{U_INDEX}" id="logo"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
</div>

Et on enregistre les modifications. Attention, il peut y avoir une page blanche qui s'affiche après avoir enregistré. Ce n'est pas un souci, c'est juste un bug de Forumactif. Pour cela, on fait juste revenir à la page précédente dans le navigateur et on retrouve le code du template corrigé (il a été enregistré donc pas besoin de recliquer sur le bouton Enregistrer).

Dernière étape :
- Le code a été modifié dans le template, mais dans la liste des templates, on voit overall_header marqué "en attente". Il suffit de cliquer sur la croix verte pour valider ce changement. Le template passe alors en "publié".
- Dans l'onglet Modules => HTML & JAVASCRIPT => Gestion des codes Javascript, on met l'option Activer la gestion des codes Javascript à Oui. Et on enregistre.

Voilà, normalement tu as ta bannière animée !

Maintenant il te suffit de changer le logo comme on le fait d'habitude dans Forumactif (panel admin => Affichage => Images et Couleurs => Gestion des images, puis Logo du forum).

Le résultat devrait donner comme sur ce forum de test : http://essaisow.forumgratuit.org/
avatar
Galaa

Nombre de messages : 7
Points : 0
Date d'inscription : 14/02/2006

Revenir en haut Aller en bas

Re: Bannière avec images défilantes

Message par kitana le Sam 7 Juil - 3:25



ABBIGAËL SANDERS



LIBRE I RÉSERVÉ I PRIS


INFOS

■ PSEUDO : Gemini
■ AGE : 28 ans
■ RACE : Mutante
■ GROUPE :Rebellion
■ AFFILIATION :Rebelle
■ STATUT : Leader
■ RECENSEMENT : Contre
■ MARVEL : Non
■ AVATAR : Ali Larter
■ PLUS : [x] [x]






BIOGRAPHIE


Venue a NY il y a plusieurs années dans l'espoir de trouver son frère, les choses ont bien changée pour Abby depuis. Ancienne responsable de la sécurité à la confrérie de Magneto, ce fut un peu la pagaille pendant la civil war ou tous s'associèrent contre le Shield. Une fois Captain America mort, beaucoup décidèrent d'abandonner le combat, plus un endroit où allez...
Abbigaël Aidée de Blink décidèrent ne ne pas abandonner le combat et de reconstruire un camp ailleurs sous terre pour recueillir les fugitifs et préparer une nouvelle contre-attaque. Qui a dit que la guerre était finie? Pas elle.
Elle est l'actuelle Leader des rebelles. Et selon ses multiples personnalités presque tous les moyens seront bon pour parvenir a leur fin tout en protégeant et leur.
Elle possède 5 personnalités différentes, Jessica une tueuse sociopathe, Abbigael la rationnelle, Raquelle l'ambitieuse, Tiffany l'innocente et Meg l'exubérante.






CAPACITÉS/ÉQUIPEMENT


-Cryokinésie
-Hydrokinésie


DORIAN WALKER:
Dorian est un mutant qu'Abby a recruté, ancien flic, c'est quelqu'un de droit en qui elle à toute confiance, elle lui confierait sa vie. Elle apprécie beaucoup cet homme surtout qu'il s'est donné pour mission de l'aider à garder le contrôle, surveillant et sabotant parfois jess..
KYANA MAYERS:
-
-
-
-
-


ARCHANGEL :





ODESSA STANE :
Elle se sont connu dans un asile, original certes, les deux jeunes femmes se sont de suite entendu, lorsqu'elle est revenue pour la sortir de la elle s'était elle aussi enfuie. Les deux jeunes femmes se sont retrouvées pendant la guerre à la première rébellion et sont devenue amie, travaillant régulièrement ensemble, elle fait partie des personnes de confiance de Gemini même si elle tente de limité les envie destructeur de la jeune femme et elle la seconde au camp depuis le départ de blink


_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

I can't be tamed, I can't be changed, I can't be saved, I can't be blamed
Come on, have fun, go out and kick some serious ass
avatar
kitana
❝ Fondateur Univers 616 ❞


Nombre de messages : 385
Points : 50
Date d'inscription : 14/02/2006

more
about me:

http://kitdesign.superforum.fr

Revenir en haut Aller en bas

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum