使用Javascript或jquery动态显示多个图像
我正在使用 Gridster 网页小部件.有一个JSON,它提供有关以下内容的数据每个网格上应该有什么图像(从JSON中捕获文本,然后从数据库中加载相应的图像).当前我能够在网格上显示单个图像,我的目标是在网格上显示多个图像.将是json中逗号分隔的名称.
I am using Gridster widget for webpages.There is a JSON which gives data about what image should be there on each grid(Text from JSON is captured and then corresponding image from database is loaded).Currently I am able to display a single image on grid.My aim is to display multiple images on the grids.The multiple images will be comma seperated names in json.
当前JSON的格式为:
Current JSON is of the form:
var json = [{
"html": 'abc.png',
"col": 1,
"row": 1,
"size_y": 2,
"size_x": 2
}, {
"html": "xyz.png",
"col": 4,
"row": 1,
"size_y": 2,
"size_x": 2
},
{
"html": "def.png",
"col": 6,
"row": 1,
"size_y": 2,
"size_x": 2
},
{
"html": "abc.png",
"col": 1,
"row": 3,
"size_y": 1,
"size_x": 1
}, {
"html": "def.png",
"col": 4,
"row": 3,
"size_y": 1,
"size_x": 1
},
{
"html": "abc.png ",
"col": 6,
"row": 3,
"size_y": 1,
"size_x": 1
}
];
每个网格只有一张图像
新的JSON格式如下:
New JSON will be of the form:
var json = [{
"html": "abc.png,xyz.png,def.png', //3 Images
"col": 1,
"row": 1,
"size_y": 2,
"size_x": 2
}, {
"html": "xyz.png", //1 Image
"col": 4,
"row": 1,
"size_y": 2,
"size_x": 2
},
{
"html": "def.png,abc.png", //2 Images
"col": 6,
"row": 1,
"size_y": 2,
"size_x": 2
},
{
"html": "abc.png", //1 Image
"col": 1,
"row": 3,
"size_y": 1,
"size_x": 1
}, {
"html": "def.png,abc.png", //2 Images
"col": 4,
"row": 3,
"size_y": 1,
"size_x": 1
},
{
"html": "abc.png", // 1 Image
"col": 6,
"row": 3,
"size_y": 1,
"size_x": 1
}
];
旧格式就像
"html":"image1"
新形式就像
"html":"image1,image2,....imageN"
创建小部件的JS如下:
The JS which creates widgets is as follows:
for(var index=0;index<json.length;index++) {
{% load static %}
gridster.add_widget('<li class="new" ><button class="delete-widget-button" style="float: right;">-</button><img src="{% get_static_prefix %}images/'+json[index].html+'"></li>',json[index].size_x,json[index].size_y,json[index].col,json[index].row);
};
我不知道上面的循环将如何处理多张图像
I am not getting how the above loop will take care of handling multiple images
更新1
我对gridster不熟悉,但这也许对您有用-
I'm not familiar with gridster, but maybe this will work for you -
拆分图像文件名字符串,然后让另一个嵌套循环构建输出字符串-
Split the image filename string and then have another nested loop build the output string -
var images = json[index].html.split(',');
var imageOutput = "";
for(var j = 0; j < images.length; j++) {
imageOutput += '<img src="{% get_static_prefix %}images/'+ images[j] +'">';
}
gridster.add_widget('<li class="new" ><button class="delete-widget-button" style="float: right;">-</button>' + imageOutput + '</li>',json[index].size_x,json[index].size_y,json[index].col,json[index].row);