Change image when hovering on repeater

[phil76275]

I am trying to change a large background image when I hover over a repeater button. The background image is associated with the repeater in the CMS.

my little example site here:

Home | My Site

When I hover over the button in repeater (red blue green) I would like to change the large background image above to the one that is associated in the CMS. Seems like it should be simple but I dont know how to make it happen.

I am not a coder and have no experience with this, it is just a little project I am trying to solve out of interest.

Appreciate any help!

[CODE-NINJA]

[Question about if your wished feature is possible → YES it is!
Question about if you can do it without CODE -------> NO, you can’t.

1. Of you have a repeater on your page.
2. You have also already generated a database and connected it with a dataset?
3. Your buttons are already clickable like it seems.

But before i provide you code…
…you first read this…

Hoover on repeater button

Open the provided site again. Switch between first 2 elements! Switch between 3 and 4 element! The background image is now hidden and no fade-out or in is activated now. Test it on your side in the published version, provided here… You will recognize something strange. But Do you also feel it is working faster on position 1 and 2 ? VIDEO This is how it looks like on my side. What has been done so far… FIRST-TRY: Optimization-attempt by the mentioned own variable, preloaded…(which did …

There you will find enough information about how to use → REPEATERS ←

[phil76275]

CODE-NINJA : thanks for the reply. I have read a lot in the last few hours but I will do more research before I come back with questions. I need to learn some basic Velo coding I think!

I appreciate the guidance.

[phil76275]

I spent probably too long on this, but I think I got it.

Home | My Site

One other question - I could only do this with an image in a container. If the section has a background, how do you know what the background unique ID is? It doesnt show in the layers panel?

Thanks again for pointing me in the right direction.

[CODE-NINJA]

@phil76275

I need to learn some basic Velo coding I think!

That’s a good attitude

Do you have already experience in any of programming languages?
1) JS
2) HTML
3) CSS
4) Python
5) C#
6) C++
7) VBA-Script
8) any???

To be able to swim in the cold water of coding, at least you will have to learn JS. Without JS you are a → NOBODY ←

If you can combine [JS, CSS & HTML] → you will become a Web-Developer.
If you can combine [JS, CSS, HTML and Pyhton] → You will become a SUPER-CODER, able to code the WORLD.

And if you are able work even with other mentioned programming languages including Wix-Velo, ANGULAR or REACT–> then you are the PROGRAMMING-GOD (GOD-MODE-ON)

Well, but let us keep things simple.
To boost you a little bit up, type in → USER-INTERFACE ← into the searchbar, and you will find tons of reading material for your usecase (regarding the REPATER).

To brake it down even more…

1. Activate first the DEV-MODE (developer-mode) in your wix-editor.
   Adjust the font size of a submenu item in the hamburger menu - #7 by CODE-NINJA

2. Understand that currently there are 2-different Wix-Editors active.
   a) Ordinary Wix-Editor
   b) Wix-Studio
   Both editors do act different.

3. Stydy first all Wix-Elements and APIs (inside Wix-API-DOCs), to understand what is possible and what not.

4. At same time try to code something (no matter what) using the Wix-Editor/Wix-Studio) to learn the controlling of both Editors (or at least one of them of your choice)

5. … and so on and so on… YOUR JOURNEY HAS JUST BEGUN !!!

[CODE-NINJA]

You did it…

1. DATASET-driven?
2. …or by CODE ?

If by code, how do look like your code?

[phil76275]

Hello -

This is the code I used - it is the only code I have ever written in my life. The post you linked to helped me immensely.,

import wixData from “wix-data”;

$w.onReady(function () {

$w(“#repeater2”).onItemReady(($item, itemData, index) => {

$item("#button2").onMouseIn(() => {
  $w("#mainimage").src = itemData.image;
  $w("#mainimage").show();
});

// $item(“#button2”).onMouseOut(() => {
// $w(“#mainimage”).hide();
// });

});

wixData
.query(“testdata”)
.find()
.then((results) => {
if (results.items.length > 0) {
const items = results.items;
$w(“#repeater2”).data = items;
}
});

});

The database (dataset?) is connected to CMS, but this code runs the image change on mouseover.

I have a lot of other little thing I want to try to do, purely for the joy of learning. I am not a coder or web developer in way, just a guy who has an interest in how things work.

[CODE-NINJA]

Lection no.-2: Always present your code int the right format (code-block).

Your current provided code…

Your code after pasting into editor…

Do you recognize something?

Your optimized code… (how it should look like)…

import wixData from "wix-data";
//-----------------[ USER-INTERFACE ]-----------------
const REPEATER = 'repeater1';
const SECTION = 'section1';
const BOX = 'box3';
const IMAGE = 'mainimage';
const BUTTON = 'button1';
const CMS = 'Backgrounds';
//-----------------[ USER-INTERFACE ]-----------------

$w.onReady(async()=> {console.log('Page ready...');
	let repData = await get_CmsData(); console.log('Repeater-Data: ', repData);
	$w(`#${REPEATER}`).data = repData;
    
	$w(`#${REPEATER}`).onItemReady(($item, itemData, index)=> {console.log('Index: ', index);
        console.log('Item-Data: ', itemData);
        $item(`#${BUTTON}`).onMouseIn(()=> {console.log('Mouse-In');
        	$w(`#${IMAGE}`).src = itemData.image;
        	$w(`#${SECTION}`).background = itemData.image;
			//$w(`#${BOX}`).style.backgroundColor = itemData.image;
        });

        // $item("#button2").onMouseOut(() => {
        //   $w(`#${REPEATER}`).hide();
        // });
  	});  
});

function get_CmsData() {
    return wixData.query(CMS)
    .find()
    .then((results)=> {let items = results.items; console.log('Items: ', items);
        if (items.length > 0) {console.log('Some DATA has been found!!!');
			return items;            
        } else {console.log('DATA is empty!!!');}
    })
	.catch((err)=>{console.log(`ERROR: ${err}`);
		console.log('Something went wrong!!!');
		return [];
	});	
}

Sorry, yes i know → you do not really recognize it back, because some changes have been done so far on it, but if your have already learned about → USER-INTERFACE ← then you can use this code very fast (even with disconnected your DATASET).

You will find the working example here…

REPEATER-ISSUE-1 | My Site 1

https://forum.wixstudio.com/t/need-advanced-help-with-code-to-create-a-multi-option-menu-for-the-items-i-want-to-sell/70452/5

Your End-Result could look like…