Image gallery using jQuery array

Question

<div id="w01">
<img src=qa/01.jpg alt='img'>
<img src=qa/02.jpg alt='img'>
<img src=qa/03.jpg alt='img'>
<img src=qa/04.jpg alt='img'>
</div>

CSS:

#w01 > img{
    display:none;
    width:100%;
}
#w01 > img:first-child{
    display:block;
}

This is starting position. All images are hidden except the first one.
Now I want to create an image gallery using jQuery array.
Click on Next button should move the first image at the bottom of stack, and display the next one.

var arr = $("#w01 > img").toArray();

$('.next').click(function(){
    var first = arr[0];
    arr.shift(first);
    arr[1].show(); //error
});

Error: Uncaught TypeError: undefined is not a function

Is something wrong in the concept, or just in the code, or both?

@AlessandroMinoccheri, yes it is. alert (arr); gives me img objects — qadenza
– qadenza, Commented May 11, 2014 at 10:43

ninhjs.dev · Accepted Answer · 2014-05-11 11:32:58Z

1

var arr = $("#w01 > img").toArray();

$('.next').click(function(){
    var first = arr[0];
    arr.shift(first);
    arr[1].show(); //error
});

Change to:

var arr = $("#w01 > img").toArray();

$('.next').click(function(){
    // var first = arr[0];
    // arr.shift(first);
    // $(arr[1]).show(); // This will not show any error. But it will not work as you expected.
    // See A. Wolff's comment for more details.

    // New
    $(arr[0]).hide(); // Hide showing img
    arr.push(arr.shift()); // Shift array
    $(arr[0]).show(); // Show new first img
});

Because arr[1] returns a pure Javascript DOM, while .show is a method of jQuery.

edited May 11, 2014 at 11:32

answered May 11, 2014 at 10:45

ninhjs.dev

8,7732 gold badges53 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

A. Wolff Over a year ago

I guess it should be: $(arr[0]).show(); and BTW should use: arr.push(arr.shift(first));, shift() removing first item from array

qadenza Over a year ago

Reegan, why image switching is stopped when reached the last image? It should display the first image again, in an endless circle !

Collectives™ on Stack Overflow

Image gallery using jQuery array

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related