Jump to content

(RESOLU) Fond qui change après chaque actualisation

omacom

By omacom
in Modules et thèmes gratuits

 Share

Recommended Posts

Melki-Tsedeq Newbie

Melki-Tsedeq

Posted
Posted

Bonjour Omacom

Je pense que cela n’est pas possible en code CSS.
Il est nécessaire t’utiliser du PHP ou JavaScript pour rendre l’image aléatoire.

Exemple en PHP 

<?php
  $imgs = array('01.jpg','02.jpg','03.jpg'); 
  $randBg = $imgs[rand(0,count($imgs)-1)];
?>
<body style="background: url(<?php echo $randBg; ?> );">



Exemple en JavaScript

[removed] 
<!-- 
var tab = new Array("01.jpg","02.jpg","03.jpg"); 

var n = parseInt( Math.random() * tab.length) 
while (isNaN(n)) { 
n = parseInt( Math.random() * tab.length) 
} 

[removed]("<body background='chemin_du_repertoire/repertoire_image/" + tab[n] + "' alt='Image aléatoire'>" ); 
//--> 
[removed]


Voila c'est tout...!

Cordialement.
Melki-Tsedeq

Link to comment
Share on other sites
Melki-Tsedeq Newbie

Melki-Tsedeq

Posted
Posted

Bonjour Omacom

Je vais être gentil et te prendre par la main pour te montrer le chemin.

Comme tu le souhaité en CSS, j’ai donc fais un mix.
Il faut pour cela éditer le fichier header.tpl qui se trouve dans le dossier de ton Thème et remplacer le body par celui-ci :

Remplacer

<body {if $page_name}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if}>


Par (J’ai joint le script en txt)

<(script type="text/javascript")>
   var fondListe=['1','2','3'];
   [removed]('<body class="fond' + fondListe[Math.floor(Math.random()*fondListe.length)] +'"{if $page_name}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if}>');
<(/script)>


J’ai ajouté des guillemets dans la balise script, sinon ça ne passe pas sur le forum, pense à les enlever.
Il faut aussi replacer [removed] par : document . write sans les espaces. ça ne passe pas aussi sur le forum.

Il faut également éditer le fichier global.css et rajouter juste au-dessus de body ces quelques lignes :

