Pass Values with with php from DB to jquery

Question

I have a slider with jQuery. what i want is that i want to build a dynamic way of populating the images of the slider. For example the user puts images to DB and the slider automaticly shows them:

TEST.slider = function(){
 $.supersized({
  // Functionality
  slideshow               :   1,   // Slideshow on/off
  autoplay    : 1,   // Slideshow starts playing automatically
  start_slide             :   1,   // Start slide (0 is random)
  stop_loop    : 0,   // Pauses slideshow on last slide
  random     :  0,   // Randomize slide order (Ignores start slide)
  slide_interval          :   4000,  // Length between transitions
  transition              :   1,    // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
  transition_speed  : 300,  // Speed of transition
  new_window    : 1,   // Image links open in new window/tab
  pause_hover             :   0,   // Pause slideshow on hover
  keyboard_nav            :   1,   // Keyboard navigation on/off
  performance    : 1,   // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
  image_protect   : 1,   // Disables image dragging and right click with Javascript

  // Size & Position         
  min_width          :   0,   // Min width allowed (in pixels)
  min_height          :   0,   // Min height allowed (in pixels)
  vertical_center         :   1,   // Vertically center background
  horizontal_center       :   1,   // Horizontally center background
  fit_always    : 0,   // Image will never exceed browser width or height (Ignores min. dimensions)
  fit_portrait          :   1,   // Portrait images will not exceed browser height
  fit_landscape   :   0,   // Landscape images will not exceed browser width

  // Components       
  slide_links    : 'blank', // Individual links for each slide (Options: false, 'num', 'name', 'blank')
  thumb_links    : 0,   // Individual thumb links for each slide
  thumbnail_navigation    :   0,   // Thumbnail navigation
  slides      :   [   // Slideshow Images
           {image : 'img/slider-images/image01.jpg', title : '<div class="slide-content">CESI</div>', thumb : '', url : '<a href="test.com">CESI</a>'},
           {image : 'img/slider-images/image02.jpg', title : '<div class="slide-content">Responsive Design</div>', thumb : '', url : ''},
           {image : 'img/slider-images/image03.jpg', title : '<div class="slide-content">FullScreen Gallery</div>', thumb : '', url : ''},
           {image : 'img/slider-images/image04.jpg', title : '<div class="slide-content">Showcase Your Work</div>', thumb : '', url : ''}  
         ],

  // Theme Options      
  progress_bar   : 1,   // Timer for each slide       
  mouse_scrub    : 1

 });

}

So what i want is that with PHP to read data from DB , which are the images path and pass it as values to the slider expecialy to this part:

  slides      :   [  
           {image : '<?php echo $image_path_dynamic; ?>', title : '<div class="slide-content">Responsive</div>', thumb : '', url : ''},
         ],

i want to pass the variables from the index page.

Answer 1

There are two ways of passing php variables to javascript.

• Make an endpoint, that you can hit with XHTMLRequest or some framework.
• json_encode the variable and then echo it. Javascript is capable of parsing json, which is rather cool. (A cool package, which can help you with this approach: https://github.com/laracasts/PHP-Vars-To-Js-Transformer )

Answer 2

I don't know if it'll work because I couldn't test it myself, but that's how I would do it. Inside your fucntion you can add a call to the $.post method, should look something like this:

var imagesArray;
$.post('imagesRetriever.php', function(echoedValue){ imagesArray= jQuery.parseJSON(echoedValue); });

Your imagesRetriever.php should look something like:

<?php
$db = new mysqli('localhost', 'user' ,'password', 'dbname'); 

    ...some code here..

    $array = ..build the array with the data you need as a php array...;

    echo json_encode($array);
}?>

Then inside $.supersized you can access to the var imagesArray that now contains the data you need and behaves as a normal jQuery array, this means you can use all the know methods to work with arrays in jQuery. I think you can just loop through every element of the array and build a new element to put inside 'slides'.