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. Dans le cadre de
cette fiche, on considérera qu’il s’agit d’un dossier nommé random
placé dans le répertoire de votre thème. Chaque fois que votre visiteur
rechargera la page une nouvelle image s’affichera. Dans le cadre de cette
fiche, on considérera que vos images et le script se trouvent dans un dossier
nommé random placé dans le répertoire de votre thème.
Une image de fond dans un élément de votre page
Visible par exemple pour le header du thème Alto Plus Js sur le
blog de démonstration de themes.dotaddict.org. Dans
style.css placer dans le bloc souhaité :
background : transparent url(random/rotator.php) no-repeat center center;
Une image dans la page
Dans vos fichiers de template .html placer à l’endroit où vous
souhaitez voir apparaître cette image aléatoire :
<img src="{{tpl:BlogThemeURL}}/rotator.php" alt="description rapide de l’image" />
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. Il vous suffit de renommer le fichier rotate.txt lié
dans l’article en rotator.php pour appliquer la méthode ci dessus.
Un script amélioré, gérant les textes alternatifs et la possibilité d’appeler
plusieurs images différentes dans la même page existe aussi[1], du
même
auteur. 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 ?
Notes
[1] mais incompatible avec une arrière-plan css
Commentaires
J'adore ce genre de truc ! chic chic je vais encore retoucher mon template (occupation favorite des nuits où je sais pas quoi foutre)
Je n'ai qu'un mot à dire: BRAVO BRAVO!!!
J'ai utilisé ce script pour mon site, carrément génial!!!
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.
Bonjour, pouvez me dire comment faire fonctionner rotator.php avec le theme kubrick? d'avance merci. Séb
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.
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.
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...
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
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.
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.
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 !!
Aktarus, le problème de Gunter a été résolu sur le forum : il s'agissait d'un chemin mal renseigné.
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. ;-)
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/
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!!!
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 ;-)
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
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...)
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 :(
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 ?
Je cherche un tutoriel pour réaliser une image qui pourra "se répéter sans raccords".
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
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
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.;-)
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
je dois être complètement con mais avec ces codes je me retrouve avec des superpositions d'images...
tout se passe là.
Dans le top ? Sur mon Firefox, image fixe, pas de superposition.
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é.
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 ?
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
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.
Salut,
Je n'arrive pas utiliser ce script. J'ai le même soucis que bH!L... ça ne fait que du blanc. :(
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.
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
Où obtient-on le fichier rotator.php ?
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 ?
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
ca marche nickel, merci !
Merci DeZain pour cette info de luxe, cela fonctionne très bien avec ta méthode !