JQuery get visible parameter

Question

I created this autoslider:

http://jsfiddle.net/5H5Xq/45/

Every five seconds, the image changes.

So what i want? I need to get the name of the currently displayed image, so what did i do? :

$('.images img').each(function()
{
    if($(this).is(':visible'))
    {
        console.log($(this)); //this is visible
    }
});

But the result? When i refresh the page i get this:

Object[img thumb73.jpg]
Object[img thumb72.jpg]
Object[img thumb61h.jpg]

But i need every five second a different image, like:

First: Object[img thumb73.jpg]

Five seconds later: Object[img thumb72.jpg]

Five seconds later: Object[img thumb61h.jpg]

Five seconds later: Object[img thumb73.jpg]

etc..anybody could help me?

Answer 1

Use a global variable that will hold currently displayed image. Something like this:

var shownImg;
function anim(selector) {
    $(".images img", selector).first().appendTo($('.images', selector)).fadeOut(2000);  
    shownImg = $(".images img", selector).first().fadeIn(2000);
}

This way you will always know which image is currently displayed.. Here is your code updated to work like that : http://jsfiddle.net/X9n6u/

Answer 2

You're currently logging the DOM node itself. Try this to get just the file name:

$('.images img').each(function()
{
    if($(this).is(':visible'))
    {
        var regex = /[A-Za-z0-9\.]+$/;        
        console.log(regex.exec(this.src)[0]);
    }
});