Javascript 使用php将值从DB传递到jquery_Javascript_Php_Jquery_Mysql

Javascript 使用php将值从DB传递到jquery

javascript php jquery mysql

Javascript 使用php将值从DB传递到jquery,javascript,php,jquery,mysql,Javascript,Php,Jquery,Mysql,我有一个带jQuery的滑块。我想要的是，我想要建立一种填充滑块图像的动态方式。例如，用户将图像放入数据库，滑块自动显示： TEST.slider = function(){ $.supersized({ // Functionality slideshow : 1, // Slideshow on/off autoplay : 1, // Slideshow starts playing automatically start_s

我有一个带jQuery的滑块。我想要的是，我想要建立一种填充滑块图像的动态方式。例如，用户将图像放入数据库，滑块自动显示：

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

 });

}

TEST.slider=函数（）{
美元。超大({
//功能性
幻灯片放映：1，//幻灯片放映打开/关闭
自动播放：1，//幻灯片自动开始播放
开始幻灯片：1，//开始幻灯片（0是随机的）
停止循环：0，//暂停最后一张幻灯片的幻灯片放映
随机：0，//随机幻灯片顺序（忽略开始幻灯片）
滑动间隔：4000，//转换之间的长度
转换：1、//0-无、1-淡入、2-顶部滑动、3-右侧滑动、4-底部滑动、5-左侧滑动、6-右侧旋转木马、7-左侧旋转木马
过渡速度：300，//过渡速度
新建窗口：1，//在新窗口/选项卡中打开图像链接
暂停\悬停：0，//悬停时暂停幻灯片放映
键盘导航：1，//键盘导航打开/关闭
性能：1、//0-正常，1-混合速度/质量，2-优化图像质量，3-优化转换速度//（仅适用于Firefox/IE，不适用于Webkit）
image\u protect:1，//禁用图像拖动并使用Javascript右键单击
//大小和位置
最小宽度：0，//允许的最小宽度（以像素为单位）
最小高度：0，//允许的最小高度（以像素为单位）
垂直中心：1，//垂直中心背景
水平居中：1，//水平居中背景
fit_always:0，//图像永远不会超过浏览器宽度或高度（忽略最小尺寸）
fit_纵向：1，//纵向图像将不会超过浏览器高度
fit_横向：0，//横向图像将不会超过浏览器宽度
//组成部分
幻灯片链接：'空白'，//每张幻灯片的单个链接（选项：false、'num、'name、'blank'）
拇指链接：0，//每张幻灯片的单个拇指链接
缩略图\u导航：0，//缩略图导航
幻灯片：[//幻灯片放映图像
{image:'img/slider images/image01.jpg'，title:'CESI'，thumb:''，url:'}，
{image:'img/slider images/image02.jpg'，title:'Responsive Design'，thumb:''，url:'}，
{image:'img/slider images/image03.jpg'，title:'FullScreen Gallery'，thumb:''，url:'}，
{image:'img/slider images/image04.jpg'，title:'展示您的作品'，thumb:''，url:'}
],
//主题选项
进度条：1，//每个幻灯片的计时器
老鼠磨砂：1
});
}

因此，我想要的是使用PHP从DB读取数据，这是图像路径，并将其作为值传递给滑块，尤其是这一部分：

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

幻灯片：[
{图像：''，标题：'响应'，拇指：''，url:'}，
],

我想从索引页传递变量

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

创建一个端点，您可以使用XHTMLRequest或一些框架来访问它
```
json\u对变量进行编码
```
。Javascript能够解析json，这相当酷。（一个很酷的软件包，可以帮助您使用这种方法：）

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

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