从文件夹中加载所有图像,并使用Laravel框架在JS滑块中滚动它们
Load all images from folder and roll them in JS slider with Laravel framework
使用Laravel框架从JS滑块中的文件夹中滚动所有图像的最佳方式是什么?这是具有硬编码图像路径的当前代码:
var i =0;
var images = [
'images/sliders/background_slider/2.jpg',
'images/sliders/background_slider/3.jpg',
'images/sliders/background_slider/1.jpg',
'images/sliders/background_slider/4.jpg',
'images/sliders/background_slider/5.jpg'];
var image = $('#slideit');
image.css('background-image', 'url(images/sliders/background_slider/1.jpg)');
setInterval(function(){
image.fadeOut(200, function () {
image.css('background-image', 'url(' + images [i++] +')');
image.fadeIn(1000);
});
if(i == images.length)
i = 0;
}, 5000);
});
这个代码运行得很好,但我的想法是有一个选项,可以在不接触代码的情况下轻松管理这些图片。我尝试创建一个包含所有图像路径的PHP变量,然后在JS中使用json_encode函数,但这不起作用。此外,当我在JS变量中加载这些路径时,我可以很容易地在每个浏览器的源代码视图中看到它们,我认为,从安全角度来看,这不是一个好主意。
那么,最好的方法是什么呢?
提前感谢!
D。T.
如果您想在客户端JS中使用变量,则无法隐藏该变量。这与对数组进行硬编码相同,唯一的区别是它将使用服务器端脚本进行渲染,以使其具有动态性。
所以,如果你的php变量是$images,它应该看起来像这样:
$images = [
'images/sliders/background_slider/2.jpg',
'images/sliders/background_slider/3.jpg',
'images/sliders/background_slider/1.jpg',
'images/sliders/background_slider/4.jpg',
'images/sliders/background_slider/5.jpg'];
要将其传递给您的视图,您可以执行以下操作:
$data['images'] = json_encode($images);
然后,在视图中,您将从php变量中获取值,而不是对值进行硬编码。将json字符串转换回:
var images = JSON.parse('<?=$images?>');
并且,要将第一张图像设置为背景:
image.css('background-image', 'url('+images[0]+')');
更新:
我刚刚注意到您正在计算图像数组的元素,而对于JSON.parse
之后生成的对象,您将无法进行此操作。相反,您可以为每个对象元素创建一个键数组,并对其进行计数。
images_keys= $.map(images, function(v, i){
return i;
});
无论您在哪里需要images.length
,都可以使用images_keys
。对于其他一切,您可以使用图像对象本身。
相关文章:
- 闭包js框架-将ArrayBuffer转换为字符串
- 类似于Prism的Knockout js框架
- 使用HTML5 JS框架进行本地存储
- Dart和第三方CSS和JS框架
- JavaScript:谷歌一直在使用的JS框架
- Angular.js框架的附加js文件用于什么
- KoGrid无法在Durandal JS框架中工作
- 结合JS框架
- reveal.js框架+javascript箭头
- 在OOP node.js框架Danf中是否确保了接口
- JS框架,用于在Canvas上创建可视化模拟
- Javascript 单元测试和重构(使用 Angular js 框架)
- skel.js框架/HTML5UP模板CSS问题
- JS框架如何将模型绑定到视图
- 使用 meteor.js 框架将图像上传到 MongoDb
- 高端节点.js框架
- RAM 内存消耗在简单页面刷新节点上不断增加.js使用 Sails.js 框架
- 如何使用js框架验证Laravel 4表单(html)
- Ember.js框架无需 Node.js 即可使用
- 使用 js 框架将 json 转换为 pdf