Question

我有一个带jQuery的滑块。我想要的是，我想建立一个动态的方式来填充滑块的图像。例如，用户将图像放到DB中，滑块自动显示它们：

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

 });

}

所以我想要的是用PHP从DB中读取数据，这是图像路径并将其作为值传递给滑块，特别是这部分：

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

我想从索引页面传递变量。

Answer 1

有两种方法可以将php变量传递给javascript。

创建一个端点，您可以使用XHTMLRequest或某个框架。
json_encode变量然后回显它。 Javascript能够解析json，这很酷。（一个很酷的软件包，可以帮助您实现这种方法：https://github.com/laracasts/PHP-Vars-To-Js-Transformer）

Answer 2

我不知道它是否会起作用，因为我自己无法测试，但这就是我将如何做到的。在你的功能中你可以添加对$ .post方法的调用，看起来应该是这样的：

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

您的imagesRetriever.php应该类似于：

<?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);
}?>

然后在$ .supersized中，您可以访问var imagesArray，它现在包含您需要的数据并且表现为普通的jQuery数组，这意味着您可以使用所有已知方法在jQuery中使用数组。我认为你可以遍历数组的每个元素并构建一个新元素以放入幻灯片中。

使用php从DB传递值到jquery

2 个答案: