Afficher aléatoirement une image

Voici un petit tutoriel pour vous aider à mettre en place l'affichage d'une image choisie aléatoirement dans le dossier de votre choix. Chaque fois que votre visiteur rechargera la page une nouvelle image s'affichera.

Une image de fond dans un élément de votre page

Visible par exemple pour le header du thème Soupe Opéra de mon blog personnel. Dans style.css placer dans le bloc souhaité :

background : transparent url(chemin_vers_random/rotator.php) no-repeat center center;

Une image dans la page

Dans le fichier template.php placer à l'endroit où vous souhaitez voir apparaître cette image aléatoire :

<img src="http://chemin_complet_vers_votre_dossier/rotator.php" alt="" />

Comme n'importe quelle autre image, celle-ci peut servir de lien vers ce que vous voudrez. La galerie complète par exemple...

Ce script a été écrit par Dan P. Benjamin. Tous les détails de la version et instructions complètes pour tous les usages qui peuvent en être faits dans l'entête du fichier rotator.php.

Alors... Heureux ?

Afficher aléatoirement une image

Publication : mercredi 1 décembre 2004 ∗ mise à jour : jeudi 5 mai 2005
Auteur : Kozlika d'après Dan Benjamin
Rubrique : Paillettes et fanfreluches
URLs de cet article :
- son lien permanent

Trackbacks

Si vous ne savez pas ce que c'est, voici une petite explication.

1. Le mercredi 29 mars 2006 à 23:58, de Carel

Rotator

