Inclure du PHP dans du JS ...

Résolu/Fermé

Mael687 Messages postés 25 Date d'inscription mercredi 23 octobre 2013 Statut Membre Dernière intervention 15 mars 2015 - 3 juil. 2014 à 19:03
JooS Messages postés 2468 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
Comment inclure une video dans un powerpoint - Guide
Inclure du texte dans une formule excel ✓ - Forum Excel
Bouton php - Forum PHP
Php?id=1 - Forum PHP

1 réponse

Réponse 1 / 1

JooS Messages postés 2468 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

Javascript Arrondi à 2 chiffres après la virgule

balise de retour à la ligne en php

Cheval de Troie JS/Kryptik.I

get_magic_quotes_gpc sous PHP8.

que veut dire php natif