Html Question posted in
Some basic documentation can be found here.

Html – Reduce duplication of images using javascript

I was told it can be done via javascript but I wasn’t able to figure it out.

How would I do that here with this code? https://jsfiddle.net/czqa3Lds/

Something like this I was thinking. https://jsfiddle.net/5bj72hd1/

I tried different things and wasn’t able to do it.

That is all I am trying to do here, reduce duplication of the images.

<div class="container">
  <div class="panel-left">
    <div class="inner">
      <div class="container2" id="container2-left">
        <!-- Images will be inserted here by JavaScript -->
      </div>
    </div>
  </div>

  <div class="panel-right">
    <div class="inner">
      <div class="container2" id="container2-right">
        <!-- Images will be inserted here by JavaScript -->
      </div>
    </div>
  </div>
</div>

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: #121212;
  padding: 50px 8px;
}

.panel-left,
.panel-right {
  position: fixed;
  height: 100%;
  width: 50%;
  top: 0%;
  overflow: hidden;
  z-index: 0;
  transform: translateX(0);
  transition: transform 7s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition-delay: 1s;
}

.panel-left {
  left: 0;
}

.panel-right {
  right: 0;
}

.panel-left::before,
.panel-right::before {
  content: "";
  position: fixed;

  height: 100%;
  width: 200%;
  top: 0;
  left: 0;
}

.panel-right::before {
  left: -100%;
}

.container:hover .panel-left {
  transform: translateX(-100%);
}

.container:hover .panel-right {
  transform: translateX(100%);
}

.inner {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 200%;
  position: absolute;
  left: 0;
  z-index: 2;
}
.panel-right .inner {
  left: -100%;
}

.container2 {
  max-width: 360px;
  border: 1px solid #ccc;
}

.container2 div {
  display: flex;
  justify-content: center;
}

.container2 img {
  display: block;
  margin: auto;
  width: 33.33%;
  height: auto;
}
<div class="container">
  <div class="panel-left">
    <div class="inner">
      <div class="container2">
        <img src="https://i.imgur.com/z5MMJnv.png" alt="Image 1">
        <div>
          <img src="https://i.imgur.com/5u16syR.png" alt="Image 2">
          <img src="https://i.imgur.com/ygTtvme.png" alt="Image 3">
          <img src="https://i.imgur.com/QziKNDW.png" alt="Image 4">
        </div>
        <img src="https://i.imgur.com/8Jf8LLc.png" alt="Image 5">
      </div>
    </div>
  </div>

  <div class="panel-right">
    <div class="inner">
      <div class="container2">
        <img src="https://i.imgur.com/z5MMJnv.png" alt="Image 1">
        <div>
          <img src="https://i.imgur.com/5u16syR.png" alt="Image 2">
          <img src="https://i.imgur.com/ygTtvme.png" alt="Image 3">
          <img src="https://i.imgur.com/QziKNDW.png" alt="Image 4">
        </div>
        <img src="https://i.imgur.com/8Jf8LLc.png" alt="Image 5">
      </div>
    </div>
  </div>
</div>
Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0 

    :root {
  --color-a: #1155cc;
  --color-b: black;
  --color-c: #1155cc;
  --color-d: black;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: #121212;
  padding: 50px 8px;
}

.panel-left,
.panel-right {
  position: fixed;
  height: 100%;
  width: 50%;
  top: 0%;
  overflow: hidden;
  z-index: 0;
  transform: translateX(0);
  transition: transform 7s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition-delay: 1s;
}

.panel-left {
  left: 0;
}

.panel-right {
  right: 0;
}

