Inclure du PHP dans du JS ... [Résolu/Fermé]

Signaler
Messages postés
26
Date d'inscription
mercredi 23 octobre 2013
Statut
Membre
Dernière intervention
15 mars 2015
-
Messages postés
2465
Date d'inscription
mardi 22 janvier 2008
Statut
Membre
Dernière intervention
8 juin 2016
-
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.

1 réponse

Messages postés
2465
Date d'inscription
mardi 22 janvier 2008
Statut
Membre
Dernière intervention
8 juin 2016
225
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.