jQuery для подсчета изображений в div и скажите, какое изображение я сейчас просматриваю, основываясь на z-index и title attr - PullRequest
Новая
       16

jQuery для подсчета изображений в div и скажите, какое изображение я сейчас просматриваю, основываясь на z-index и title attr

1 голос
/ 29 ноября 2011

Я работаю с ползунком Orbit jQuery .Хитрость в том, что я запускаю шесть итераций этого слайдера на странице.Я хочу сказать, что я нахожусь на изображении 4 из 7, 5 из 7 и т. Д.

Вот что я сделал до сих пор: 

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

});

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

Итак, что мне удалось получить, так это общее количество изображений: x из 7. Если я нажимаю кнопку перехода по слайдеру, x никогда не переключается.Оно всегда остается 1 из 7, 1 из 7 и т. Д.

Я пытаюсь основать это на z-индексе 3. Орбита присваивает это тегу img, когда img виден.Все остальные изображения имеют индекс 1. Я использую атрибут title, чтобы дать мне 2 из 7, 3 из 7, бла-бла.

Есть идеи?Я вовсе не джедай JS :(

Спасибо!

Ответы [ 2 ]

2 голосов
/ 30 ноября 2011

Когда вы инициализируете свой ползунок орбиты, есть событие с именем afterSlideChange, которое будет вызываться при каждом изменении слайда.

У него нет аргументов, но отображаемое в настоящее время изображение используется как контекст (this).Таким образом, вы можете проверить, что это index(), и сделать что-то вроде этого: 

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

То, как вы найдете, где поставить заголовок, зависит от того, как выглядит ваш HTML, но вышеизложенное должно сработать для выяснениясоответствующая информация, каждый раз, когда она изменяется, в любом слайд-шоу.

Рабочая демонстрация с несколькими слайд-шоу .

0 голосов
/ 30 ноября 2011

В зависимости от запускающего события вы можете использовать $ (). Индекс (это)

В противном случае используйте функцию index ().

...