jQuery per contare il numero di immagini in un div e dimmi cosa immagine che sto consultando attualmente basandomi su z-index e titolo attr

Question

sto lavorando con la Orbit jQuery cursore . cosa difficile è che io sono in esecuzione sei iterazioni di quel cursore sulla pagina. Quello che voglio fare è dirmi Sono sull'immagine 4 di 7, 5 di 7, ecc ...

Ecco che cosa ho fatto finora:

$(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);
    });     

});

Il codice 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-->

Quindi quello che posso riuscire ad ottenere è il conteggio complessivo delle immagini: x di 7. Se si fa clic sul dispositivo di scorrimento pulsante accanto la x non cambia. Rimane sempre 1 di 7, 1 di 7, ecc ...

sto cercando di fondare questo fuori di un z-index di 3. aventi causa Orbit che al tag img quando l'IMG è visibile. Tutte le altre immagini hanno un indice di 1. sto usando l'attributo title per darmi il 2 di 7, 3 di 7, bla bla.

Tutte le idee? Io non sono un Jedi JS affatto :(

Grazie!

Answer 1

Quando si inizializza il vostro cursore orbita, c'è un evento chiamato afterSlideChange che sarà chiamato ogni volta che i cambiamenti di diapositive.

E non ha argomenti, ma l'immagine attualmente visualizzata viene utilizzato come contesto (this). Così si potrebbe controllare di index(), e fare qualcosa di simile a questo:

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

Come trovare dove mettere la didascalia è fino a che il tuo aspetto HTML piace, ma quanto sopra dovrebbe funzionare per scoprire le informazioni pertinenti, ogni volta che cambia, in ogni presentazione.

demo Lavorare con più presentazioni .

Answer 2

A seconda l'evento scatenante potrebbe essere beable uso $ Index (). (Questo)

o comunque utilizzare la funzione index ().