Displaying multiple images dynamically with Javascript or jquery

Question

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.

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
}

];

It has just one image per grid

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
}

];

So old form is like

 "html":"image1"

New form is like

"html":"image1,image2,....imageN"

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

Fiddle Link

Update 1

Updated Fiddle Link

Adjit · Accepted Answer · 2018-03-23 18:40:28Z

1

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/

edited Mar 23, 2018 at 18:40

answered Mar 23, 2018 at 18:13

Adjit

10.3k13 gold badges57 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

NewBie Over a year ago

I tried it over here jsfiddle.net/7a0c2kq9/3 But i think it is now working in desired way.

Adjit Over a year ago

Ooh, my mistake, I forgot to use images[j] in the nested for loop. Check the edit

NewBie Over a year ago

I am struggling to put it in fiddle This is what I tried jsfiddle.net/2qkqmoc4/1

Adjit Over a year ago

I'm not exactly sure what your desired outcome / look is - jsfiddle.net/2qkqmoc4/8

NewBie Over a year ago

This is what I want I mean multiple Images on a grid with removal facility.But along with that I also want the other fields which are present here jsfiddle.net/xg33t871 (the textarea on grids which has image links and the when I click serialize it should generate the json in textarea with id log)

|

Collectives™ on Stack Overflow

Displaying multiple images dynamically with Javascript or jquery

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related