Get the visible elements in a jquery.jcarousel_问答_开发者

Get the visible elements in a jquery.jcarousel

开发者 https://www.devze.com 2023-03-05 21:46 出处：网络

I\'m building a JavaScript carousel and I need to extract the URL\'s of the links shown on every change of the carousel.

I'm building a JavaScript carousel and I need to extract the URL's of the links shown on every change of the carousel.

I'm using jQuery jCarousel as it allows the developer to bind different handlers to change events.

The carousel should display 4 items at a time and scroll 4 items at a time.

The itemFirstInCallback handler I've implemented gets the href of the first link in a page (e.g. index 1, index 5)

I need to get the currently displayed URL's for the first link displayed in all 4 visible

elements 开发者_Go百科and im wondering how to achieve this?

demo code below...

Setup Carousel

 $(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 List

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

If I understand your question correctly then you want to get the URLs of all the visible elements. You can achieve this by replacing your itemFirstInCallback callback with a itemVisibleInCallback:

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

This callback will be triggered for all 4 items as they turn visible.