我有一个带有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
});
}
所以我想要的是用PHP从DB中读取数据,这是图像路径,并将其作为值传递给滑块,特别是这个部分:
slides : [
{image : '<?php echo $image_path_dynamic; ?>', title : '<div class="slide-content">Responsive</div>', thumb : '', url : ''},
],
我想传递索引页中的变量。
将php变量传递给javascript有两种方法。
- 制作一个端点,您可以使用XHTMLRequest或某些框架来达到该端点
json_encode
变量,然后回显它。Javascript能够解析json,这很酷。(一个很酷的软件包,可以帮助您使用这种方法:https://github.com/laracasts/PHP-Vars-To-Js-Transformer)
我不知道它是否能工作,因为我自己无法测试它,但我会这样做。在你的函数中,你可以添加对$.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);
}?>
然后在$.supsized中,您可以访问var imagesArray,该数组现在包含您需要的数据,并且表现为普通的jQuery数组,这意味着您可以使用所有已知的方法来处理jQuery中的数组。我认为您可以循环遍历数组中的每个元素,并构建一个新元素放在"幻灯片"中。