Creare slideshow con immagini esterne

VAik · 27 Nov 2016

Ciao a tutti ragazzi

ho creato uno slideshow che funziona bene con tre immagini caricate di partenza sul mio sito: cliccando sui tasti dx e sx le immagini scorrono bene.

Ora ho voluto fare un passo in più ma mi sono perso: vorrei caricare queste tre immagini da un db.
Che ho fatto?
1)ho creato un DB con una tabella "slideshow" con 4 colonne (id, titolo, descrizione,indirizzo_foto).
2)ho creato una cartella sul mio spazio web modificandogli i permessi
3)ho creato un form per caricare le immagini sia nella cartella che nel mio db
4) ho creato un file .php per leggere le info delle immagini e visualizzare le immagini stesse.
5) sappiamo che la prima immagine è caricata sul mio sito, voglio che appena si clicca sul tasto dx o sx compaiano queste immagini caricate dal db. cosa devo fare?

Questo è il file che dopo aver commentato qualcosa, mi da l'elenco dell'indirizzo delle immagini

PHP:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>leggo i file dal db</title>
</head>

<body>
<h1>leggo i file dal db di altervista</h1>



<?php


require_once('configurazione_credenziali_esterno_altervista.php');
$link = @mysqli_connect(DB_HOST, DB_USERN, DB_PSW) or die("Errore connessione: ". mysqli_connect_error());
$dbw = @mysqli_select_db($link, DB_my) or die("Errore apertura database: " . mysqli_error($link));


$strsql= "SELECT * FROM slideshow ";
$rs = @mysqli_query($link, $strsql) or die("Errore query database: " . mysqli_error($link));

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"Indirizzo: $str_indirizzo<br>";
    }
  
  
    ?>
          
      
    </body>
    </html>

immagino che sia importante anche prelevare id della foto dal database per la corretta visualizzazione giusto?

VAik · 27 Nov 2016

Questo è il codice html che vorrei modificare e che funziona senza l'aggiunta del metodo $:ajax

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;
     
            $box.css('margin-left',spostamento+'px');
        } else if (tipo=='prec' && spostamento<0) {
            spostamento += imgdim;
       
            $box.css('margin-left',spostamento+'px');
        }
    }



    function slideDB() {
        $.ajax({
            url: 'lettura-da-altervista_per_slideshow.php',
            dataType: "HTML",
         
            success: function (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>

Cerca

Cerca

Creare slideshow con immagini esterne

VAik

Utente Attivo

VAik

Utente Attivo

Discussioni simili