CODEWITHSUNDEEP
javascriptjqueryhtmlcss
NewBie
NewBie

Reputation: 3584

Restrict multiple image within div with JS/Jquery/CSS

On my webpage there are Gridster widgets.In these widgets initially the images are displayed from JSON(the name of image comes from JSON which I then put in src of image)

The users can also add images by clicking + button.User can also delete an image by clicking X button on the image.

The Problem I am facing

When the images coming from JSON are more or when the user manually adds more images then the images go out of widgets.

My Desired Output

Now I was trying to restrict those images in widget such that images will lay only in boundaries of div.

When there are more images the other existing images will resize and all of the images will fit in that area.

When I delete an image the other images will get bigger.In any case the entire area will be occupied by the images.

JS:

    //JSON which I get from backend
    
    var json = [{
        "html": "https://d30y9cdsu7xlg0.cloudfront.net/png/802768-200.png,https://d30y9cdsu7xlg0.cloudfront.net/png/802768-200.png,https://d30y9cdsu7xlg0.cloudfront.net/png/802768-200.png", //3 Images
        "col": 1,
        "row": 1,
        "size_y": 2,
        "size_x": 2
      }
    ];
    //Loop which runs over JSON to generate <li> elements in HTML
    
    for (var index = 0; index < json.length; index++) {
      var images = json[index].html.split(',');
      var imageOutput = "";
    
      for (var j = 0; j < images.length; j++) {
        imageOutput += '<div class="imagewrap"><img src=' + images[j] + '> <input type="button" class="removediv" value="X" /></div></div>';
      }
    
      gridster.add_widget('<li class="new" ><button class="addmorebrands" style="float: left;">+</button><button class="delete-widget-button" style="float: right;">-</button>' + imageOutput + '<textarea>' + json[index].html + '</textarea></li>', json[index].size_x, json[index].size_y, json[index].col, json[index].row);
    }
    
    //Function to delete an image from widget
    
    $(document).on('click', '.removediv', function() {
      $(this).closest('div.imagewrap').siblings('textarea')
      $(this).closest('div.imagewrap').remove();
    
    });
    
    //Function to delete a widget
    
    $(document).on("click", ".delete-widget-button", function() {
      var gridster = $(".gridster ul").gridster().data('gridster');
      gridster.remove_widget($(this).parent());
    });
    

    
    //Function to add mode Images to widgets from Modal
    
    var parentLI;
    $(document).on("click", ".addmorebrands", function() {
      parentLI = $(this).closest('li');
      $('#exampleModalCenter').modal('show');
      $('#exampleModalCenter img').click(function() {
        $(this).addClass('preselect');
        $(this).siblings().removeClass('preselect');
        selectedImageSRC = $(this).attr('src');
      })
    });
    
    $('#add-image').click(function() {
      parentLI.append('<div class="imagewrap"><img src="' + selectedImageSRC + '"> <input type="button" class="removediv" value="X" /></div>');
      parentLI.children('textarea').append(', ' + selectedImageSRC);
      $('#exampleModalCenter').modal('hide');
    })

HTML

 <div class="gridster">
      <!--  <li> from JSON are placed here images are a part of li -->
      <ul>

      </ul>
    </div>

The Fiddle so far

I am not sure if this can achieved just with CSS or will require any JS along with that

Update 1

I have tried with a lot of different CSS but still not able to get the expected output so if someone can help me with it would be really helpful

Upvotes: 4

Views: 221

Answers (1)

Scaramouche
Scaramouche

Reputation: 3267

Maybe Gridster has a built in way to arrange items inside the grid cells, in case you have not found a way yet, try this.

I added some css:

.image-wrap-container{
  min-height: 70%
}

.image-wrap-container div.imagewrap{
  width: 33%
}

.text-area-wrap{
    bottom: 0px;
    left: 0px;
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 30%;
    display: inline-flex;
}

.new.gs-w{
  width: 200px;
  min-height: 200px
}

.addmorebrands{
  position: absolute;
  left:0
}
.delete-widget-button{
  position: absolute;
  right:0
}

and restructured a little bit your html so images fit good within the cell, I hope that does not break anything, javascript was the least modified, only to add the images according to the new html structure.

Note: I tried to make the lis' height adjust to the amount of elements it contains, but [data-sizey="2"] kept getting in my way, so before throwing some probably unnecessary hack on it, try and achieve that using the library's own options, good luck.

Also, I noticed you were using this to update your textareas:

parentLI.children('.imagenames').val(function(i, selectedImageSRC) {return selectedImageSRC + ', '});

which won't work because you are using the same name for the argument, conflicting with the original selectedImageSRC variable. In case you are still having problems in that front, I replaced it with:

parentLI.children('.imagenames').val(function(i, currentContent) {return currentContent + ',' + selectedImageSRC + ', '});

Bonus Feature

The buttons for removing an image were to big for the images and covered quite a big part, so I took the liberty:

.removediv{
  visibility: hidden
}
.imagewrap:hover .removediv{
  visibility: visible
}

hope it helps

Upvotes: 1

Related Questions