popup lightbox dinamic with ajax

popup lightbox dinamic with ajax

Hello , recently I was approached and jquery ajax .
I'm making a call to a query from ajax to php .
It works and gives me what I need.
I did that a select onchange write in html  a listview with filtering and simultaneously, in another div where I post the code to open the popup image.
unfortunately it does not behave as in the demo:  photo lightbox   .
But if the div with the big picture I put it directly in the html code , it works .
Below I post the code :


  1. <ul id="articoli" data-role="listview" data-inset="true" data-split-theme="a" data-split-icon="gear" data-filter-placeholder="cerca" data-filter="true" style="max-height:300px; overflow:auto;"></ul>
                <div id="foto"></div>
    <script>
    $('#gruppo').change(function() {
     
        var gruppo = $("#gruppo").val();
        $.ajax({
      
        type: "POST",
      
        url: "funzioni.php",
      
        data: "gruppo=" + gruppo + "&database=<?= $database ?>",
        dataType: "json",
        success: function(msg)
        {
        $("#articoli").html(msg[0]);
        $("#foto").html(msg[1]);
       
        },
        error: function()
        {
        alert("Chiamata fallita, si prega di riprovare..."); //sempre meglio impostare una callback in caso di fallimento
        }
    });
    </script>

and function php:


  1. function seleziona_articoli($id,$database,$connessione){
      mysql_select_db($database,$connessione);
         $elenco_articoli = '';
      $gruppo_foto = '';
      $query = "SELECT * FROM articoli WHERE gruppo_merceologico = '$id' order by descrizione ";
      $result = mysql_query($query, $connessione) or die (mysql_error());
       while($articoli = mysql_fetch_array($result)) {
         $elenco_articoli .= '<li class="ui-li-has-alt ui-li-has-thumb ui-first-child ui-last-child"><a class="ui-btn" href="#popup'.$articoli['codice'].'" data-transition="fade" data-rel="popup" data-position-to="window" >
            <img class="popphoto" src="images/goto.jpg" height="160" width="160">
        <h2>'.$articoli['descrizione'].'</h2>
        <p>'.$articoli['descrizione'].'</p></a>
            <a href="#purchase" data-transition="pop" data-position-to="window" data-rel="popup" class="ui-btn ui-btn-icon-notext ui-icon-plus ui-btn-a">Purchase album</a>
        </li>';
       $gruppo_foto .= '<div id="popup'.$articoli['codice'].'" data-role="popup" data-theme="b" data-corners="false" data-overlay-theme="b">
        <a class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right" href="#" data-rel="back">Close</a><img class="popphoto" style="max-height: 512px;" alt="Paris, France" src="images/foto.jpg">
    </div>';
      } 
      $immagini = array($elenco_articoli,$gruppo_foto);
      echo json_encode($immagini);
     }

thanks for help