Скрыть / показать пейджер в цикле jQuery - PullRequest
Новая
       38

Скрыть / показать пейджер в цикле jQuery

2 голосов
/ 13 августа 2011

Я использую цикл для слайд-шоу продуктов в shopify. Это прекрасно работает, но я хочу скрыть пейджер, если доступно только одно изображение продукта.

Есть ли для этого функция, встроенная в цикл?

Если нет, кто-нибудь знает, как вернуть, сколько изображений товара доступно для этого товара в shopify, чтобы я мог добавить класс отображения, если он меньше 2.

Любая помощь очень ценится. Спасибо!

разобрался ... только цикл загрузки, если есть изображение 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 %}

Ответы [ 3 ]

0 голосов
/ 28 сентября 2011

Я пытался найти решение Саймона Арнольдса, но jQuery Cycle связывал щелчок даже, чтобы показать второй слайд как первой, так и второй ссылкам.Вот решение, на котором я в итоге остановился: 

$( '#prodnav a:only-child' ).hide();
0 голосов
/ 13 июля 2012 
if ($('#prodImages').children().length < 2) {
    $('#prodnav').hide();
}
0 голосов
/ 05 сентября 2011

Вы также можете сделать это в javascript только так: 

$(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>' 
    }
}

Добавление pagerAnchorBuilder вызовет функцию (в данном случае paginate) для создания ссылок в вашей навигации. Он будет игнорировать первый элемент индекса, создаст две ссылки для второго, чтобы компенсировать первый, и вернет нормальные ссылки для остальных. Надеюсь, это поможет кому-то:)

...