PHPBoost

Support

Téléchargements

Développement

Communauté

Annonces
Question aléatoire

Comment peut-on aider le projet ?
Livre d'or

Par cecileflora

Bonjour la communauté phpboost, très  réactive, un grand merci  a toutes et tous !

Livre d'or

Mini sondage
Etes-vous satisfait du support PHPBoost ?










Résultats

 
Faire défiler des images dans un bloc
 



Nous allons voir comment procéder pour faire des liens défilants en javascript.

Voici les fonctionnalités de ce script:
  • Nombre d'images et de liens illimité
  • Le premier lien est tiré aléatoirement dans la liste, puis la suite s'effectue dans l'ordre d'enregistrement des liens
  • Le temps d'affichage de chaque image est personnalisable


Pour cela nous allons utiliser la fonction récursive suivante qu'on va créer dans le fichier templates/votre_theme/script_annonces.js: voici son contenu:
Code JAVASCRIPT :
//Images
var images = new Array("partenaires1.png", "partenaires2.png");
//Liens
var liens = new Array("http://www.site1.com", "http://www.site2.fr");
//Durée de chaque lien (en secondes)
var duree = new Array(5, 5);
 
var affiche = false;
var numero_lien = 0;
var chemin = '../images/pub/';
 
function AffichePub()
{
    if( !affiche )
    {
        numero_lien = Math.round(Math.random() * (images.length - 1));
 
        document.write('<a href="' + liens[numero_lien] + '" id="pub_liens"><img src="' + chemin + images[numero_lien] + '" alt="lien partenaire" id="pub_images" /></a>');
        affiche = true;
    }
    else
    {
        if( numero_lien == (images.length - 1) )
            numero_lien = 0;
        else
            numero_lien++;
        document.getElementById("pub_images").src = chemin + images[numero_lien];
        document.getElementById("pub_liens").href = liens[numero_lien];
    }
    setTimeout("AffichePub()", duree[numero_lien] * 1000); /* timer x secondes*/
}
 
AffichePub(); 
 


Maintenant nous allons configurer ce script pour qu'il affiche les images et les liens demandés.
Considérons qu'il veuille mettre un lien vers google.fr et un vers phpboost.com. Pour cela il va falloir modifier la ligne 4:
Code JAVASCRIPT :
var liens = new Array("http://www.phpboost.com", "http://www.google.fr");

Ensuite il faut choisir le nom des images associées (ligne 2):
Code JAVASCRIPT :
var images = new Array("phpboost.jpg", "google.png");

Choisissons maintenant le temps d'affichage de chaque image (il faut respecter l'ordre d'enregistrement des partenaires), nous verrons par la suite où enregistrer les images:
Code JAVASCRIPT :
var duree = new Array(5, 3);

Ainsi PHPBoost sera affiché 5 secondes et Google 3 secondes.

Pour rajouter une image, vous l'aurez compris, il suffit d'ajouter un élément à chaque tableau, ainsi si on veut ajouter un lien vers php.net on va procéder comme suit:

Code JAVASCRIPT :
//Images
var images = new Array("phpboost.jpg", "google.png", "php.gif");
//Liens
var liens = new Array("http://www.phpboost.com", "http://www.google.fr", "http://www.php.net");
//Durée de chaque lien (en secondes)
var duree = new Array(5, 3, 10);
 


Il ne reste qu'à enregistrer les images et les envoyer sur votre serveur. Vous pouvez les mettre où vous le désirez, la seule contrainte étant qu'elles doivent toutes être dans le même répertoire. Par exemple si elles sont dans images/pub/ il faut mettre à la variable chemin la valeur suivante (../ sert à remonter d'un répertoire):
Code JAVASCRIPT :
var chemin = '../images/pub/';


Votre script est maintenant prêt à l'utilisation. Nous allons maintenant modifier le bloc choisi pour qu'il s'affiche. Pour cela, aller dans l'administration/contenu/Menu et mettez ce code dans un de vos blocs :

Code HTML :
<script type="text/javascript" src="../templates/votre_theme/pub.js"></script>
        <noscript><a href="http://www.phpboost/"><img src="../images/pub/phpboost.jpg" alt="image" /></a></noscript>


Ce script fait appel à notre fonction d'affichage. Pour les gens qui ont désactivé le javascript (très peu nombreux), nous allons afficher une image par défaut. Dans l'exemple il s'agit de l'image images/pub/phpboost.jpg vers le phpboost.com.

Voilà, il suffit d'enregistrer vos fichiers et de les envoyer (pub.js est à placer dans templates/votre_theme/).

En cas de problèmes, n'hésitez pas à demander de l'aide sur le forum.

Je modifie cette doc. pour vous dire que vous n'etes pas obliger d'utiliser que tu HTML dans votre bloc, le bbcode est aussi utile (pour les liens et les images par exemple).

 
Cette page a été vue 7945 fois
Annonces