.fond1 { background: #ffffff url('../img/01.jpg') no-repeat scroll center top; }
.fond2 { background: #ffffff url('../img/02.jpg') no-repeat scroll center top; }
.fond3 { background: #ffffff url('../img/03.jpg') no-repeat scroll center top; }


Voila c’est tout…!

Il faudra que tu pense à mettre la main à la pâte ou dans le cambouis comme on dit, car on ne pourra pas toujours coder à ta place.

Je l’ai mis en exemple sur : Boutique Sexy Absolue
F5 et comme par magie l’image change…

Cordialement.
Melki-Tsedeq

script.txt

Link to comment
Share on other sites
omacom Newbie

omacom

Posted
  • Author
Posted

Tes géant et merci pour l'aide, désolé je ne suis pas un Webmaster 100% Ready mais Webesigner pas trop complet JAVA
le probleme c que sa ne passe pas correctement chez moi peut tu Monsieur Melki m'envoyez les balise sans passé par le forum car je suis aveugle JAVA et possible que les guillemets que ta 'jouter y'a une ou deux que je ne vois pas correctement
1 milliard de merci si tu complète ton aide et tu m'envois moi mail a ([email protected])

Link to comment
Share on other sites
Melki-Tsedeq Newbie

Melki-Tsedeq

Posted
Posted

Bonjour Omacom

J’ai joint le script en txt sur le poste au-dessus afin que cela soit utile à ceux qui le souhaites.

Ajouté des guillemets dans la balise script je parlais de la balise (l’ouverture et la fermeture de la balise script) mais bon voila, la tu ne devrais pas avoir de problème.

Et s’il te plaît ne m’appelle pas Monsieur je suis peut-être plus jeune que toi ;-)

Cordialement.
Melki-Tsedeq

Link to comment
Share on other sites
omacom Newbie

omacom

Posted
  • Author
Posted

Tes géant et mon frére tu me sauve peut a peut sans oublier tes 2 milliard merci
le probleme c que sa ne marche pas possible le CSS a été modifier dans le forum peut tu mettre a jour le fichier TXT CSS en ajoutant la balise CSS j'utlise prestashop 1.3 default template.
désolé je suis vraiment pas trop avancé.

Link to comment
Share on other sites
Melki-Tsedeq Newbie

Melki-Tsedeq

Posted
Posted

Bonjour Omacom

Il faut juste Remplacer

<body {if $page_name}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if}>


De ton header.tpl par le script.

Puis ajouté le code css comme ceci dans le global.css comme indiqué plus haut.

.fond1 { background: #ffffff url('../img/01.jpg') no-repeat scroll center top; }
.fond2 { background: #ffffff url('../img/02.jpg') no-repeat scroll center top; }
.fond3 { background: #ffffff url('../img/03.jpg') no-repeat scroll center top; }


Il faut évidement que tes images de fond soit dans le dossier img qui ce trouve dans le dossier de ton Thème.

Si cela ne fonctionne pas, je ne peux plus rien pour toi.

Cordialement.
Melki-Tsedeq

Link to comment
Share on other sites
omacom Newbie

omacom

Posted
  • Author
Posted

Merci mais vraiment je ne sait pas pour quoi sa marche pas chez moi et sa fini avec une erreur de CSS
regarde les attachement les images sont bien respecter dans dans le fichier img theme...
Mais rien qui ne figure dans le front ..
Merci de nous aider un peut plus car c important cette méthode la ...

34721_a9V5ABRjqPg39cZJBnCx_t

34722_aQZVn7JoP0zJ6E5BwtbP_t

34723_qIBpCUbUoPP6lkwQ2CmY_t

Link to comment
Share on other sites
Melki-Tsedeq Newbie

Melki-Tsedeq

Posted
Posted

Bonjour Omacom

Il faut bien lire ce que je dis sinon ça ne marche pas

Bonjour Omacom
Il faut également éditer le fichier global.css et rajouter juste au-dessus de body ces quelques lignes :
.fond1 { background: #ffffff url('../img/01.jpg') no-repeat scroll center top; }
.fond2 { background: #ffffff url('../img/02.jpg') no-repeat scroll center top; }
.fond3 { background: #ffffff url('../img/03.jpg') no-repeat scroll center top; }




Exemple :
* {
   padding:0;
   margin:0;
}
.fond1 { background: #ffffff url('../img/01.jpg') no-repeat scroll center top; }
.fond2 { background: #ffffff url('../img/02.jpg') no-repeat scroll center top; }
.fond3 { background: #ffffff url('../img/03.jpg') no-repeat scroll center top; } 
body {
   font-size: 11px;
   font-family: Verdana, Arial, Helvetica, Sans-Serif;
   color: #D7008E;
   text-align:center;
}



Il faudra que tu pense à te documenté sur les codes car je vois mal comment tu va faire surtout avec une boutique en ligne c’est très risqué de faire des modifications sans savoir ce que tu fais. Tu peux très vite te retrouvé avec des bugs et des problèmes de sécurité.

Cordialement.
Melki-Tsedeq

Link to comment
Share on other sites
omacom Newbie

omacom

Posted
  • Author
Posted

Merci mon amis pour le conseil et je vous confirme que je fait mon MAX néanmoins voila pat-a-pat ce que j'ai fait un un magasin vide nouveau mais sa marche pas toujours es que y'a autre chose qui m’échappe
voir que le sujet tiens importance merci de nous aider un peut plus même si il-y d'autre méthode que le mix CSS et JAVA je prend juste pour le fait d'avoir de jolie fond qui change a chaque actualisation
Merci a nouveau pour ta patience avec nous.

34732_NjLzf8zVeHI68FsmW1H8_t

34733_GZZKsoeKlF0cAjwgo1PK_t

34734_69gwRkKEW5OjW6PuJJ0U_t

Link to comment
Share on other sites
Melki-Tsedeq Newbie

Melki-Tsedeq

Posted
Posted

Bonjour Omacom

Il faut enlever le background-color: white de votre body.
D’ou vient t’il ? sa n’apparait pas dans le code que je t’ai donné en exemple.

S'il te plait suit un peu ce que je te dis (Merci).
Ou branche toi au Sud car là t’es à l’Ouest…

Cordialement.
Melki-Tsedeq

Link to comment
Share on other sites
omacom Newbie

omacom

Posted
  • Author
Posted

Merci notre chère amis merci Melki-Tsedeq SADIKI

# ffffff le blanc été bien présent que jai crue qu'il fait partie du code
des que je termine le Site je te montre le résultat mais ne moque pas de moi car je suis aveugle coté code
Cordialement.

Link to comment
Share on other sites
Melki-Tsedeq Newbie

Melki-Tsedeq

Posted
Posted

Bonjour @ tous

Il y a eu une erreur dans le code css qui est sur le forum.

Ce qu’il faut changer :

Remplacer :

.fond1 { background: # ffffff url('../img/01.jpg') no-repeat scroll center top; }
.fond2 { background: # ffffff url('../img/02.jpg') no-repeat scroll center top; }
.fond3 { background: # ffffff url('../img/03.jpg') no-repeat scroll center top; }



Par :

.fond1 { background: #ffffff url('../img/01.jpg') no-repeat scroll center top; }
.fond2 { background: #ffffff url('../img/02.jpg') no-repeat scroll center top; }
.fond3 { background: #ffffff url('../img/03.jpg') no-repeat scroll center top; }



Il y a un espace en trop pour la couleur du background.
Je rectifie les autres postes pour ne pas avoir d’erreur.

J’espère que cela fonctionnera pour toi Omacom.

Merci @Maury Girard qui ma contacter par MP pour me dire que lui aussi ne parvenais pas à le faire fonctionné.
C’est de la que j’ai vue d’où venais l’erreur.

@Omacom je ne me moque pas de toi on à tous commencer un jour et on apprend tous les jours.

Et je crois que j’étais sur la même longueur d’onde que toi @l’Ouest.
Car comme toi je suis parfois aveugle avec les codes je n’ai pas vue l’erreur de css sur le forum.

Cordialement.
Melki-Tsedeq

Link to comment
Share on other sites
  • 1 month later...
minimome Newbie

minimome

Posted
Posted
Merci Melki-Tsedeq pour ton code.
Trop bien.

Le code de Melki-Tsedeq en action visible ici

++

DAV


Bonjour,

pas trop envie de me fouler comme mon pseudo prétend l'indiquer... J'aime beaucoup certains templates de ekreasite SAUF la minifiche qui vient quand on passe la souris sur l'image (çà me rend dingue, vraiment). Y-aurait-il moyen de faire que la minifiche (pardon) s'affiche à coté de l'image, bref que l'image reste visible à coté de ses infos?

Merci d'avance, :)
Link to comment
Share on other sites
  • 1 year later...
ILMP Newbie

ILMP

Posted
Posted

Bonjour à tous..

 

Je souhaite créer un block d'images en page d'accueil avec affichage aléatoire.

 

Je m'explique :-)

 

Block contenant 5 images Jpg ou png (Pas de SlideShow) avec un lien pour chaque image

(le block affiche une seule image à chaque fois, pour éviter le chargement des 5 images)

 

 

----------------------------

 

J'ai mis en place ce code src="{$img_ps_dir}logo_{math equation='rand(1,3)'}.png" pour le logo, mais je ne sais pas comment faire la même chose avec des liens différents.

 

Voici le lien http://www.prestashop.com/forums/topic/18098-prestatips-images-et-flash-aleatoire/

 

Merci à vous et bonne journée

 

Matias

Link to comment
Share on other sites
ILMP Newbie

ILMP

Posted
Posted

Merci pour votre réponse !

 

Je pense que ma requête n'a pas ete envoyée dans le bon Topic :-(

 

------

 

Ce que je souhaite faire c'est

 

Mettre à la place du Slideshow de la page d'écueil, un bloc affichant 3 images en mode aléatoire avec un lien pour chacune pointant vers des produits ou catégories. ((Sans Slide)

 

Peut etre c'est pas tres compliqué à mettre en place, mais malgré ma bonne volonté ça reste compliqué (Pour moi)

 

 

Peut être ça peut vous aider http://www.prestashop.com/forums/topic/18098-prestatips-images-et-flash-aleatoire/

 

Merci à vous !

Link to comment
Share on other sites
Guest
This topic is now closed to further replies.
 Share
Go to topic listing
×
×
  • Create New...