2

Shopify の製品スライドショーにサイクルを使用しています。うまく機能しますが、利用可能な製品画像が 1 つしかない場合は、ページャーを非表示にしたいと考えています。

このためにサイクルに組み込まれた機能はありますか？

そうでない場合、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 %}
4

3 に答える 3

0 
if ($('#prodImages').children().length < 2) {
    $('#prodnav').hide();
}
于 2012-07-12T21:28:02.550 に答える
0

Simon Arnolds ソリューションを試みましたが、jQuery Cycle はクリックをバインドして、2 番目のスライドを最初と 2 番目のリンクの両方に表示していました。最終的に落ち着いた解決策は次のとおりです。

$( '#prodnav a:only-child' ).hide();
于 2011-09-28T03:03:40.060 に答える
0

次の方法でのみ 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) が呼び出されます。最初のインデックス要素を無視し、2 番目のリンクを 2 つ作成して最初のリンクを補正し、他のリンクを通常のリンクに戻します。これが誰かを助けることを願っています:)

于 2011-09-04T20:22:25.137 に答える