Tutoriel gradualfader

par Sallie Ven 22 Juil 2011 - 17:33

Bonjour.

Je veux faire un effet gradualfader sur mon forum et j'ai donc chercher des tutoriels. J'en ai testé beaucoup mais aucun ne marche sur mon forum. J'aimerais savoir si quelqu'un possède un effet gradualfader qui marche?

Merci d'avance.

par demeter1 Ven 22 Juil 2011 - 18:27

Non testé avec la nouvelle fonctionnalité que FA nous offre mais voici la méthode que j'ai appliqué sur un de mes forums. J'ai hébergé le fichier chez archive host, cela vous permettra de sauter une étape (bon rien ne vous empêche d'héberger le script dans le module javascript de fa et de modifier l'adresse du fichier js )

Étape 1: Rendez-vous dans la section template de votre panneau d'administration (PA>onglet affichage>section template tout en bas puis "général"). Ouvrez le template "overall_header" et cherchez ce passage( CTRL+F pour rechercher):

Code:: <head>

Juste après cette portion de code, collez ceci:

Code:: <script type="text/javascript" src="http://sd-2.archive-host.com/membres/up/22406661265772126/gradualfader.js"></script>

Validez puis publiez.

Étape 2: Ouvrez à présent le template "overall_footer" et recherchez ce passage (CTRL+F pour rechercher):

Code:: </body>

Juste avant cette portion de code, collez ceci (c'est ce qui permettra d'activer le script):

Code:: <script type="text/javascript"> gradualFader.init() //activate gradual fader </script>

Validez puis publiez.

Étape 3: Si vous avez correctement suivi les instructions, le script fonctionne maintenant. Il suffit de mettre une class à votre image:

Code:: : <img src="url de l'image" class="gradualfader">

C'est toujours cette class qu'il faut utiliser. Si vous en avez déjà une, utilisez un span:

Code:: <span class="gradualfader"><img src="url de l'image" class="votre seconde class"></span>

Enfin, pour modifier les variables, rien de plus simple. Dans votre script, trouvez ce passage, il est tout en haut:

Code:: gradualFader.baseopacity=0.4 //set base opacity when mouse isn't over element (decimal below 1) gradualFader.increment=0.2 //amount of opacity to increase after each iteration (suggestion: 0.1 or 0.2)

En modifiant la première ligne et en lui donnant une valeur décimale plus grande, comme 0.6 par exemple, votre image sera moins transparente lorsqu'on ne passe pas la souris dessus. Pour la seconde ligne, il s'agit de la vitesse à laquelle le fond se fait lorsqu'on passe la souris sur l'image. En mettant 0,1, ce sera plus rapide.

par Sallie Ven 22 Juil 2011 - 19:49

Han sa marche!!!

Merci beaucoup ^^

par demeter1 Ven 22 Juil 2011 - 20:23

De rien Sallie.

Tutoriel gradualfader

Tutoriel gradualfader

Re: Tutoriel gradualfader

Re: Tutoriel gradualfader

Re: Tutoriel gradualfader