jQuery to count over images in a div and tell me what image I am currently viewing based on z-index and title attr

Question

I'm working with the Orbit jQuery slider. Tricky thing is that I am running six iterations of that slider on the page. What I want it to do is tell me I am on image 4 of 7, 5 of 7, etc...

Here's what I've done so far:

$(window).load(function() {
    var n = $('#dicks-feature img').size();

    $('#dicks-feature img').each(function(index) { 
        var title = $(this).attr('title');
        var z = $(this).css('z-index');

        function stuff() {
            if (z == 3) {

                $('<p>' + title + 'of' + n + '</p>').appendTo('.count');
            }
        }

        setInterval(stuff,3000);
    });     

});

The HTML:

<div id="dicks" class="item first">
        <div id="dicks-feature" class="feature">
            <img src="img/features/DSG/dicks.jpg" width="711" height="369" alt="Dicks Sporting Goods" title="1"/>
            <img src="img/features/DSG/DSG_Primary_1.jpg" width="711" height="369" alt="Dicks Sporting Goods" title="2" />
            <img src="img/features/DSG/DSG_Primary_3.jpg" width="711" height="369" alt="Dicks Sporting Goods" title="3"  />
            <img src="img/features/DSG/DSG_Primary_4.jpg" width="711" height="369" alt="Dicks Sporting Goods" title="4"  />
            <img src="img/features/DSG/DSG_Primary_5.jpg" width="711" height="369" alt="Dicks Sporting Goods" title="5"  />
            <img src="img/features/DSG/DSG_Primary_6.jpg" width="711" height="369" alt="Dicks Sporting Goods" title="6"  />
            <img src="img/features/DSG/DSG_Primary_7.jpg" width="711" height="369" alt="Dicks Sporting Goods" title="7"  />
        </div><!--/feature-->
        <div class="count">

        </div>
    </div><!--/dicks-->

So what I can manage to get is the overall count of images: x of 7. If I click the slider next button the x never switches. It always stays 1 of 7, 1 of 7, etc...

I'm trying to base this off of a z-index of 3. Orbit assigns that to the img tag when the img is visible. All other images have an index of 1. I'm using the title attribute to give me the 2 of 7, 3 of 7, blah blah.

Any ideas? I am not a JS jedi at all :(

Thank you!

Answer 1

When you initialize your orbit slider, there's an event called afterSlideChange which will be called every time the slide changes.

It has no arguments, but the image currently being displayed is used as context (this). So you could check it's index(), and do something like this:

$(function($) {
    $('.featured').orbit({
        afterSlideChange: function() {
            var currentNum = $(this).index() + 1;
            var count = $(this).closest('.featured').find('img').length;
        }
    });    
});

How you find where to put the caption is up to what your HTML looks like, but the above should work for finding out the relevant info, every time it changes, in any slideshow.

Working demo with multiple slideshows.

Answer 2

Depending on the triggering event you may beable to use $().index(this)

Or otherwise use the index() function.