Получить видимые элементы в jquery.jcarousel - PullRequest
Новая
       31

Получить видимые элементы в jquery.jcarousel

1 голос
/ 12 мая 2011

Я создаю карусель JavaScript и мне нужно извлекать URL-адреса ссылок, отображаемых при каждом изменении карусели.

Я использую jQuery jCarousel, поскольку он позволяет разработчику связывать различные обработчики ссобытия изменения.

Карусель должна отображать 4 элемента за раз и прокручивать 4 элемента за раз.

Обработчик itemFirstInCallback, который я реализовал, получает ссылку на первую ссылку на странице (например, индекс 1, индекс 5)

Мне нужно получить отображаемые в настоящий момент URL-адреса для первой ссылки, отображаемой во всех 4 видимых

элементах, и мне интересно, как этого добиться?

демонстрационный кодниже ...

Настройка Карусель 

 $(document).ready(function () {

            $('#featured_carousel_list').jcarousel({ 
visible: 4, 
scroll: 4, 
initCallback: mycarousel_initCallback, 
buttonNextHTML: null, 
buttonPrevHTML: null,
itemFirstInCallback: function (carousel, liElement, intemIndex, action) {
                    // get URL's of visible items
                    var item_URL = $(liElement).children('a:last-child').attr('href');
                    alert(item_URL);
                }

            });


        });

        function mycarousel_initCallback(carousel) {
            $('#next_button').bind('click', function () { carousel.next(); return false;});
            $('#prev_button').bind('click', function () { carousel.prev(); return false;});
        }

HTML Список 

<div id="prev_button"><<</div>
<div id="next_button">>></div>
    <ul class="featured_carousel_list" id="featured_carousel_list">
        <li><img src="images/item_sample_image.gif" alt="" width="180" height="90" /><a href="display.aspx?tid=1" class="item_text_link">title</a></li>
        <li><img src="images/item_sample_image.gif" alt="" width="180" height="90" /><a href="display.aspx?tid=2" class="item_text_link">title</a></li>
        <li><img src="images/item_sample_image.gif" alt="" width="180" height="90" /><a href="display.aspx?tid=3" class="item_text_link">title</a></li>
        <li><img src="images/item_sample_image.gif" alt="" width="180" height="90" /><a href="display.aspx?tid=4" class="item_text_link">title</a></li>
        <li><img src="images/item_sample_image.gif" alt="" width="180" height="90" /><a href="display.aspx?tid=5" class="item_text_link">title</a></li>
        <li><img src="images/item_sample_image.gif" alt="" width="180" height="90" /><a href="display.aspx?tid=6" class="item_text_link">title</a></li>
        <li><img src="images/item_sample_image.gif" alt="" width="180" height="90" /><a href="display.aspx?tid=7" class="item_text_link">title</a></li>
        <li><img src="images/item_sample_image.gif" alt="" width="180" height="90" /><a href="display.aspx?tid=8" class="item_text_link">title</a></li>
    </ul>

1 Ответ

1 голос
/ 12 мая 2011

Если я правильно понимаю ваш вопрос, то вы хотите получить URL-адреса всех видимых элементов.Вы можете добиться этого, заменив itemFirstInCallback обратный вызов на itemVisibleInCallback: 

itemVisibleInCallback: function(carousel, liElement) {
  var item_URL = $(liElement).children('a:last-child').attr('href');
  console.log(item_URL);
}

Этот обратный вызов будет запущен для всех 4 элементов, когда они станут видимыми.

...