AccueilAccueil  PortailPortail  FAQFAQ  RechercherRechercher  MembresMembres  GroupesGroupes  S'enregistrerS'enregistrer  ConnexionConnexion  

SLIDESHOW INFINI HORIZONTAL TUTO POUR LE KK DU CODAGE JTM BB SHREK.


FORT FORT LOINTAIN

i am the ruler

avatar

Messages : 118
Date d'arrivée : 24/08/2011
Âge : 19
Localisation : lorem
Humeur : lorem



Mar 29 Juil - 10:50

SALUT TOUA  

je vais pas blablater infiniment, parce que je t'avoue que j'ai grave la flemme, mais on va faire passer ça pour du professionnalisme   

donc, tu commences par aller dans le template index_box

au tout tout début, tu trouves normalement :

Code:
<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
   <tr>
      <td valign="bottom">
         <!-- BEGIN switch_user_logged_in -->

et bah, tu le remplaces par (en complétant les liens, images etc) :

Code:
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr><td align="center"><!-- Slideshow infini horizontal --><div id="slideshow" class="slideshow" style="width: 790px; height: 198px;">
      <div id="slideshow-container">
          <div class="slide">
              <a class="gensmall" href="urlurlurl"><img src="imgimg"/></a>
          </div>
                <div class="slide">
              <a class="gensmall" href="urlurlurl"><img src="imgimg"/></a>
          </div>
          <div class="slide">
              <a class="gensmall" href="urlurlurl"><img src="imgimg"/></a>
          </div>
          <div class="slide">
              <a class="gensmall" href="urlurlurl"><img src="imgimg"/></a>
          </div>
          <div class="slide">
              <a class="gensmall" href="urlurlurl"><img src="imgimg"/></a>
          </div>

          <!--Vous pouvez ajouter autant de slides que possible avec le template suivant :
             
              <div class="slide">
                  --- votre contenu ici ---
              </div>    -->
    </div></div>
  </td></tr> <tr>
    <td valign="bottom"><br>
        <!-- BEGIN switch_user_logged_in -->

puis tu copie/colle cette partie dans ta feuille de style css:

Code:
/* ---- SLIDESHOW ANNONCE ---- */


    .slideshow,
    .slide {
        width: 790px;
        height: 198px;
       
    }

    .slideshow {
        margin: 0;
        overflow: hidden;
      height: 198px;
  width: 790px;
        background-color: #c29751; /* la couleur de fond de la slide */
      border: 4px solid #c29751; /* la bordure */
      border-radius:5px; /* l'arrondi */
 -moz-box-shadow: 0px 0px 2px #c29751;
-webkit-box-shadow: 0px 0px 2px #c29751;
box-shadow: 0 0 0px, 0 0 20px #c29751 inset; /* l'ombrage */
-htm-box-shadow: 0px 0px 2px #c29751;
-o-box-shadow: 0px 0px 2px #c29751;
    }

    .slideshow div {
        position: relative;
        top: 0;
        left: 0;
    }
     
    .slide {
        margin: 0;
        overflow: auto;
     
        display: inline-block;
        vertical-align: middle;
         
        text-align: center;
        color: white;
    }

    .slide p {
        margin: 10px;
        text-align: justify;
    }
/* fin slideshow */

Enfin, dans la parties modules, gestion des pages javascript, créée une nouvelle page java que tu nommeras slideshow et que tu rendras active sur "toutes les pages"
tu c/c ensuite ce code

Code:
$(function () {
    //VARIABLES MODIFIABLES
    var delaiSwitch    = 5000;                    // Délai (en ms) d'affichage d'un slide
    var delaiTransition = 1000;                    // Délai (en ms) de l'animation de transition
    var direction      = 'left';                  // Sens (left ou right) du défilement
    var idSlideshow    = '#slideshow';            // ID du slideshow
    var idContainer    = '#slideshow-container';  // ID du container
 
    //VARIABLES SYSTEME
    var slideshowWidth  = parseInt($(idSlideshow).css('width'));
    var slideshowHeight  = parseInt($(idSlideshow).css('height'));
    var nbSlides        = $(idContainer+' > .slide').length;
 
    //ADAPTE LA TAILLE DU CONTENEUR AU NOMBRE DE BLOCS QU'IL CONTIENT
    $(idContainer).css('width', slideshowWidth*nbSlides+'px');

     
    //REDEFINIT LE CONTENU POUR SUPPRIMER LES EVENTUELS ECARTS DUS AUX BORDERS
    if(direction==='right') {
        var decalageLeft = -slideshowWidth*(nbSlides-1);
        $(idContainer).css('left', decalageLeft+'px');
     
        $(idContainer+' > .slide').each(function() {
            var el = $(this).remove();
            $(idContainer).prepend(el);
        }, this);
    } else {
        $(idContainer+' > .slide').each(function() {
            var el = $(this).remove();
            $(idContainer).append(el);
        }, this);
    }
 
    //ADAPTE LA TAILLE DES IMAGES AUX DIMENSIONS DU SLIDESHOW
    $(idSlideshow+' img').css('max-width', slideshowWidth);
    $(idSlideshow+' img').css('max-height', slideshowHeight);
 
    //LANCEMENT DE L'ANIMATION
    setInterval(function() {
        slideshow()
    }, delaiSwitch);
 
    //FONCTION DE DEFILEMENT
    function slideshow() {
        var compteur = 0;      // Compte les slides ayant bougé
     
        if(direction==='right') {
            $(idContainer+' > .slide').animate({left: '+='+slideshowWidth}, delaiTransition, function() {
                compteur++;
             
                // Lorsque le dernier slide à bougé, on crée la boucle
                if(compteur===nbSlides) {
                    var el = $(idContainer+' > .slide:last').remove();
                    $(idContainer).prepend(el);
                    $(idContainer+' > .slide').css('left', '0');
                 
                    compteur = 0;
                }
            });
        } else {
            $(idContainer+' > .slide').animate({left: '-='+slideshowWidth}, delaiTransition, function() {
                compteur++;
             
                // Lorsque le dernier slide à bougé, on crée la boucle
                if(compteur===nbSlides) {
                    var el = $(idContainer+' > .slide:first').remove();
                    $(idContainer).append(el);

                    $(idContainer+' > .slide').css('left', '0');
                 
                    compteur = 0;
                }
            });
        }     
    }
});

et ça devrait fonctionner, sinon, frappe moi  What a Face ou si t'es polie, demande   
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://test-omg.forumgratuit.org

FORT FORT LOINTAIN

annamour
Invité

avatar




Mer 29 Oct - 16:12

bla bla bla test
Revenir en haut Aller en bas

SLIDESHOW INFINI HORIZONTAL TUTO POUR LE KK DU CODAGE JTM BB SHREK.

Voir le sujet précédent Voir le sujet suivant Revenir en haut
Page 1 sur 1

Sujets similaires

-
» Recherche Tuto pour peindre Les guerriers du Rohan
» tuto pour peindre les pillards haradrims
» Tuto pour peindre les morts.
» Tutoriel pour réaliser des brassards
» Tuto pour un socle pour un chassa bomba: la solution

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Test Anna ;) :: 
il était une fois
 :: test, visible pour tous
-