Wie können db-Werte in einem jquery-Schieberegler funktionieren?

Question

Ich arbeite an einem Abfrage-Plugin-Slider, der Facebook ähnlich wie Photogrid aussieht. Ich habe eine mysqli_fetch_array, die die Bildpfade aus einem Feld namens contentimage (die eine Zeichenfolge der Pfade mehrerer Bilder durch Komma getrennt, "https://unsplash.it/660/440?image=875,https://unsplash.it/660/455?image=838,") enthält. Obwohl das Skript mit dem Array images: array im Skript arbeitet. Wie man die DB-Werte in die jquery einbindet?

<div class="post-image"> 
         <div id="gallery7"></div> 
        <script> 

       $(function() { 


      $('#gallery7').imagesGrid({ 
       images: [ 
    'https://unsplash.it/660/440?image=875', 
     'https://unsplash.it/660/455?image=838', 
     'https://unsplash.it/660/990?image=874', 
     'https://unsplash.it/660/440?image=872', 
     'https://unsplash.it/660/990?image=839', 
      'https://unsplash.it/750/500?image=868' ], 
       align: true, 
       getViewAllText: function(imgsCount) { return 'View all' } 
      }); 

     }); 

    </script> 
    </div> 

Answer 1

Sie sollten eine versteckte Eingabe erstellen, um den Bildpfadwert zu speichern. try this

<div class="post-image"> 
    <?php $imagePathArray = explode(',', $imagePathString); ?> 
    <input id="img-paths" type="hidden" value="<?php echo htmlentities(json_encode($imagePathArray)); ?>" /> 
         <div id="gallery7"></div> 
        <script> 

       $(function() { 


      $('#gallery7').imagesGrid({ 
       images: $.parseJSON($('#img-paths').val()), 
       align: true, 
       getViewAllText: function(imgsCount) { return 'View all' } 
      }); 

     }); 

    </script> 
    </div> 

Erklärung

Verwenden $imagePathArray = explode(',', $imagePathString); Bildpfad String in einem Array zu konvertieren. Click here für weitere Erläuterungen über explode().

Dann konvertieren wir das Array in Json String mit json_encode: json_encode($imagePathArray).

Nachdem wir die JSON-Darstellung des Arrays erhalten haben, speichern wir es in einem versteckten Eingabefeld: <input id="img-paths" type="hidden" value="<?php echo htmlentities(json_encode($imagePathArray)); ?>" />. By the way, htmlentities() wird verwendet, um zu verhindern, dass HTML aufgrund von Sonderzeichen in JSON-Zeichenfolge zu brechen.

Schließlich greifen wir die JSON-String in JavaScript und die Zeichenfolge zurück zum Array analysieren:

$('#gallery7').imagesGrid({ 
        images: $.parseJSON($('#img-paths').val()), 
        align: true, 
        getViewAllText: function(imgsCount) { return 'View all' } 
       });