2

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 %}
    <script type="text/javascript">
        $('#prodImages').before('<div id="prodnav">').cycle({ 
            fx:     'fade', 
            speed:  1500, 
            timeout: 5000, 
            pager: '#prodnav'
});
    </script>
{% endif %}
krsbrown
  • 21
  • 5
  • 1
    Glad you figured it out yourself. But for the benefit of the community, please post your solution as an answer below and then "accept" your own answer. – Sparky Sep 04 '11 at 20:34

3 Answers3

0
if ($('#prodImages').children().length < 2) {
    $('#prodnav').hide();
}
supersuphot
  • 543
  • 4
  • 8
0

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

Simon Arnold
  • 15,849
  • 7
  • 67
  • 85
0

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