Create a plus sign using 5 images that is responsive

asasass · January 29, 2024, 3:53pm

I am trying to figure out a way to reduce duplication of the images.

Maybe it is in the way I am asking Bing Chat.

Prompt:

Create code that will reduce duplication of images that uses plain javascript.

This was one attempt:

<div class="slide panel-left">
  <div class="inner">
    <div class="container2">
      <!-- Images will be added here by JavaScript -->
    </div>
  </div>
</div>

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


<script>
// Array of image sources
var imageSources = [
  "https://i.imgur.com/z5MMJnv.png",
  "https://i.imgur.com/5u16syR.png",
  "https://i.imgur.com/ygTtvme.png",
  "https://i.imgur.com/QziKNDW.png",
  "https://i.imgur.com/8Jf8LLc.png"
];

// Function to create image elements
function createImages(container, sources) {
  sources.forEach(function(source) {
    var img = document.createElement('img');
    img.src = source;
    container.appendChild(img);
  });
}

// Get the containers
var container1 = document.querySelector('.panel-left .container2');
var container2 = document.querySelector('.panel-right .container2');

// Create the images
createImages(container1, imageSources);
createImages(container2, imageSources);
</script>

Another attempt: https://jsfiddle.net/zbs97knv/11/

<script>
var images = [
  {src: "https://i.imgur.com/z5MMJnv.png", alt: "Image 1"},
  {src: "https://i.imgur.com/5u16syR.png", alt: "Image 2"},
  {src: "https://i.imgur.com/ygTtvme.png", alt: "Image 3"},
  {src: "https://i.imgur.com/QziKNDW.png", alt: "Image 4"},
  {src: "https://i.imgur.com/8Jf8LLc.png", alt: "Image 5"}
];

function createImageHTML(image) {
  return '<img src="' + image.src + '" alt="' + image.alt + '">';
}

document.querySelectorAll('.slide .container2').forEach(function(container) {
  container.innerHTML = images.map(createImageHTML).join('');
});
</script>

PaulOB · January 29, 2024, 4:01pm

Why bother?

It’s the same html at the end of the day whether you add them with js or just put them there by default?

Why involve js when html does the job on its own. All you are doing with js is slowing everything down again.

You may be able to reduce code by using background images but I’d have to think about that.

asasass · January 29, 2024, 4:10pm

AI said this: but I most likely didn’t ask the prompt the right way.

Create code that uses background images in the CSS instead of html images:

