AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


2 résultats trouvés pour auteur_Margii

Profiter de plusieurs bannières (ou bannières aléatoires) - Dim 15 Mai 2011 - 12:19



Salut les membres :) !

Aujourd'hui je vous propose d'installer sur votre forum un système permettant d'avoir plusieurs bannières, changeantes à chaque page que vous visitez (et en actualisant les pages bien sûr).

Tout d'abord rendez-vous dans votre panneau d'administration puis dans la gestion des images.
(Panneau Ad. > Affichage > Gestion des images > Mode avancé)
Vous placerez la première bannière que vous aurez faite dans 'logo du forum'.

Ensuite, rendez-vous dans la gestion des pages HTML.
(Panneau Ad. > Module > Gestion des javascripts -tout en bas-)
Assurez-vous d'avoir activé vos javascript.
Créez un nouveau javascript et mettez-y comme titre 'Bannière Aléatoire'. Choisissez le placement "Sur toutes les pages".
Ensuite collez-y ce code :

Code:
$(function(){

  var banner = new Array();

  banner[0] = "URL IMAGE 1";
  banner[1] = "URL IMAGE 2";

  $("#pun-logo img,#i_logo,#logo img").attr('src', banner[Math.floor(Math.random()*banner.length)]);
});


L'url de l'image de "banner" 0 devra être celle de votre première bannière. Quant à l'url de "banner" 1, elle devra être votre deuxième bannière. Personnellement je vous conseil de faire les bannières de la même tailles, comme montrées dans l'exemple.

Vous pouvez bien sûr rajouter des bannières, il vous suffit de copier ce code :
Code:
banner[X] = "URL IMAGE";

En remplaçant X par le numéro de la bannière moins 1. Donc le X sera 2 pour la troisième bannière, le X sera 3 pour la quatrième bannière et ainsi de suite.

Vous pouvez bien entendu placer autant de bannières que vous voulez ! Vous pourrez bien entendu modifier les URLs comme bon vous semble. Enregistrez votre javascript et ce sera bon !

Si vous avez des questions, n'hésitez-pas ^^

Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^

Soulmate!

Images aléatoires (ou rotateur d'image) - Dim 18 Jan 2009 - 14:34


Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
Lien pour comprendre pourquoi le contenu n'est pas sous hide


Images aléatoires (ou rotateur d'image)



Edit Responsable (Onyx) : Le sujet étant devenu désuet, l'astuce a été remplacée par celle sur les bannières de Margii et adaptée pour fonctionne pour n'importe quelle image.




Salut !

Il y eu des demandes pour un rotateur d'images , c'est à dire une insertion d'image qui change à chaque fois que la page est actualisée. Cette astuce est pour vous permettre d'atteindre ce résultat.


Étape 1


Allez où vous voulez mettre votre image aléatoire et mettez-là comme cela :
Code:
<img src="url de image de base" alt="description de l'image" id="IDIMAGE" />


url de image de base = L'url de l'image de base de votre image.
description de l'image = Description de l'image pour les personnes avec handicaps visuels.
IDIMAGE = Id de l'image qui va servir à sélectionner l'image dans le javascript.

C'est tout pour cette étape ~


Étape 2


Rendez-vous dans la gestion des javascripts :
(Panneau Administration > Modules > Gestion des javascripts)

Assurez-vous d'avoir activé vos javascript.

Créez un nouveau javascript et mettez-y un titre comme 'Image aléatoire'. Choisissez le placement "Sur toutes les pages".

Ensuite collez-y ce code :
Code:
$(function(){

  var image_aleatoire = new Array();

  image_aleatoire[0] = 'URL IMAGE 1';
  image_aleatoire[1] = 'URL IMAGE 2';


  var random = image_aleatoire[Math.floor(Math.random()*image_aleatoire.length)];

  $('#IDIMAGE').attr('src', random);
});


L'url de l'image de "image_aleatoire" 0 devra être celle de votre première image.
Quant à l'url de l'image de "image_aleatoire" 1, elle devra être votre deuxième image.
Personnellement je vous conseille de faire des images de la même taille.
Le IDIMAGE est à remplacer par l'id de l'image que vous avez installée sur votre forum/site.

Vous pouvez bien sûr rajouter des images, il vous suffit de copier ce code :
Code:
image_aleatoire[chiffre] = 'URL IMAGE';


Et de le placer en-dessous de "image_aleatoire" 1.

N'oubliez surtout pas de modifier le chiffre, si deux images ont le même chiffre entre crochets ça risquerai de ne pas marcher.
Vous pouvez bien entendu placer autant d'images que vous voulez
Enregistrez votre javascript et ce sera bon !

Enjoy!

Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^


Revenir en haut

La date/heure actuelle est Jeu 28 Mar 2024 - 17:11