Selecting pictures with Jquery and Javascript

Question

I'm testing out a layout on a website using 3 pictures here:

Schechterbusiness.info

the left button works, making it go through the pictures. But I can't figure out how to get the right button to work, which is supposed to scroll through the other way. I know there's probably a way to do it with arrays but I can't wrap my brain around it. Halp!

Code to scroll through pictures:

$('#fryLink').click(function() {
        $('#hide').hide();
        $('#img').hide();

    count++;

        if(count == 1) {

        $('#img').attr("src","images/fry.png");

        }
        else if(count == 2) {

        $('#img').attr("src","images/bender.png");

        }
        else if(count == 3) {

        $('#img').attr("src","images/zoidberg.png");
        }


                $('#img').show("fade");





        if(count > 2) {

        count = 0;
        }

can't you just reverse the numbers? or reverse the incrementing? — wirey00, Dec 07 '12 at 23:01
@wirey tried that, but I couldn't get it to stop repeating a certain picture. For instance if you click on the left one three times it brings you to Zoidberg, then click on the right one and it shows Zoidberg again. — Axschech, Dec 07 '12 at 23:07

score 0 · Answer 1 · answered Dec 07 '12 at 23:06

0

normally it should be enough to just use use the same function the other way around with

count--;

answered Dec 07 '12 at 23:06

Mik

1,705
1
14
26

Yes, I tried that and it did not work as it would repeat one of the pictures :/ – Axschech Dec 07 '12 at 23:07

score 0 · Answer 2 · edited May 23 '17 at 10:24

0

following the first answere

Bind event to right mouse click

reverse the counter ;)

edited May 23 '17 at 10:24

Community

1
1

answered Dec 07 '12 at 23:08

Walter Franchetti

16
1

Please take a look at the site, there is no reason to use right click that's not what I meant :/ I guess I'm just terrible at describing things – Axschech Dec 07 '12 at 23:33

Sushanth -- · Answer 3 · 2012-12-07T23:17:35.167

0

Try this

var count = 0;
var imgLength = 3;
$('#leftLink , #rightLink').click(function() {
    $('#hide').hide();
    $('#img').hide();
    if (this.id === 'leftLink') {
        count--;
        if (count < 0) {
            count = imgLength-1;
        }
    }
    else {
        count++;
        if (count > imgLength-1) {
            count = 0;
        }
    }
    var src = "images/fry.png";

    if (count == 1) {
        src = "images/bender.png";
    }
    else if (count == 2) {
        src = "images/zoidberg.png";
    }
    $('#img').attr('src',src).show("fade");
});

edited Dec 07 '12 at 23:17

answered Dec 07 '12 at 23:09

Sushanth --

55,259
9
66
105

I've never used that before! But I can do that later right now I'm at work. – Axschech Dec 07 '12 at 23:32
You just need to change `if(count < 0)` to `if(count < 1)` because the images start at 1 – wirey00 Dec 07 '12 at 23:57

score 0 · Answer 4 · answered Dec 07 '12 at 23:11

0

You have count cycling through four states: 0, 1, 2, and 3. But you only set the image for states 1 - 3.

This leads to duplicating one image--whichever was the last one--when your count variable is on 0.

As to helping you get exactly what you want, unfortunately that is not really clear. Are the three buttons supposed to be a sort of "forward / something / reverse"? What do you want to happen when the center button is clicked on?

Also, making the buttons display the proper pointer/hand icon is important. Right now they show the text selection bar instead, and that makes it confusing since it conveys to the user that the items are not clickable.

answered Dec 07 '12 at 23:11

ErikE

48,881
23
151
196

"the left button works, making it go through the pictures. But I can't figure out how to get the right button to work, which is supposed to scroll through the other way." I thought it was obvious? Also this is totally just a test layout, I'm going to replace the words with images eventually. All the center button does is go back to how the page was when it loaded. That is working fine. – Axschech Dec 07 '12 at 23:16
It was really the center button that I was asking about. Sorry for the lack of comprehension! – ErikE Dec 07 '12 at 23:23

Selecting pictures with Jquery and Javascript

4 Answers4