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);将图像路径字符串转换为数组。 Click here有关explode()。

的进一步说明

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

在我们获得数组的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' }
                });

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

1 个答案: