Hoover on repeater button

[CODE-NINJA]

Well, i think i have to step in now.

First let us inspect your setup! I see a lot of alarming problems regarding your setup.

1. You say that your repeater is already connected to a dataset.
2. But at same time you are feeding your repeater by wix-data.
3. Again → $w('yourDatasetId).onReady() ← missing.
4. Retrieving the same data out of database, just to load an image makes no sense if the data do not change! → At least even if it would still be a bad solution, you could load the data into a variable and iterate trough it, which would already save you some loading time, because you load it only ONCE and then just use it.
5. You must understand, that AS SOON AS YOU USE A → DATASET ← you have to pay attention on how you mix it up with → CODE ← especially if you are mixing it with Wix-Data.
   The DATASET has it’s own processflow and it do not pay attention onto code.
   You can imagine it like 2 in parallel running tasks independet from eachother.

You were able to solve your own question, if it is possible to control external buttons from → WITHING THE REPEATER<–. And YES, the answer is → YES it is possible.
If you have already read this post →

Showing Values from Collection in Repeaters - Code Stopped Working

Dean was asking you about the DATASET not out of nowhere. Normaly you should first wait for the DATASET to be ready first when you are interacting with Wix-Data → (Mixing Wix-Data+CODE and an already setted-up DATASET). In none of provided codes i could find something like… //Importing the neccessary libraries... (in your case wix-data) import wixData from 'wix-data'; // This code is executed when the page is ready $w.onReady(async()=> { $w('#myDataset').onReady(()=>{ //... …

Then you will even know how exactly to control external and internal elements of a REPEATER.

Well, your idea was to generate the following code…

import wixData from 'wix-data';

$w.onReady(function () {
  wixData.query("LOCALI_COMMERCIALI")
    .find()
    .then((results) => {
      if (results.items.length > 0) {
        const items = results.items;
        $w("#repeater1").data = items;
        $w("#repeater1").onItemReady(($item, itemData, index) => {
          $item("#button1").onMouseIn(() => {
            $w("#imageX18").src = itemData.image;
            $w("#imageX18").show("fade" , { duration: 25});	
          });
          $item("#button1").onMouseOut(() => {
            $w("#imageX18").hide("fade" , { duration: 50});
          });
        });
      }
    });
});

Which was not a bad idea → but back again to my introduction, you recognize very fast, that you get into trouble! And if you have read all the posts about the USER-INTERFACE of other users having the similar or even identical issues, which mainly also did not understand why NOT to mix a DATASET connected setup with CODE in parallel, you would already stop trying to drive against a wall.

Well, but since we are already on fire, we need now some water!

By the way, the USER-INTERFACE itself is just a little HELPER, which can make your coding life easier in many cases if you use it.

Ok, what could be the exact issue here? We already know one possible problem…

1. Mixing-up DATASET and CODE processes in paralel.
   Second one could be…
2. You are changing the image sourceand while doing some fadind at the same time, The browser maybe still not ready and still loading the new image, but fading already working.
   So it fades in the old one but then switches over to the new one and this could already be the issue.

You can try to increase the fading DURATION to be able to see this sideefect maybe even better. GLITCHES in most cases comes from loading times and delayed actions, like in this case i think.

So as you can see, we have here some kind of a CHAIN-REACTION, caused by wrong handling of DATASET and CODE.

So i think we have here different options of how to resolve the issue.

1. You go the total CODING-WAY, which will give you total freedom and space for all your wished features and functions and creativity, without causing you a lot of headaches (pure code controled version).

2. You rely on your already implemented dataset and you try ANOTHER CODE …
   

   
   
   Since your repeater is already connected with your dataset, it could be the perfect solution and you do not need to load the data twice.

Everything about REPEATER you can read here —> Repeater Introduction | Velo

3. You try this one one more time…

$w.onReady(function () {
 $w('#dataset1').onReady(()=>{
  $w("#repeater1").onItemReady(($item, itemData, index) => {
    $item("#button1").onMouseIn(() => {
      // Instantly hide the current image (no fade-out delay)
      $w("#imageX18").hide("fade", { duration: 0 });

      // Change the source of the image
      $w("#imageX18").src = itemData.image;

      // Wait until the new image is loaded before fading in
      $w("#imageX18").onLoad(() => {
        $w("#imageX18").show("fade", { duration: 250 });
      });
    });

    $item("#button1").onMouseOut(() => {
      // Hide the image on mouse out to reveal the default one behind
      $w("#imageX18").hide("fade", { duration: 100 });
    });
  });
 });
});

I am currious if you need wixData at all.

Let us know what was your solution.