使用Javascript或jquery动态显示多个图像 [英] Displaying multiple images dynamically with Javascript or 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);

https://jsfiddle.net/joqfgr2t/3/

这篇关于使用Javascript或jquery动态显示多个图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！