Problemi con javascript in un ciclo for del php

[il pupo]

Salve a tutti,
ho un problema con una funzione di javascript ke ho inserito in un ciclo for del php,questo è il codice:

<?
//caricamento dal database dei dati riguardanti le immagini e gli attributi
include("QueryIntoArray.php");
include("config.inc.php");

 $db = mysql_connect($db_host, $db_user, $db_password);
  if ($db == FALSE)
    die ("Errore nella connessione. Verificare i parametri nel file config.inc.php");

  mysql_select_db($db_name, $db)
    or die ("Errore nella selezione del database. Verificare i parametri nel file config.inc.php");
    
    settype($myresult,"array");
    
    $query="SELECT * FROM oggetto";
    $myresult = QueryIntoArray($query);
    for($i=0;$i<count($myresult);$i++)
    {
     
     $nome= $myresult[$i]["nome"];
     $prezzo= $myresult[$i]["prezzo"];
     $quantita= $myresult[$i]["quantita"];
     $descrizione=$myresult [$i]["descrizione"];
     $immagine_1=$myresult [$i]["immagine_1"];
     $immagine_2=$myresult [$i]["immagine_2"];
     $immagine_3=$myresult [$i]["immagine_3"];
     $immagine_4=$myresult [$i]["immagine_4"];
     $immagine_5=$myresult [$i]["immagine_5"];
     $immagine_6=$myresult [$i]["immagine_6"];
     
    ?>
<style type="text/css" media="screen">
#slider {
    width: 480px; /* important to be same as image width */
    height: 300px; /* important to be same as image height */
    position:relative;/* important */
    overflow: hidden; /* important */
    
}
#sliderContent {
    width: 410px; /* important to be same as image width or wider */
    position: absolute;
    top: 0;
    margin-left: 0;
    left: 1px;
    
}
.sliderImage {
    float: left;
    position:relative;/* important */
    display: list-item;
}
.sliderImage span {
    position: absolute;
    font: 10px/15px Arial, Helvetica, sans-serif;
    padding: 10px 13px;
    width: 384px;
    background-color: #000;
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
    -khtml-opacity: 0.7;
    opacity: 0.7;
    color: #fff;
    display: list-item;
}
.clear {
    clear: both;
    
}
.sliderImage span strong {
    font-size: 14px;
}
.top {
    top: 0;
    left: 0;
}
.bottom {
    bottom: 0;
    left: 0;
}
ul { list-style-type: none;}
</style><? echo "ciao1"; ?>
<script type="text/javascript">
    $(document).ready(function() {
        $('#slider').s3Slider({
            timeOut: 3000
        });
    });
</script><? echo "ciao2"; ?>
<table width="1271" height="369" border="0">
  <tr>
    <th width="410" rowspan="3" scope="col"><div id="slider">
      <ul id="sliderContent">
        <li class="sliderImage"> [url=""][img]Images/Vendite/<? echo [/img]/<? echo "$immagine_1";  ?>" alt="1" />[/url] <span class="top">[b] [/b]

          Content text...</span> 
        <li class="sliderImage"> [url=""][img]Images/Vendite/<? echo [/img]/<? echo "$immagine_2";  ?>" alt="2" />[/url] <span class="top">[b]Title text 2[/b]

          Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...</span> 
        <li class="sliderImage"> [img]Images/Vendite/<? echo [/img]/<? echo "$immagine_3";  ?>"alt="3" /> <span class="bottom">[b]Title text 2[/b]

          Content text...</span> 
        <li class="sliderImage"> [img]Images/Vendite/<? echo [/img]/<? echo "$immagine_4";  ?>" alt="4" /> <span class="bottom">[b]Title text 2[/b]

          Content text...</span> 
        <li class="sliderImage"> [img]Images/Vendite/<? echo [/img]/<? echo "$immagine_5";  ?>" alt="5" /> <span class="top">[b]Title text 2[/b]

          Content text...</span> 
        <li class="sliderImage"> [img]Images/Vendite/<? echo [/img]/<? echo "$immagine_6";  ?>" alt="5" /> <span class="top">[b]Title text 2[/b]

          Content text...</span> 
        <div class="clear sliderImage"></div>[/list]
    </div>      _    </th>
    <th colspan="2" scope="col"><h1><?  echo "$nome";  ?> </h1></th>
  </tr>
  <tr>
    <th width="365" height="161" scope="col"><div align="left">
      <p align="right"></p>
      </div>
      <p align="left"></p>
      <p align="left">Prezzo: <? echo "$prezzo"; ?></p>
      <p align="left">Spedizioni in: Europa</p>      <p align="left">Quantit&agrave;: <? echo "$quantita"; ?> </p>    </th>
    <th width="482" scope="col"><p align="left"></p>
      <p align="left"></p>
    <p align="left"></p></th>
  </tr>
  <tr>
    <th height="162" colspan="2" scope="col">Descrizione:<? echo "$descrizione"; ?></th>
  </tr>
</table>
<?
}
    mysql_close($db);
?>

il problema è ke la funzione me la applica solo alla prima immagine...nn capisco il motivo

[nICO80]

Scusa, ma per quale motivo metti il CSS là in mezzo al ciclo? Includilo in un file esterno...

Per il JS non saprei... sinceramente non ne capisco la sintassi (cosa sono quei $?)

[il pupo]

se sposto il css le impostazione me le trasmette sl alla prima seguenza di immagini...per quanto riguarda il simbolo $ non lo so è uno script preso da qui

[nICO80]

hmmmm... probabilmente il problema sta nel fatto che il tuo ul ha id=slidercontent
Questo vuol dire che il tuo ciclo creerà tanti ul con lo stesso id e questo non è valido in HTML.

Dovresti creare degli id dinamici, e probabilmente riscrivere lo script...

[il pupo]

cm faccio a crecare ul dinamici?...cmq in teoria ne dovrebbe creare uno per ogni eseguzione del ciclo giusto?

[nICO80]

Ne crea uno per ogni ciclo ma si chiamano tutti uguali, quindi JS non li distingue.

Usa qualcosa tipo:

echo '<ul id="slider'.$myresult [$i]['id'].'">' 

Poi metti il css e il js in file separati, e fai un ciclo nel JS (non ti so bene dire come perchè, ribadisco, non mi è chiara la sintassi del js)

[il pupo]

ok grazie.