开发者

Get the visible elements in a jquery.jcarousel

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.

  • 0

    上一篇:

    下一篇:

    精彩评论

    暂无评论...
    验证码 换一张
    取 消

    最新问答

    问答排行榜