Apr?avoir vu en action les scripts de Dan Benjamin (ici et l?et les implantations faites par Kozlika et d'autres je me suis dit qu'une interface (pour g?r les .ini et autres trucs de configuration) serait la bienvenue. Du coup j'ai ?it

Commentaires

1. Le vendredi 18 février 2005 à 17:49, par Mitternacht

J'adore ce genre de truc ! chic chic je vais encore retoucher mon template (occupation favorite des nuits où je sais pas quoi foutre)

2. Le samedi 19 mars 2005 à 20:29, par nono

Je n'ai qu'un mot à dire: BRAVO BRAVO!!!
J'ai utilisé ce script pour mon site, carrément génial!!!

3. Le lundi 21 mars 2005 à 23:26, par Kozlika

Merci mais les bravos ne sont pas pour moi. Je n'ai fait que réexpliquer la mise en oeuvre d'un code dont l'auteur est Dan P. Benjamin pour A list Apart.

4. Le dimanche 4 septembre 2005 à 22:39, par sebix

Bonjour, pouvez me dire comment faire fonctionner rotator.php avec le theme kubrick? d'avance merci. Séb

5. Le lundi 10 octobre 2005 à 12:47, par Aktarus

C'est sympa comme script. Ceci dit, j'aimerais aller un peu plus loin et je voudrais pouvoir conserver plusieurs liens à des endroits spécifiques de l'image au lieu de n'avoir qu'un seul lien qui prend toute la largeur de l'image. Je m'explique, j'ai créé 4 graphismes différents mais qui contiennent tous le même texte au même endroit. Et j'ai des liens qui renvoient à des pages différentes.

Questions :

1. est il possible de créer plusieurs liens à des endroits spécifiques pour chaque image et si oui comment faire ?

2. variante : est il possible (vu que mes liens sont toujours identiques et au même endroit malgré le changement d'image) de créer des boutons qui se placent au dessus de l'image chargé par le script ?

Merci aux Xmen et Xwomen qui pourront m'apporter un peu de lumière sur ces questions qui à mon avis en interesseront plus d'un. Cordialement, Aktarus.

6. Le dimanche 16 octobre 2005 à 22:38, par Gunter

Bonjour,

après avoir suivi les explications voila ce que j'indique dans mon template.php

#header { background: url(<?php dcInfo('theme'); ?>/rotator.php) no-repeat bottom center; }

et rien ne s'affiche....

alors que si je tape directement l'url de rotator.php, mes images apparaissent bien aleatoirement....

Je n'arrive pas à voir ce qui bloque, si quelqu'un pouvais m'indiquer une piste ??

Merci d'avance.

7. Le dimanche 16 octobre 2005 à 22:45, par Kozlika

Houlala Gunter, cépaça du tout. Le code que tu essaies ne peut en aucun cas fonctionner, tu utilises une syntaxe css dans un document html, un peu comme si tu parlais iroquois à un esquimau . Encore que dans ce cas, sait-on jamais, mais les humains ont des capacités supérieures aux machines ;-)

Pour insérer une image aléatoire dans un document php il faut lui parler dans une langue qu'il comprend, soit : du php ou du html. La syntaxe t'en est donnée en deuxième partie de ce tuto. Allez, on efface tout et on recommence.

Prends une grande inspiration et...

8. Le dimanche 16 octobre 2005 à 23:12, par Gunter

Merci de la réponse, mais même quand je tente via le css, cela ne semble pas fonctionner, quand à la deuxième méthode pouiou ben je vais regarder ca à tete reposer car je sens que je tourne en rond sur un truc un peu "bete".. ;op

bonne soirée

9. Le dimanche 16 octobre 2005 à 23:44, par Gunter

Alors j'ai fais comme sur votre site web :
#header { background: transparent url(themes/kubrick/rotator.php) no-repeat bottom center; }
et ben rien pourtant la meme chose sur votre site avec la balise #top fonctionne, alors bon comprends plus :-(

Je retenterais demain après une petite nuit de sommeil.

10. Le mardi 18 octobre 2005 à 11:51, par Aktarus

Mon cher Gunter, je me premets de te donner le conseil suivant : Va voir sur l'article "original" de Dan Benjamin qui est l'auteur de ce script et suis pas à pas ce qu'il te dit. Attention c'est en anglais :

http://www.alistapart.com/articles/betterrotator/

N'utilise pas ce qui est écrit plus haut et normalement ca devrait bien se passer. Télécharge le fichier "zip archive", tout est dedans. Dans ton fichier PHP tu devrais avoir uniquement la chose suivante :

<?php include('rotator.php'); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <body>

<p>Reload to see a random image.</p>

<?php showImage(); ?>

</body> </html>

Dis moi si ça marche !! Aktarus.

11. Le mardi 18 octobre 2005 à 12:05, par Aktarus

METTRE PLUSIEURS LIENS SUR L'IMAGE.

C'est possible. Apres quelques galères, j'ai réussi à mettre des liens à différents endroits de l'image chargée aléatoirement. Ceci est visible sur la page d'accueil de mon site (une fois sur la page, réactualisez le site et l'image change. Il n'y a que 4 images alors il se peut que la même image revienne plusieurs fois d'affilée) :

http://web.design.creation.free.fr/azurid/

A l'origine, le script permet de mettre un unique lien sur la totalité de l'image. Mais grâce à l'utilisation de feuille de style ".CSS", on peut créer plusieurs liens et les placés où l'on veut. Il doit même être envisageable de placer des liens à différents endroits en fonction de la nature de l'image chargée. Bref, si cela intéresse quelqu'un, signalez vous. Aktarus !!

12. Le mercredi 19 octobre 2005 à 10:20, par Kozlika

Aktarus, le problème de Gunter a été résolu sur le forum : il s'agissait d'un chemin mal renseigné.

13. Le mercredi 19 octobre 2005 à 14:00, par Aktarus

OK Kozlika,

je suis nouveau sur le site et je ne savais pas qu'il y avait un forum pour résoudre les problèmes. ;-)

14. Le dimanche 30 octobre 2005 à 20:27, par Aktarus

METTRE PLUSIEURS LIENS SUR L'IMAGE chargée par rotator !!!

Juste pour dire que le lien qui montre l'exemple a changé. L'exemple est maintenant visible sur la page d'accueil de mon site (une fois sur la page, réactualisez le site et l'image change) :

http://www.azurid.com/

15. Le vendredi 17 février 2006 à 08:20, par toujoursplushaut

Bonjour, c'est exactement ce que je recherche mais je n'arrive pas à trouver un fichier "rotator" ! J'ai bien réussi à trouver un script mais je ne sais pas quoi en faire. Tous les autres plugins que j'ai installé sont en fichier, que dois-je donc faire d'un script?

En tous cas merci beaucoup pour tous ces précieux renseignements, sans ceux-ci j'en serais resté au thème par défault!!!

16. Le vendredi 17 février 2006 à 14:43, par Pep

toujoursplushaut >

<pénible>un script est déjà un fichier, hein</pénible>

Si tu parles d'une archive, tu la peux récupérer là. Néanmoins, ce ne fait toujours pas d'installation automatique.

En fait, il te suffit de copier le script rotator.php dans le répertoire qui contiendra les différentes images que tu souhaites afficher aléatoirement. Ce n'est pas plus compliqué que ça ;-)

17. Le mardi 4 avril 2006 à 21:45, par Maxim

J'ai mis beaucoup de temps avant de comprendre que les liens vers le script ne sont plus valable à cause d'un nouvel article. Voila l'ancien

18. Le mardi 11 avril 2006 à 16:24, par baldino

ce petit script est génial ! MAIS !!!! pourquoi lorsque je mets dans mon template:

<img src="http://jonb.free.fr/dotclear/themes/baldino/rotator.php" alt=""/> <img src="http://jonb.free.fr/dotclear/themes/baldino/rotator.php" alt=""/> <img src="http://jonb.free.fr/dotclear/themes/baldino/rotator.php" alt=""/> <img src="http://jonb.free.fr/dotclear/themes/baldino/rotator.php" alt=""/>

Ca m'affiche 4 fois la même image !! Quelqu'un sait quoi faire ? (j'ai déjà essaye de copier le fichier 4 fois et de changer le nom, sans succès...)

19. Le jeudi 4 mai 2006 à 01:31, par dam

Question un peu hors sujet, mais j'aimerai savoir si quelqu'un a un tuto pour créer des motifs répétés. J'ai chercher mais je ne trouve rien :(

20. Le jeudi 4 mai 2006 à 22:57, par Kozlika

Tu parles d'un tutoriel pour savoir comment *réaliser* une image qui pourra se répéter sans « raccords » ou comment faire pour qu'un motif se répète ?

21. Le dimanche 7 mai 2006 à 01:05, par dam

Je cherche un tutoriel pour réaliser une image qui pourra "se répéter sans raccords".

22. Le lundi 8 mai 2006 à 16:46, par bH!L

Salut, ça fait un petit moment que j'essai de mettre en place un affichage aléatoire de mon header mais je n'y arrive pas. Alors voilà ce que j'ai fait pour l'instant : j'ai copier le fichier rotator.php dans mon repertoire theme/rougeciel/ et ensuite j'ai copier dans mon fichier style.css la ligne : background : transparent url(chemin_vers_random/rotator.php) no-repeat center center; en remplacant bien entendu "chemin_vers_random" par le nom du fichier où j'ai mis mes différents header. Ce qui donne : url(header/rotator.php) ceci ne fonctionnant pas j'ai essayé de mettre le chemin complet url(http://monsite.blublu/.../.../theme/rougeciel/header/rotator.php) mais ça ne marche toujours pas. Est-ce que j'aurai copier le fchier rotator.php au mauvais endroit ou auriez vous une petite idée du pourquoi du comment de la chose?

Merci d'avance

23. Le mardi 9 mai 2006 à 00:57, par bH!L

Arf je me suis fourvoyé dans mon explication, j'ai bel et bien copier le fichier rotator.php dans le même dossier où se trouve les images à afficher, mais bon ça ne fait pas avancé le schmillblick... ça marche toujours pas

24. Le mardi 9 mai 2006 à 01:56, par Pep

bH!L > Euh... Tu ne disposes que d'une image dans ton dossier apparemment : c'est franchement peu pour l'aléatoire approximatif du rotator.php.;-)

25. Le mardi 9 mai 2006 à 17:32, par bH!L

Huhuhu , pitite explication sinon je sens que je vais passer pour un con, euh enfin un idiot... argh! Non en fait y'en avait plus avant mais je les ai déplacées!!! mais lorsque j'en avait plusieurs rien ne s'affichait, juste du tout blanc...

En tout cas t'as remarque était très juste dans le cas actuel! huhuhu

26. Le vendredi 19 mai 2006 à 20:49, par brol

je dois être complètement con mais avec ces codes je me retrouve avec des superpositions d'images...
tout se passe là.

27. Le vendredi 19 mai 2006 à 21:22, par Kozlika

Dans le top ? Sur mon Firefox, image fixe, pas de superposition.

28. Le vendredi 19 mai 2006 à 23:30, par brol

nan, pas dans le top, dans le leftsidebar.php. je charge une fois la page, c'est bon, je fais une actualisation et pouf j'ai deux images... bien entendu j'ai vidé le cache avant, mais si il faut vider le cache avant de réactualiser la page, ça risque de pas trop me convenir ;-(
bref... je vois pas où j'ai déconné.

29. Le samedi 20 mai 2006 à 00:42, par brol

en fait, je cherche à ce que l'image aléatoire se recadre comme une grande en haut du sidebar de gauche. dans l'idéal : recadrage des images en 141 de haut, 143 de large, centré, pas de répétition. afin que la liste des rubriques soit fixée à une hauteur particulière.

c'est-y seulement possib' ?

j'ai changé quelque trucs, vidé le cache 27 fois, et je n'ai plus de répétition mais ça se cale n'importe comment et ça ne se redimensionne pas.

bref : help ?

30. Le dimanche 28 mai 2006 à 02:47, par bH!L

Bonjour,

je me permet de redemander, si quelqu'un sait comment faire pour afficher un header aléatoire. Mon problème est que après avoir suivi la procédure indiquée ci-dessus, je n'ai aucune image qui s'affiche. Vous pouvez trouvez un lien vers mon blog là et un lien vers mon dossier ou se trouve le random là. voici mon fichier style.css.

Merci d'avance, j'ai essayé mais j'ai échoué... pourtant j'ai plusieurs images à afficher

31. Le lundi 17 juillet 2006 à 20:26, par Fred

Salut, j'ai utilisé ce script qui marche bien pour un de mes sites. J'aimerais savoir s'il existe une version qui permette de faire la même chose non plus avec des images mais avec des animations flash (.swf). Merci par avance. Fred.

32. Le mardi 1 août 2006 à 21:55, par Goudie

Salut,

Je n'arrive pas utiliser ce script. J'ai le même soucis que bH!L... ça ne fait que du blanc. :(

33. Le mardi 15 août 2006 à 09:21, par PointGDit

Bonjour à tous,

Mon but est de pouvoir afficher une vignette aléatoire dans la sidebar de mon blog sous dotclear 125, comme sur la sidebar du blog de Dan Benjamin en bas à droite.

Je rencontre exactement les mêmes soucis que Goudie et bH!L (excellent !). J'ai lu, lu et relu en détail cette page et ses commentaires 10 fois hier, lu, lu et relu la page du développeur et testé, essayé d'installer ce plugin, pendant plus de 6h00 hier sans même parvenir à afficher une seule image.

J'étais content, inutile de le dire...

Même essayé d'installer la solution de Carel : sans mode d'emploi, je ne comprends pas coment ça fonctionne.

Même si je suis débutant en php et css, je suis parvenu à intaller et utiliser de nombreux plugin. Celui-ci sans mode d'emploi clair et détaillé, reste un mystère.

Si j'avais trouvé la solution, j'aurai rédigé illico un mode d'emploi très clair et posté ici, malheureusement, je sèche, et je ne peux utiliser le plugin de mes rêves...

Merci à la communauté dotclear de se mettre en 4 pour fabriquer des outils, plugin. Je pense qu'une amélioration générale des développeurs consiterait à penser aux débutants et à des modes d'emploi adaptés.

34. Le lundi 28 août 2006 à 12:55, par concetion

J'aimerai savoir comment on peut faire pour réactuliser une image !

Je m'explique :

Je propose à mes clients de charger une image sur mon serveur pour quelle apparaissent ensuite sur le site. Cependant lorsqu'il tente de modifier une image, côté prog. c'est bon ! cependant l'affichage reste l'ancienne image t'en que la page n'a pas été réactualiser manuellement ! Merci j'aimerai avoir des réponses !

Cordialement, SC-CONCEPTION

35. Le jeudi 12 octobre 2006 à 11:49, par Bidou

Où obtient-on le fichier rotator.php ?

36. Le vendredi 3 novembre 2006 à 15:52, par dmy

a mon tour de dire que ca ne marche pas chez moi

j'essaie de faire tourner le bandeau en haut de http://blog.dumeny.free.fr/dmy/

il s'agit a l'origine de http://blog.dumeny.free.fr/dmy/themes/default/img/top.png

le fichier rotator est là :http://blog.dumeny.free.fr/dmy/themes/default/rotator.php

quand je teste le index.php qui va avec (http://blog.dumeny.free.fr/dmy/themes/default/index.php) ca m'affiche bien une des 2 images du fichier ini

par contre quand j'appelle le rotator.php, rien ne s'affiche, et quand j'integre la ligne qui appelle rotator.php dans mon css ca me donne un espace blanc, aucune image

le css qui integre l'appel à rotator.php est la

une idee ?

37. Le dimanche 12 novembre 2006 à 17:14, par DeZain

Aprés un bonne recherche, j'ai trouvé !!!

Enfait le lien, c'est pas le bon mais celui la : http://alistapart.com/articles/randomizer

Il faut prendre ce fichier Rotate.txt et le renommer en rotator.php.
Aprés il faut mettre les images au même endroit que rotator.php ou motifier cette ligne $folder = '.'; et mettre à la place du point, le nom du dossier ou il y a les images.

Voila

DeZain

38. Le lundi 13 novembre 2006 à 08:26, par dmy

ca marche nickel, merci !

39. Le samedi 11 août 2007 à 13:08, par Rouquin

Merci DeZain pour cette info de luxe, cela fonctionne très bien avec ta méthode !

Ajouter un commentaire

Note : les commentaires ne sont destinés qu'à éclaircir un point du tuto ou en proposer une amélioration. Si vous cherchez de l'aide, tournez-vous plutôt vers le forum après y avoir effectué une recherche.

Les commentaires pour ce billet sont fermés.

Le petit dotclear illustré