javascript - 如何使db值在jquery滑块内工作？

我正在研究一个查询插件滑块，该滑块看起来类似于photogrid之类的Facebook。我有一个mysqli_fetch_array，它从称为contentimage的字段中引入图像路径（该字段包含用逗号分隔的多个图像路径的字符串，“ https://unsplash.it/660/440?image=875,https://unsplash.it/660/455?image=838”）。尽管脚本正在处理图像：脚本中的数组。如何在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>

最佳答案

您应该创建一个隐藏的输入来保存图像路径值。
尝试这个

<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);将图像路径字符串转换为数组。 Click here以获得有关explode()的进一步说明。

然后，使用json_encode：json_encode($imagePathArray)将数组转换为json字符串。

在获得数组的json表示形式之后，我们将其存储在一个隐藏的输入字段中：<input id="img-paths" type="hidden" value="<?php echo htmlentities(json_encode($imagePathArray)); ?>" />。顺便说一句，htmlentities()用于防止html字符串由于json字符串中的特殊字符而损坏。

最后，我们在javascript中获取json字符串并将其解析回数组：

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

关于javascript - 如何使db值在jquery滑块内工作？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41952257/