CODEWITHSUNDEEP
javascriptphpjquery
Sayuj Raghavan
Sayuj Raghavan

Reputation: 337

How to make db values work inside a jquery slider?

I am working on a query plugin slider which looks similar to facebook like photogrid. I have a mysqli_fetch_array which brings the image paths from a field called contentimage(which holds a string of the multiple image's paths separated by comma,"https://unsplash.it/660/440?image=875,https://unsplash.it/660/455?image=838,"). Though the script is working with the images: array in the script. How to include the db values inside the jquery ?

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

Upvotes: 0

Views: 56

Answers (1)

Bondan Sebastian
Bondan Sebastian

Reputation: 1015

You should create a hidden input to hold the image path value. 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>

Explanation

Use $imagePathArray = explode(',', $imagePathString); to convert image path string into array. Click here for further explanation about explode().

Then we convert the array into json string using json_encode: json_encode($imagePathArray).

After we get the json representation of the array, we store it inside a hidden input field: <input id="img-paths" type="hidden" value="<?php echo htmlentities(json_encode($imagePathArray)); ?>" />. By the way, htmlentities() is used to prevent html from breaking because of special characters in json string.

Finally, we grab the json string in javascript and parse the string back to array: 

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

Upvotes: 2

Related Questions