CODEWITHSUNDEEP
javascriptcss
HamiD
HamiD

Reputation: 1090

How to create a Gallery which images get bigger in the middle

I want to create a gallery which the images get bigger in the middle. enter image description here The ammont of images are random.

With this code, I could find the middle, but I dont know how to change the size of the Images ascendens and/or descendant.

var boxes = document.querySelectorAll(".box");
var middle = boxes[Math.round((boxes.length - 1) / 2)];
middle.style.width = "70px"
middle.style.height= "70px"
.container{
  display:flex;
  justify-content:center;
  align-items:center;
}
.box{
  width:50px;
  height:50px;
  background-color:black;
  margin:10px;
}
<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Upvotes: 0

Views: 91

Answers (2)

Jostein S
Jostein S

Reputation: 466

Same as the other answer except the size calculation is moved to CSS

const boxes = document.querySelectorAll(".box");
let middle = Math.floor((boxes.length - 1) / 2);

const reductionModifier = 4; //Reduces size diff, higher means less diff.
const marginModifier = -1; //-1 means margin will be -10px

boxes.forEach((e, i) => {
    e.style.setProperty('--s',  1 - ((Math.abs(i - middle) / boxes.length) / reductionModifier));
    e.style.setProperty('--m', i == middle ? 1 : marginModifier);
    e.style.setProperty('--z',  1 - Math.abs(i - middle));
});
.container{
  display:flex;
  justify-content:center;
  align-items:center;
}

.box {
  border: 1px solid red;
  width: calc(70px * var(--s));
  height: calc(70px * var(--s));
  background-color:black;
  margin: calc(10px * var(--m));
  z-index: calc(10 * var(--z));
}
<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Upvotes: 1

rszf
rszf

Reputation: 201

something like this.. you can play with the number, depending on how much bigger or smaller you want them..

var boxes = document.querySelectorAll(".box");
var middle_index = Math.round((boxes.length - 1) / 2);
for ( var i=0; i<boxes.length; i++) {
boxes[i].style.width =  `${70-Math.abs(boxes.length-i*2-1)*5}px`;
boxes[i].style.height = `${70-Math.abs(boxes.length-i*2-1)*5}px`;
}
.container{
  display:flex;
  justify-content:center;
  align-items:center;
}
.box{
  width:50px;
  height:50px;
  background-color:black;
  margin:10px;
}
<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Upvotes: 2

Related Questions