.container2 div {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

<div class="slide panel-left" style="background-image: url('https://i.imgur.com/z5MMJnv.png');">
  <div class="inner">
    <div class="container2">
      <div style="background-image: url('https://i.imgur.com/5u16syR.png'), url('https://i.imgur.com/ygTtvme.png'), url('https://i.imgur.com/QziKNDW.png');">
      </div>
      <div style="background-image: url('https://i.imgur.com/8Jf8LLc.png');"></div>
    </div>
  </div>
</div>

<div class="slide panel-right" style="background-image: url('https://i.imgur.com/z5MMJnv.png');">
  <div class="inner">
    <div class="slide container2">
      <div style="background-image: url('https://i.imgur.com/5u16syR.png'), url('https://i.imgur.com/ygTtvme.png'), url('https://i.imgur.com/QziKNDW.png');">
      </div>
      <div style="background-image: url('https://i.imgur.com/8Jf8LLc.png');"></div>
    </div>
  </div>
</div>

PaulOB · January 29, 2024, 6:48pm

Did you try it and did it work?

If it works then you can of course change the inline styles and just use a class on the element to keep the html clean otherwise you are no better off than before.

asasass · January 29, 2024, 8:40pm

It didn’t do anything in the code.

PaulOB · January 30, 2024, 1:22pm

I was thinking more of something like this:

<div class="panel-left">
  <div class="inner"><span></span></div>
</div>

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

I don’t know how stable it will be though and is based on the viewport height whereas your squares are limited to about 120px.

asasass · January 30, 2024, 4:41pm

This one uses flex: https://jsfiddle.net/ow7y3ct0/1/

.inner {
  height: 100%;
  width: 200%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: auto;
}

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

.inner span,
.inner span:before,
.inner span:after,
.inner:before,
.inner:after {
  aspect-ratio: 1;
  margin: auto;
  height: 100%;
}

.inner:before {
  content: "";
  background: url(https://i.imgur.com/z5MMJnv.png);
}

.inner:after {
  content: "";
  background: url(https://i.imgur.com/8Jf8LLc.png);
}

.inner span {
  background: url(https://i.imgur.com/5u16syR.png);
  position: relative;
}

.inner span:before,
.inner span:after {
  content: "";
  display: block;
  position: absolute;
  inset: 0 0 0 0;
}

.inner span:before {
  background: url(https://i.imgur.com/ygTtvme.png);
  transform: translateX(-99.99%);
}

.inner span:after {
  background: url(https://i.imgur.com/QziKNDW.png);
  transform: translateX(99.99%);
}

.inner span,
.inner span:before,
.inner span:after,
.inner:before,
.inner:after {
  background-size: cover;
}

asasass · January 30, 2024, 5:06pm

The hover code there, the hover part is not working.

PaulOB · January 30, 2024, 7:37pm

Same difference really.

It’s working in my demo and in your demo so not sure what you mean.

asasass · January 30, 2024, 9:37pm

In your 1st code example you are missing .container in the html.

Working hover code. https://jsfiddle.net/76rsn30d/

asasass · January 30, 2024, 9:55pm

The codes using flex and grid, the 5 images get smaller based on its height.

The images in the html, it gets smaller based on its width.

Moving the browser window left and right has no effect on the plus image.

It’s only when you move the browser window up and down do you see a change in its size.

The images in the html is the opposite of that.

The differences I noticed.

PaulOB · January 30, 2024, 11:22pm

No you can’t use container as there are already container classes in the real page.

I just used the hover on the body instead for the demo. It is working everywhere but you have to put your mouse over the background and not the squares. It’s only for the demo so is unimportant.

Yes that’s what I told you and makes more sense to me

Yes that’s correct as I based it on the height as that works better for all. Your version overflows in the opposite direction or is too small you can’t see it under the video.

Both versions have the same problems but in different directions.

asasass · January 31, 2024, 8:18am

Hover doesn’t work unless it is in the html.

It’s not attached to the body.

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

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

PaulOB · January 31, 2024, 8:33am

Don’t talk nonsense. Hover works on the body fine.

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

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

There is no container in my demo.

asasass · January 31, 2024, 8:47am

I was referring to your first demo code, the one with the images inside the html.

Post #10

That hover code is not working.

PaulOB · January 31, 2024, 11:51am

Yes that one needs the rule I mentioned as I removed the container afterwards.

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

asasass · February 1, 2024, 10:44pm

Would this way be able to be figured out?
https://jsfiddle.net/uwtpoyzd/

It’s not responsive though, not sure if that can be added to it.

.img1 {
  background-image: url('https://i.imgur.com/z5MMJnv.png');
}

.img2 {
  background-image: url('https://i.imgur.com/5u16syR.png');
}

.img3 {
  background-image: url('https://i.imgur.com/ygTtvme.png');
}

.img4 {
  background-image: url('https://i.imgur.com/QziKNDW.png');
}

.img5 {
  background-image: url('https://i.imgur.com/8Jf8LLc.png');
}
.img1, .img2, .img3, .img4, .img5 {
  width: 100px; /* adjust as needed */
  height: 100px; /* adjust as needed */
  background-size: cover;
}

<div class="container">
  <div class="panel-left">
    <div class="inner">
      <div class="container2">
        <div class="img1"></div>
        <div>
          <div class="img2"></div>
          <div class="img3"></div>
          <div class="img4"></div>
        </div>
        <div class="img5"></div>
      </div>
    </div>
  </div>

  <div class="panel-right">
    <div class="inner">
      <div class="container2">
        <div class="img1"></div>
        <div>
          <div class="img2"></div>
          <div class="img3"></div>
          <div class="img4"></div>
        </div>
        <div class="img5"></div>
      </div>
    </div>
  </div>
</div>

asasass · February 2, 2024, 12:38am

Code 1 https://jsfiddle.net/puehfna3/1/

<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>

Code 2 https://jsfiddle.net/puehfna3/

<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>

Code 3 https://jsfiddle.net/puehfna3/2/

<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>

asasass · February 2, 2024, 8:03am

Code 4) https://jsfiddle.net/jxk90nep/1/

<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 templateContent = document.getElementById('image-template').content;
  var selectors = ['.panel-left .inner', '.panel-right .inner'];
  
  selectors.forEach(function(selector) {
    const container = document.querySelector(selector);
    const clone = templateContent.cloneNode(true);
    
    container.appendChild(clone);
  });
})();
</script>

<!--<script>
(function() {
  const templateContent = document.getElementById('image-template').content;
  ['.panel-left .inner', '.panel-right .inner'].forEach(function(selector) {
    const container = document.querySelector(selector);
    container.appendChild(templateContent.cloneNode(true));
  });
})();

</script>-->

PaulOB · February 3, 2024, 3:45pm

Was there a question?

Or are you just showing us the results of your chat with AI ?