0

I really need your help! I'm going crazy.. I want to know if it's possible to make several div's background-images both available for download and also make them function as a lightbox gallery on click(i want the pop up function to work for people to see the image before downloading it). Is this even possible? Or should I make another type of grid system to make it work? My code is typed below:

HTML:

<body>
  <div class="wrapper">
    <div class="box box1">Box 1</div>
    <div class="box box2">Box 2</div>
    <div class="box box3">Box 3</div>
    </div>
  <div class="wrapper2">  
    <div class="box box4">Box 4</div>
    <div class="box box5">Box 5</div>
  </div>
</body>

CSS: 

.wrapper{
  display:grid;
  grid-template-columns:1fr 2fr 1fr;
  grid-auto-rows:minmax(100px, auto);
  grid-gap:1em;
  justify-items:stretch;
  align-items:stretch;
  width: 75%;
  margin: 0 auto;
}

.box1{
  /*align-self:start;*/
  grid-column:1/3;
  grid-row:1/4;
  background-image: url("PICTURES/bowl.jpg");
  background-size: 700px 500px;
  background-repeat: no-repeat;

}

.box2{
  /*align-self:end;*/
  grid-column:3;
  grid-row:1/4;
  background-image: url("PICTURES/tallrikshylla.jpg");
  background-size: 250px 350px;
  background-repeat: no-repeat;
}

.box3{
  /*justify-self:end;*/
  grid-column:1/4;
  grid-row: 4/8;
  background-image: url("PICTURES/setting2.jpg");
  background-size: 1000px 700px;
  background-repeat: no-repeat;
}


.wrapper2 {

  display:grid;
  grid-template-columns:fr 2fr 1fr;
  grid-auto-rows:minmax(100px, auto);
  grid-gap:1em;
  justify-items:stretch;
  align-items:stretch;
  width: 75%;
  margin: 0 auto;
}


.box4{
  grid-column: 1/3;
  grid-row: 8/13;
  background-image: url("PICTURES/setting5.jpg");
  background-repeat: no-repeat;
  background-size: 300px 500px;
}
.box5{
  grid-column: 3/4;
  grid-row: 8/13;
  background-image: url("PICTURES/setting5.jpg");
  background-repeat: no-repeat;
  background-size: 300px 500px;
}
codjl
  • 1
  • 2
  • Tell the client to right click on the page, show image background and CTRL + S. this cos you don't have any form multipart ... –  Sep 20 '17 at 20:03
  • Thanks @headmax. Is that the only solution for it? – codjl Sep 20 '17 at 20:10
  • with your example i'am afraid to said yes, we need a minimum and to upload a image you need a language server as PHP ASP JSP Nodejs server ... no ref about this :(. –  Sep 20 '17 at 20:13
  • how create a download link https://stackoverflow.com/questions/2793751/how-can-i-create-download-link-in-html if is only for download but if you want your users upload you need server side script. Regards –  Sep 20 '17 at 20:15

0 Answers0