Change images by buttons.

Ask the community
,
1

Hello! I’ve been searching everywhere, but cant find solution to my problem ( which shouldn’t be that hard to pull off). I want to change my images with different buttons. If i have one window with several images and several buttons( say button1,button2 and button3) over my image. When i click button2 my image changes to image2 etc. I send picture.

Would be very greatful for the anwser because there seems to be no such topic ( witch is strange)

782×545 4.18 KB

2 
$w.onReady(() => {
    $w("#button1, #button2, #button3").onClick(event => {
        let src;
        switch(event.target.id){
        case "button1":
            src = "xxxxxxx.jpg";//use the image source
            break;
        case "button2":
            src = "yyyyyyyy.jpg";//use the image source
            break;
        case "button3":
            src = "zzzzz.jpg";//use the image source
            break;
        }
        $w("#image1").src = src;
    })
})
3

Thanks for the code! I understand now!!! So nice!

One more question is it possible to make transition more smooth? I tryed to add animation but it only works when the image appear when you load the page.

4

If you use an image, you can’t make an animation, but maybe you’ll want to use a slider gallery instead , to the gallery items and to switch them. It’s a different code. See:
https://www.wix.com/corvid/reference/$w.Gallery.html#items

And to create some logic using .next() once a button gets clicked :
https://www.wix.com/corvid/reference/$w.Gallery.html#next

5

@jonatandor35 Can you please explain more? I dont really get it. if i create a gallery is it possible to create buttons then or how do you mean?

6

You can add your own animations using the hide() and show() effects:

$w("#image1").hide("fade");
$w("#image1").src = < new image >;
$w("#image1").show("fade");

You can choose whatever effect you want, and also play with the effectOptions for different animation speeds.

7

@yisrael-wix Thanks for quick answer and the effect code. I dont really understand whre i should put it and how it works with the context of my codel. This is my code atm:

$w.onReady(() => {
$w(“#button1, #button2, #button3”).onClick(event => {

let src;
switch (event.target.id){
case “button1”:
src = “https://static.wixstatic.com/media/2e0267_36ec5b59cbe84475bc354f682669a68b~mv2_d_1920_1280_s_2.png”;

break ;
case “button2”:
src = “https://static.wixstatic.com/media/2e0267_afc20d596c154096954903cfedead675~mv2_d_1825_1217_s_2.png”;

break ;
case “button3”:
src = “https://static.wixstatic.com/media/2e0267_21284670675a4648aaff36ed04098e2a~mv2.png”;

break ;
}
$w(“#image29”).src = src;
})
})

this makes my images change directly, but without animation. Where shouldi put effects code?

Sincerely

8

Something like this:

$w.onReady(() => {
    $w("#button1, #button2, #button3").onClick(event => {
        $w("#image1").hide("fade");
        let src;
        switch(event.target.id) {
        case "button1":
            src = "xxxxxxx.jpg";//use the image source
            break;
        case "button2":
            src = "yyyyyyyy.jpg";//use the image source
            break;
        case "button3":
            src = "zzzzz.jpg";//use the image source
            break;
        }
        $w("#image1").src = src;
        $w("#image1").show("fade");
    })
})
9

Hmm, that works but strange. When i click on the button my image fades out, and then i have to click again for the image to show (fade in). I tryed to delete fade out but i didnt help. How is it possible to solve?

10

@valentin1995 Sorry :exploding_head:. The hide() and show() functions return Promises - I always forget about that - and you can only do the show() when the hide is done.

Something like this:

$w.onReady(() => {
    $w("#button1, #button2, #button3").onClick(event => {
        $w("#image1").hide("fade").
        .then( ( ) => {
            let src;
            switch(event.target.id) {
            case "button1":
                src = "xxxxxxx.jpg";//use the image source
                break;
            case "button2":
                src = "yyyyyyyy.jpg";//use the image source
                break;
            case "button3":
                src = "zzzzz.jpg";//use the image source
                break;
            }
            $w("#image1").src = src;
            $w("#image1").show("fade");
        } );
    })
})

Not tested, but that should give the right idea how to handle the Promise returned from hide().

11

@yisrael-wix I tryed, it says TypeError: $w(…).hide(…).$w is not a function. Can you possibly know why? p.s. Very much appreciated that you give your time to my problem
my code:

$w.onReady(() => {
$w(“#button1, #button2, #button3”).onClick(event => {
$w(“#image29”).hide(“fade”).
$w(“#myElement”).hide(“fade”)
.then( ( ) => {
let src;
switch (event.target.id) {
case “button1”:
src = “”;
break ;
case “button2”:
src = “;
break ;
case “button3”:
src = “”;
break ;
}
$w(”#image29").src = src;
$w(“#image29”).show(“fade”);
} );
})
})

12

Delete this line (my mistake):

$w("#myElement").hide("fade")

You don’t have an element called #myElement and I was cutting and pasting, and that line ended up in the code snippet by mistake.

13

NIIICE!!!it actually works now! is it some parameter to make fading faster?

14

@valentin1995 See the different Effect Options for different options for each different Effect.

15

Try to use multi-state boxes.

16

Hey Bizim, nice idea! See Tova’s write-up for a nice explanation on how it’s used.

17

Ok guys i checked up the multi state boxes and in works just as i wanted! Thanks for all help boys <3