Ciao a tutti ragazzi
stavo realizzando uno slideshow e ci sono riuscito: riesco a far scorrere le immagini caricate nella pagina in modo ottimale , andando indietro ed avanti.
Ora vorrei fare in modo di caricare queste immagini da un db tranne la prima che parte con il sito.
Allora ho fatto in modo di salvare queste immagini nel mio db, e precisamente in una tabella "slideshow" con 4 colonne (id, titolo, descrizione,indirizzo_foto), e salvare effettivamente le immagini in una cartella del mio spazio web.
Con un file php (quello che dovrei richiamare con il metodo $.ajax del mio file html), riesco a visualizzare l'elenco di tutte le info ed anche visualizzare le vere immagini.
Codice PHP:
while ($riga = mysqli_fetch_array($rs)) {
$str_id = $riga['id'];
$str_nome = $riga['titolo'];
$str_desc = $riga['descrizione'];
$str_indirizzo = $riga['indirizzo_foto'];
/*echo "Riga: $str_id -> Titolo: $str_nome - Descrizione: $str_desc - Indirizzo: $str_indirizzo<br>
<img src='".$str_indirizzo."'><br>";*/
echo"Id: $str_id - Indirizzo: $str_indirizzo<br>";
}
vorrei che appena si clicca sul tasto dx o sx riesco a caricare le immagini memorizzate nel db. Cosa devo fare?
Come devo fare a prelevare con jquery il valore id della riga e visualizzare la rispettiva immagine?
con il metodo $.ajax riesco a scorrere ad esempio un file .xml ed andare a prelevare i vari campi del suo dom (con il metodo .each e poi tramite $(this) e .find ('nodo xml') )
codice:
<script>
$(document).ready(function() {
var spostamento = 0, spostamentodx= 0, spostamentosx=0;
var imgdim = 570;
var artdim = 510;
var numimg = 2;
var $box = $('#boxslide');
var next=0, prec=0;
$('.prec').click(function() {
animo('prec');
});
$('.succ').click(function() {
animo('succ');
});
function animo(tipo) {
if (tipo=='succ' && spostamento>-imgdim*numimg) {
spostamento -= imgdim;
slideDB()
$box.css('margin-left',spostamento+'px');
} else if (tipo=='prec' && spostamento<0) {
spostamento += imgdim;
slideDB()
$box.css('margin-left',spostamento+'px');
}
}
function slideDB() {
$.ajax({
url: 'lettura-da-altervista_per_slideshow.php',
dataType: "HTML",
success: function (dati) {
console.log(dati);
//var img = "<im src=\"" + + "\">""
//$(img).insertBefore('.prec');
}
});
});
</script>
</head>
<body>
<section id="slogan">
<div id="controllo_slide">
<div id="finestra_slide">
<div id="boxslide">
<img src="../images/slide1.png" width="570" alt="Slide 1">
<!-- queste sono le immagini che vorrei caricare da db <img src="../images/slide2.png" width="570" alt="Slide 2">
<img src="../images/slide3.png" width="570" alt="Slide 3"> -->
</div>
</div>
<a href="#" class="prec"><img src="../images/prev.png" width="24" height="43" alt="Precedente"></a>
<a href="#" class="succ"><img src="../images/next.png" width="24" height="43" alt="Successivo"></a>
</div>
<img src="../images/cornice.png" alt="">
</section>
</body>
</html>
Per rendermi conto di cosa "dati" nel metodo $.ajax potesse essere, l'ho inviata alla consolle, riesco a vedere oltre all'indirizzo delle mie immagini anche altro codice html che mi da altervista.