开发者

Hide/Show Pager in jQuery Cycle

I am using cycle for a product slideshow in shopify. It works great, but I want to hide the pager if there is only one product image available.

Is there a function built into cycle for this?

if not, does anyone know how to return how many product images are available for that product in shopify so I can add a display none class if it's less than 2.

Any help is much appreciated. Thanks!

figured it out... only load cycle if there is an image 2.

{% if product.images[2] != undefined %}
    <scrip开发者_JAVA百科t type="text/javascript">
        $('#prodImages').before('<div id="prodnav">').cycle({ 
            fx:     'fade', 
            speed:  1500, 
            timeout: 5000, 
            pager: '#prodnav'
});
    </script>
{% endif %}


You can also do it in javascript only this way:

$(function() {
    $('#prodImages').before('<div id="prodnav">').cycle({
        fx: 'fade', 
        speed: 1500, 
        timeout: 5000, 
        pager: '#prodnav',
        pagerAnchorBuilder: paginate
    });
});
function paginate(ind, el) {
    if (ind == 1) { 
        return '<a href="#" class="activeSlide">1</a><a href="#">2</a>' 
    }
    else if (ind > 1) { 
        return '<a href="#">' + parseInt(ind)+1 + '</a>' 
    }
}

Adding pagerAnchorBuilder will call a fonction (in this case paginate) to create the links in your navigation. It'll ignore the first index element, create two links for the second to compensate the first one and return normal links for the others. Hope this help someone :)


I attempted Simon Arnolds solution but jQuery Cycle was binding the click even to show the second slide to both the first and second links. Here's the solution I eventually settled on:

$( '#prodnav a:only-child' ).hide();


if ($('#prodImages').children().length < 2) {
    $('#prodnav').hide();
}
0

上一篇:

下一篇:

精彩评论

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

最新问答

问答排行榜