Embed Code Widget, images not appearing

Ask the community
,
1

Hello everyone!

I am completely new to coding and use Chat GPT to write my code.
I am trying to create a widget that automatically lets 4 png files change every 4 seconds.
In my case, the files all have the same format, I only want that a small aspect of my brand logo changes into different colours every 4 seconds, which is why I use 4 different images with all the different colour changes.

I saved the png’s into the beginning default folder of wix called ‘Site Files’. Is this the same as ‘media’ used by Chat GPT?

So far, Chat GPT provided me with this code:

When I execute the code, this appears:

874×792 23.1 KB

What could be the problem why the images are not visually appearing?
I have asked Chat GPT to create code for different widgets using images as well and images are never appearing.

Thank you for your help!!
Paul

2

It looks looks fine. Are you sure the links themselves are not broken? It there an error in the console? If you open the browser dev tools network tab and look at the image requests, what do you see?

3

Hi,

thank you very much for your help!!
There is no error in the Wix HTML console, however I dont even know how to identify an error because when I type something completely random and press ‘update’, it looks the same with no error message.

If I highlight the first link above and click ‘inspect’ (I hope that’s what you mean), this appears:

1108×1224 175 KB

Is there any other way to lead the algorithm to the png files, without links?

I also tried it this way, using jpg files instead of png, who are also saved in the normal media gallery of my wix editor (not in any folder):

First image
.hover-image img:not(:first-child) { display: none; }

Unfortunately, this also doesn’t work and appears like this:

1626×1102 133 KB

Do you maybe have any other idea?

Thank you very much again for your help :slight_smile:
Paul

4

The URLs here don’t look like an external Wix media URLs.
If you take the URL and put it in the browser address line - do you get the image?

5

No, then it says ‘Forbidden’

6

Example…

<html>

<head>
  <title>Pic-Test</title>

  <script>
    document.getElementById("aaa").src = "https://www.shutterstock.com/image-photo/cute-shocked-cat-surprised-emotions-260nw-286039691.jpg";
  </script>

</head>

<body>
  <div id="aaa">
    <img id="bbb" alt="bbb">
  </div>

  <script>
    document.getElementById("bbb").src = "https://www.shutterstock.com/image-photo/cute-shocked-cat-surprised-emotions-260nw-286039691.jpg";
    let imageSources = [];
    imageSources[0] = "https://www.boredpanda.com/blog/wp-content/uploads/2023/01/The-internet-is-in-love-with-this-photographer-who-takes-amazing-and-funny-pictures-of-cats-53-Pics-63c12ceb8d85a__700.jpg";
    imageSources[1] = "https://www.shutterstock.com/image-photo/cute-shocked-cat-surprised-emotions-260nw-286039691.jpg";
    imageSources[2] = "https://t4.ftcdn.net/jpg/01/89/49/89/360_F_189498933_OeutsN0mMlzJGaJZJvkXIsoSCUCFIO7W.jpg";
    imageSources[3] = "https://cdn.shopify.com/s/files/1/1167/2624/collections/Funny_Cat_Cards_1000x1000.png?v=1663150894"

    function getRandomImageSource() {
      console.log("Running...");
      return imageSources[Math.floor(Math.random() * imageSources.length)];
    }
    let imageX = document.getElementById("bbb");
    imageX.addEventListener("mouseenter", mouseEnter);
    imageX.addEventListener("mouseleave", mouseLeave);

    function mouseEnter() {
      console.log("element-entered");
      let randomPic = getRandomImageSource();
      imageX.src = randomPic;
    }

    function mouseLeave() {
      console.log("element-leaved");
      imageX.src = imageSources[1];
    }
  </script>
</body>

</html>
7

Hi :slight_smile:

Thank you very much for your help! When I entered your code, it worked! When I asked ChatGPT to change the code so the images randomly and automatically change every 4 seconds, removing the function of changing the images by hovering over them, it gave me this and it worked yeyyy :slight_smile:

Pic-Test
bbb

However, I would like use the images from my wix media library (not stored in folders). When I do so by using links like this ‘https://static.wixstatic.com/media/logo1.png’, it does not work.
What do I need to change in the file path link so I can use images from my main wix media folder? The names of the images are: logo1.png, logo2.png, logo3.png and logo4.png.

Thank you very much for your help!!!

8

So at this point ChatGPT gave-up? :grin:
A good-coder never gives-up :wink:

How ever, if you want to establish a communication between your page and your HTML-Component, you will need the following… read it and try to understand how it works…

https://www.wix.com/velo/reference/$w/htmlcomponent/postmessage

https://www.wix.com/velo/reference/$w/htmlcomponent/onmessage

If you understand this 2 API-functions, you will be able to generate exactly what you need.

9

Ohhh thank you it worked!! The problem at the end was that I used the image names in the wix media folder instead of the link that you can get for each image when clicking the three dots.

Here is the code for anyone wondering:

Pic-Test #aaa { width: 100%; height: 100%; } 
#bbb { 
  width: 100%; 
  height: 100%; 
  object-fit: contain; 
}
bbb