Inclure du PHP dans du JS ...

Résolu/Fermé

Mael687 Messages postés 26 Date d'inscription mercredi 23 octobre 2013 Statut Membre Dernière intervention 15 mars 2015 - 3 juil. 2014 à 19:03
JooS Messages postés 2465 Date d'inscription mardi 22 janvier 2008 Statut Membre Dernière intervention 8 juin 2016 - 4 juil. 2014 à 03:44

Bonjour !

Alors voilà, avant, j'avais un script qui envoyait dans ma base de donnée un code du style BELGIQUE32, puis sur ma page, j'affichais en php les 5 derniers codes sous cette forme :

<img src="http://images.habbohotel.com/c_images/album1584/<?php echo $donnees['code']; ?>.gif" style="display: inline-block;" title="ID : <?php echo $donnees['code']; ?>"" />

Mais afin de rendre mon système plus performant, je voudrai rajouter la possibilité
de faire défiler d'anciennes images, par exemple les 10 dernières, mais pour ne pas avoir un gros pavé, un script avec une flèche / un "onmousehover" serait tellement plus joli !

J'ai fait quelques recherches et j'ai trouvé ce code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
 
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />

<style type="text/css">
<!--
/* style conteneur pour affichage horizontal */
.conteneurH{
 width: 200px;;
 height: 80px;
 overflow: auto;
 border: ridge 2px #AAAAAA;
 padding: 5px;
}
 
/* style images pour affichage horizontal */
.horizontal{
 margin-left: 40px;
 margin-right: 40px;
 margin-top: 0px;
 margin-bottom: 0px;
 height: 50px;
 vertical-align: middle;
}
 
.btOver{
 font-weight: bold;
 cursor: pointer;
}
 
.btOut{
 font-weight: normal;
}
 
//-->
</style>

<script type="text/javascript">
<!--
//Tableau des images
var mesImages = new Array();
mesImages[0] = "/monimage1";
mesImages[1] = "etc...";
mesImages[2] = "";
mesImages[3] = "";
mesImages[4] = "";
mesImages[5] = "";
mesImages[6] = "";
 
function diaporama()
{
 var i, elmt, c;
 
 c = document.getElementById("idConteneur");
 
     c.className = "conteneurH";
     elmt = document.createElement("nobr"); //ajout de la balise nobr pour éviter un retour à la ligne
     c.appendChild(elmt);
     c = elmt;
 
 
 for (i=0; i<mesImages.length; i++)
 {
   elmt = document.createElement("img");
   elmt.id = "idImage"+this.i;
   elmt.src = mesImages[i];
 
   elmt.className = "horizontal";
 
   c.appendChild(elmt);
 }
 
}
 
/************************************************/
var delai = "20", pas=5;
 
var timer=null;
var sW, cW, sL;
var obj = null;
var sens;
 
function timeScroll()
{
  sL = sL+sens;
  if (sL<=0 || sL+cW>=sW)
  {
    clearInterval(timer);
    timer = null;
  }
  else
    obj.scrollLeft = sL;
}
 
function scroll(bt, ev)
{
  obj = document.getElementById("idConteneur");
  //alert(obj.offsetWidth+" "+obj.scrollWidth+" "+obj.clientWidth+" "+obj.scrollLeft);
  sW = parseInt(obj.scrollWidth);
  cW = parseInt(obj.clientWidth);
  sL = parseInt(obj.scrollLeft);
 
  if (obj!=null && timer==null)
  {
 
    bt.className = "btOver";
 
    if (bt.id=="idGauche")
    {
     if (sL!=0)
     {
       sens = -1*pas;
       timer = setInterval("timeScroll()",delai);
     }
    }
 
    if (bt.id=="idDroite")
    {
     if (sL+cW<sW)
     {
       sens = 1*pas;
       timer = setInterval("timeScroll()",delai);
     }
    }
  }
}
 
function stopScroll(bt)
{
 bt.className = "btOut";
 
 clearInterval(timer);
 timer = null;
 
}
 
//-->
</script>

</head>
 
<body onload="diaporama()">
 
<div id="idConteneur"></div>
<div>
<span class="btOut" id="idGauche" onmouseover="scroll(this)" onmouseout="stopScroll(this)"> Gauche </span>
<span class="btOut" id="idDroite" onmouseover="scroll(this)" onmouseout="stopScroll(this)"> Droite </span>
</div>
 
</body>
 
</html>

Savez-vous comment faire pour afficher mes images comme je l'ai expliqué au début ?

Là je dois avouer que je suis complètement pommé ...

En vous remerciant d'avance.

A voir également:

Inclure du PHP dans du JS ...
Easy php - Télécharger - Divers Web & Internet
Php?id=1 - Forum PHP
Get_magic_quotes_gpc php 8 ✓ - Forum PHP
\R php ✓ - Forum PHP
Inclure du texte dans une formule excel ✓ - Forum Excel

1 réponse

Réponse 1 / 1

JooS Messages postés 2465 Date d'inscription mardi 22 janvier 2008 Statut Membre Dernière intervention 8 juin 2016 228
4 juil. 2014 à 03:44

Salut,

Pourquoi ne pas charger toutes les images dés le début !
C'est a dire les charger et les afficher en HTML (par exemple dans un bloc div), sauf qu'avec du CSS (display:none) vous cachez celles que vous ne voulez pas encore faire apparaître.

Puis grâce a la flèche (et le mieux c'est d'utiliser jQuery), lors du clique (par exemple), vous cachez l'image qui est visible et vous afficher la suivante.

Discussions similaires

ALERT en php

Javascript Arrondi à 2 chiffres après la virgule

code couleur associé a une image

balise de retour à la ligne en php

que veut dire php natif

Discussions similaires

Newsletters