jqueryスライダの内部でdb値を操作する方法は？

Question

私はphotogridのようなfacebookに似ているクエリプラグインスライダに取り組んでいます。私はmysqli_fetch_arrayを持っていて、contentimageというフィールド（複数の画像のパスの文字列をコンマで区切って保持するフィールド "https://unsplash.it/660/440?image=875,https://unsplash.it/660/455?image=838"）から画像パスを取得します。スクリプトは、スクリプト内のimages：arrayを使って作業していますが、 jqueryの中にdb値を含めるには？

<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

イメージパスの値を保持するために非表示の入力を作成する必要があります。 配列に画像パス文字列を変換するために、この

<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> 

説明

使用$imagePathArray = explode(',', $imagePathString);を試してみてください。さらにexplode()についてはClick hereを参照してください。

次に、json_encode：json_encode($imagePathArray)を使用して配列をjson文字列に変換します。

アレイのjson表現が得られたら、非表示の入力フィールド<input id="img-paths" type="hidden" value="<?php echo htmlentities(json_encode($imagePathArray)); ?>" />に格納します。ちなみに、htmlentities()は、jsonの文字列の中に特殊文字のためにhtmlが壊れるのを防ぐために使われています。

は最後に、我々はJavaScriptでJSON文字列を取得し、バック配列に文字列を解析：

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