.panel-left::before,
.panel-right::before {
  content: "";
  position: fixed;

  height: 100%;
  width: 200%;
  top: 0;
  left: 0;

  background-image: linear-gradient(var(--color-a) 5px, #0000 5px),
    linear-gradient(90deg, var(--color-a) 5px, #0000 5px),
    linear-gradient(var(--color-b) 10px, #0000 10px 160px, var(--color-b) 160px),
    linear-gradient(
      90deg,
      var(--color-b) 10px,
      #0000 10px 160px,
      var(--color-b) 160px
    ),
    linear-gradient(var(--color-c) 15px, #0000 15px 155px, var(--color-c) 155px),
    linear-gradient(
      90deg,
      var(--color-c) 15px,
      #0000 15px 155px,
      var(--color-c) 155px
    ),
    linear-gradient(var(--color-d) 20px, #0000 20px 150px, var(--color-d) 150px),
    linear-gradient(
      90deg,
      var(--color-d) 20px,
      #0000 20px 150px,
      var(--color-d) 150px
    ),
    linear-gradient(var(--color-a) 25px, #0000 25px 145px, var(--color-a) 145px),
    linear-gradient(
      90deg,
      var(--color-a) 25px,
      #0000 25px 145px,
      var(--color-a) 145px
    ),
    linear-gradient(var(--color-b) 30px, #0000 30px 140px, var(--color-b) 140px),
    linear-gradient(
      90deg,
      var(--color-b) 30px,
      #0000 30px 140px,
      var(--color-b) 140px
    ),
    linear-gradient(var(--color-c) 35px, #0000 35px 135px, var(--color-c) 135px),
    linear-gradient(
      90deg,
      var(--color-c) 35px,
      #0000 35px 135px,
      var(--color-c) 135px
    ),
    linear-gradient(var(--color-d) 40px, #0000 40px 130px, var(--color-d) 130px),
    linear-gradient(
      90deg,
      var(--color-d) 40px,
      #0000 40px 130px,
      var(--color-d) 130px
    ),
    linear-gradient(var(--color-a) 45px, #0000 45px 125px, var(--color-a) 125px),
    linear-gradient(
      90deg,
      var(--color-a) 45px,
      #0000 45px 125px,
      var(--color-a) 125px
    ),
    linear-gradient(var(--color-b) 50px, #0000 50px 120px, var(--color-b) 120px),
    linear-gradient(
      90deg,
      var(--color-b) 50px,
      #0000 50px 120px,
      var(--color-b) 120px
    ),
    linear-gradient(var(--color-c) 55px, #0000 55px 115px, var(--color-c) 115px),
    linear-gradient(
      90deg,
      var(--color-c) 55px,
      #0000 55px 115px,
      var(--color-c) 115px
    ),
    linear-gradient(var(--color-d) 60px, #0000 60px 110px, var(--color-d) 110px),
    linear-gradient(
      90deg,
      var(--color-d) 60px,
      #0000 60px 110px,
      var(--color-d) 110px
    ),
    linear-gradient(var(--color-a) 65px, #0000 65px 105px, var(--color-a) 105px),
    linear-gradient(
      90deg,
      var(--color-a) 65px,
      #0000 65px 105px,
      var(--color-a) 105px
    ),
    linear-gradient(var(--color-b) 70px, #0000 70px 100px, var(--color-b) 100px),
    linear-gradient(
      90deg,
      var(--color-b) 70px,
      #0000 70px 100px,
      var(--color-b) 100px
    ),
    linear-gradient(var(--color-c) 75px, #0000 75px 95px, var(--color-c) 95px),
    linear-gradient(
      90deg,
      var(--color-c) 75px,
      #0000 75px 95px,
      var(--color-c) 95px
    ),
    linear-gradient(var(--color-d) 80px, #0000 80px 90px, var(--color-d) 90px),
    linear-gradient(
      90deg,
      var(--color-d) 80px,
      #0000 80px 90px,
      var(--color-d) 90px
    ),
    linear-gradient(var(--color-a), var(--color-a));
  background-size: 165px 165px;
}

.panel-right::before {
  left: -100%;
}

.container:hover .panel-left {
  transform: translateX(-100%);
}

.container:hover .panel-right {
  transform: translateX(100%);
}

.inner {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 200%;
  position: absolute;
  left: 0;
  z-index: 2;
}
.panel-right .inner {
  left: -100%;
}

.container2 {
  max-width: 360px;
  border: 1px solid #ccc;
}

.container2 div {
  display: flex;
  justify-content: center;
}

.container2 img {
  display: block;
  margin: auto;
  width: 33.33%;
  height: auto;
}
      <div class="container">
    <div class="panel-left">
      <div class="inner"></div>
    </div>
    <div class="panel-right">
      <div class="inner"></div>
    </div>
  </div>

  <template id="image-template">
    <div class="container2">
      <img src="https://i.imgur.com/z5MMJnv.png" alt="Image 1">
      <div>
        <img src="https://i.imgur.com/5u16syR.png" alt="Image 2">
        <img src="https://i.imgur.com/ygTtvme.png" alt="Image 3">
        <img src="https://i.imgur.com/QziKNDW.png" alt="Image 4">
      </div>
      <img src="https://i.imgur.com/8Jf8LLc.png" alt="Image 5">
    </div>
  </template>

  <script>
    document.addEventListener('DOMContentLoaded', function(event) {
      const template = document.getElementById('image-template');
      const containerLeft = document.querySelector('.panel-left .inner');
      const containerRight = document.querySelector('.panel-right .inner');

      const cloneLeft = document.importNode(template.content, true);
      const cloneRight = document.importNode(template.content, true);

      containerLeft.appendChild(cloneLeft);
      containerRight.appendChild(cloneRight);
    });

  </script>


  2. 0 
    :root {
  --color-a: #1155cc;
  --color-b: black;
  --color-c: #1155cc;
  --color-d: black;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: #121212;
  padding: 50px 8px;
}

.panel-left,
.panel-right {
  position: fixed;
  height: 100%;
  width: 50%;
  top: 0%;
  overflow: hidden;
  z-index: 0;
  transform: translateX(0);
  transition: transform 7s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition-delay: 1s;
}

.panel-left {
  left: 0;
}

.panel-right {
  right: 0;
}

.panel-left::before,
.panel-right::before {
  content: "";
  position: fixed;

  height: 100%;
  width: 200%;
  top: 0;
  left: 0;

  background-image: linear-gradient(var(--color-a) 5px, #0000 5px),
    linear-gradient(90deg, var(--color-a) 5px, #0000 5px),
    linear-gradient(var(--color-b) 10px, #0000 10px 160px, var(--color-b) 160px),
    linear-gradient(
      90deg,
      var(--color-b) 10px,
      #0000 10px 160px,
      var(--color-b) 160px
    ),
    linear-gradient(var(--color-c) 15px, #0000 15px 155px, var(--color-c) 155px),
    linear-gradient(
      90deg,
      var(--color-c) 15px,
      #0000 15px 155px,
      var(--color-c) 155px
    ),
    linear-gradient(var(--color-d) 20px, #0000 20px 150px, var(--color-d) 150px),
    linear-gradient(
      90deg,
      var(--color-d) 20px,
      #0000 20px 150px,
      var(--color-d) 150px
    ),
    linear-gradient(var(--color-a) 25px, #0000 25px 145px, var(--color-a) 145px),
    linear-gradient(
      90deg,
      var(--color-a) 25px,
      #0000 25px 145px,
      var(--color-a) 145px
    ),
    linear-gradient(var(--color-b) 30px, #0000 30px 140px, var(--color-b) 140px),
    linear-gradient(
      90deg,
      var(--color-b) 30px,
      #0000 30px 140px,
      var(--color-b) 140px
    ),
    linear-gradient(var(--color-c) 35px, #0000 35px 135px, var(--color-c) 135px),
    linear-gradient(
      90deg,
      var(--color-c) 35px,
      #0000 35px 135px,
      var(--color-c) 135px
    ),
    linear-gradient(var(--color-d) 40px, #0000 40px 130px, var(--color-d) 130px),
    linear-gradient(
      90deg,
      var(--color-d) 40px,
      #0000 40px 130px,
      var(--color-d) 130px
    ),
    linear-gradient(var(--color-a) 45px, #0000 45px 125px, var(--color-a) 125px),
    linear-gradient(
      90deg,
      var(--color-a) 45px,
      #0000 45px 125px,
      var(--color-a) 125px
    ),
    linear-gradient(var(--color-b) 50px, #0000 50px 120px, var(--color-b) 120px),
    linear-gradient(
      90deg,
      var(--color-b) 50px,
      #0000 50px 120px,
      var(--color-b) 120px
    ),
    linear-gradient(var(--color-c) 55px, #0000 55px 115px, var(--color-c) 115px),
    linear-gradient(
      90deg,
      var(--color-c) 55px,
      #0000 55px 115px,
      var(--color-c) 115px
    ),
    linear-gradient(var(--color-d) 60px, #0000 60px 110px, var(--color-d) 110px),
    linear-gradient(
      90deg,
      var(--color-d) 60px,
      #0000 60px 110px,
      var(--color-d) 110px
    ),
    linear-gradient(var(--color-a) 65px, #0000 65px 105px, var(--color-a) 105px),
    linear-gradient(
      90deg,
      var(--color-a) 65px,
      #0000 65px 105px,
      var(--color-a) 105px
    ),
    linear-gradient(var(--color-b) 70px, #0000 70px 100px, var(--color-b) 100px),
    linear-gradient(
      90deg,
      var(--color-b) 70px,
      #0000 70px 100px,
      var(--color-b) 100px
    ),
    linear-gradient(var(--color-c) 75px, #0000 75px 95px, var(--color-c) 95px),
    linear-gradient(
      90deg,
      var(--color-c) 75px,
      #0000 75px 95px,
      var(--color-c) 95px
    ),
    linear-gradient(var(--color-d) 80px, #0000 80px 90px, var(--color-d) 90px),
    linear-gradient(
      90deg,
      var(--color-d) 80px,
      #0000 80px 90px,
      var(--color-d) 90px
    ),
    linear-gradient(var(--color-a), var(--color-a));
  background-size: 165px 165px;
}

.panel-right::before {
  left: -100%;
}

.container:hover .panel-left {
  transform: translateX(-100%);
}

.container:hover .panel-right {
  transform: translateX(100%);
}

.inner {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 200%;
  position: absolute;
  left: 0;
  z-index: 2;
}
.panel-right .inner {
  left: -100%;
}

.container2 {
  max-width: 360px;
  border: 1px solid #ccc;
}

.container2 div {
  display: flex;
  justify-content: center;
}

.container2 img {
  display: block;
  margin: auto;
  width: 33.33%;
  height: auto;
}
    <div class="container">
  <div class="panel-left">
    <div class="inner"></div>
  </div>
  <div class="panel-right">
    <div class="inner"></div>
  </div>
</div>

<template id="image-template">
  <div class="container2">
    <img src="https://i.imgur.com/z5MMJnv.png" alt="Image 1">
    <div>
      <img src="https://i.imgur.com/5u16syR.png" alt="Image 2">
      <img src="https://i.imgur.com/ygTtvme.png" alt="Image 3">
      <img src="https://i.imgur.com/QziKNDW.png" alt="Image 4">
    </div>
    <img src="https://i.imgur.com/8Jf8LLc.png" alt="Image 5">
  </div>
</template>

<script>
  (function() {
    const template = document.getElementById('image-template');
    const containerLeft = document.querySelector('.panel-left .inner');
    const containerRight = document.querySelector('.panel-right .inner');

    const cloneLeft = document.importNode(template.content, true);
    const cloneRight = document.importNode(template.content, true);

    containerLeft.appendChild(cloneLeft);
    containerRight.appendChild(cloneRight);
  })();
</script>
    Login or Signup to reply.
  3. 0 
    :root {
  --color-a: #1155cc;
  --color-b: black;
  --color-c: #1155cc;
  --color-d: black;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: #121212;
  padding: 50px 8px;
}

.panel-left,
.panel-right {
  position: fixed;
  height: 100%;
  width: 50%;
  top: 0%;
  overflow: hidden;
  z-index: 0;
  transform: translateX(0);
  transition: transform 7s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition-delay: 1s;
}

.panel-left {
  left: 0;
}

.panel-right {
  right: 0;
}

.panel-left::before,
.panel-right::before {
  content: "";
  position: fixed;

  height: 100%;
  width: 200%;
  top: 0;
  left: 0;

  background-image: linear-gradient(var(--color-a) 5px, #0000 5px),
    linear-gradient(90deg, var(--color-a) 5px, #0000 5px),
    linear-gradient(var(--color-b) 10px, #0000 10px 160px, var(--color-b) 160px),
    linear-gradient(
      90deg,
      var(--color-b) 10px,
      #0000 10px 160px,
      var(--color-b) 160px
    ),
    linear-gradient(var(--color-c) 15px, #0000 15px 155px, var(--color-c) 155px),
    linear-gradient(
      90deg,
      var(--color-c) 15px,
      #0000 15px 155px,
      var(--color-c) 155px
    ),
    linear-gradient(var(--color-d) 20px, #0000 20px 150px, var(--color-d) 150px),
    linear-gradient(
      90deg,
      var(--color-d) 20px,
      #0000 20px 150px,
      var(--color-d) 150px
    ),
    linear-gradient(var(--color-a) 25px, #0000 25px 145px, var(--color-a) 145px),
    linear-gradient(
      90deg,
      var(--color-a) 25px,
      #0000 25px 145px,
      var(--color-a) 145px
    ),
    linear-gradient(var(--color-b) 30px, #0000 30px 140px, var(--color-b) 140px),
    linear-gradient(
      90deg,
      var(--color-b) 30px,
      #0000 30px 140px,
      var(--color-b) 140px
    ),
    linear-gradient(var(--color-c) 35px, #0000 35px 135px, var(--color-c) 135px),
    linear-gradient(
      90deg,
      var(--color-c) 35px,
      #0000 35px 135px,
      var(--color-c) 135px
    ),
    linear-gradient(var(--color-d) 40px, #0000 40px 130px, var(--color-d) 130px),
    linear-gradient(
      90deg,
      var(--color-d) 40px,
      #0000 40px 130px,
      var(--color-d) 130px
    ),
    linear-gradient(var(--color-a) 45px, #0000 45px 125px, var(--color-a) 125px),
    linear-gradient(
      90deg,
      var(--color-a) 45px,
      #0000 45px 125px,
      var(--color-a) 125px
    ),
    linear-gradient(var(--color-b) 50px, #0000 50px 120px, var(--color-b) 120px),
    linear-gradient(
      90deg,
      var(--color-b) 50px,
      #0000 50px 120px,
      var(--color-b) 120px
    ),
    linear-gradient(var(--color-c) 55px, #0000 55px 115px, var(--color-c) 115px),
    linear-gradient(
      90deg,
      var(--color-c) 55px,
      #0000 55px 115px,
      var(--color-c) 115px
    ),
    linear-gradient(var(--color-d) 60px, #0000 60px 110px, var(--color-d) 110px),
    linear-gradient(
      90deg,
      var(--color-d) 60px,
      #0000 60px 110px,
      var(--color-d) 110px
    ),
    linear-gradient(var(--color-a) 65px, #0000 65px 105px, var(--color-a) 105px),
    linear-gradient(
      90deg,
      var(--color-a) 65px,
      #0000 65px 105px,
      var(--color-a) 105px
    ),
    linear-gradient(var(--color-b) 70px, #0000 70px 100px, var(--color-b) 100px),
    linear-gradient(
      90deg,
      var(--color-b) 70px,
      #0000 70px 100px,
      var(--color-b) 100px
    ),
    linear-gradient(var(--color-c) 75px, #0000 75px 95px, var(--color-c) 95px),
    linear-gradient(
      90deg,
      var(--color-c) 75px,
      #0000 75px 95px,
      var(--color-c) 95px
    ),
    linear-gradient(var(--color-d) 80px, #0000 80px 90px, var(--color-d) 90px),
    linear-gradient(
      90deg,
      var(--color-d) 80px,
      #0000 80px 90px,
      var(--color-d) 90px
    ),
    linear-gradient(var(--color-a), var(--color-a));
  background-size: 165px 165px;
}

.panel-right::before {
  left: -100%;
}

.container:hover .panel-left {
  transform: translateX(-100%);
}

.container:hover .panel-right {
  transform: translateX(100%);
}

.inner {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 200%;
  position: absolute;
  left: 0;
  z-index: 2;
}
.panel-right .inner {
  left: -100%;
}

.container2 {
  max-width: 360px;
  border: 1px solid #ccc;
}

.container2 div {
  display: flex;
  justify-content: center;
}

.container2 img {
  display: block;
  margin: auto;
  width: 33.33%;
  height: auto;
}
    <template id="my-template">
  <img src="https://i.imgur.com/z5MMJnv.png" alt="Image 1">
  <div>
    <img src="https://i.imgur.com/5u16syR.png" alt="Image 2">
    <img src="https://i.imgur.com/ygTtvme.png" alt="Image 3">
    <img src="https://i.imgur.com/QziKNDW.png" alt="Image 4">
  </div>
  <img src="https://i.imgur.com/8Jf8LLc.png" alt="Image 5">
</template>

<div class="container">
  <div class="panel-left">
    <div class="inner">
      <div class="container2"></div>
    </div>
  </div>

  <div class="panel-right">
    <div class="inner">
      <div class="container2"></div>
    </div>
  </div>
</div>

<script>
  const template = document.getElementById("my-template")
  for (const container of document.querySelectorAll(".container2")) {
    container.appendChild(template.content.cloneNode(true))
  }

</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search