Mini module slider

aiglobulles Membre non connecté

Booster Missile

Le 15/04/2013 à 15h28

Reprise du message précédent

Pour installer protoshow. Dans l'exemple ci-dessous, j'ai copié le contenu du script dans un dossier nommé "protoshow" à la racine de mon thème.

dans la partie "head" (header.tpl) tu ajoutes:

appel du css:

Code HTML :

 
<!-- BEGIN PROTOSHOW CSS -->
        <link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/protoshow/css/protoshow.css" type="text/css" media="screen, print, handheld" />

Toujours dans la partie "head" l'appel du script:

Code HTML :

 
        <!-- BEGIN PROTOSHOW SCRIPT -->
        <script type="text/javascript" src="{PATH_TO_ROOT}/templates/{THEME}/protoshow/protoshow.js"></script>
        <script language="javascript">
        Event.observe(window, "load", function() {
              // reference ID of our show container  
              new protoShow('myshow', {interval:3000,progressTimer:true,pauseOnHover:true,captions:true,controls:false,navigation:false,transitionType:"slide"});
        });
        </script>

Ci-desssus, le slide qui sera appelé (car on peut en mettre plusieurs par pages) se nomme "myshow". Tu peux paramétrer les options en false/true selon que tu souhaites les afficher ou non. L'interval est le nombre de milliseconde d'affichage de chaque slide.

Ensuite, dans le corps de ta page (balise "body")

tu crée le div avec le même identifiant que celui appelé dans le script ci dessus:

Code HTML :

 
                       <div id="myshow" class="protoshow">
                        <ul class="show">
                                                      <li class="slide" data-slide-interval="">
                                                          <img src="/upload/imgp3929.jpg" class="slides" alt="Les wheelkom à l'anneau du Rhin" />
                                                      </li>
                                                </ul>
                                    </div>

le div est crée. Sa class est stylisée dans protoshow.css. Dans chaque entrée de la liste, tu places une image. L'attribut "alt" te permet d'afficher un petit text descriptif comme ICI (désolé pour la pub

)

Je te conseille de placer le dernier code et de l'adapter à ton site) dans le menu que tu as crée en l'éditant avec la balise html car le bbcode ne fonctionnera pas.

Voilà, bon courage l'ami

Répondre

Vous n'êtes pas autorisé à écrire dans cette catégorie

aiglobulles Membre non connecté

lobab Membre non connecté