デフォルトでアイテムのグループのColorBoxポップアップを開くと、グループ全体の現在のアイテム数とアイテムの総数が表示されます。これらの値をクライアント側で取得するにはどうすればよいですか?
3 に答える
サーバーで ColorBox プラグインを実行している場合を除き、これらの値 (コレクション内の合計数、現在表示されているアイテムのインスタンス数) は既にクライアント側にあります。
以下のアイデアは、ColorBox Web サイトで使用されている最初の例に基づいています。これは非常に単純で簡単なケースです。あなたの場合は異なる場合があります。
コレクションサイズの取得
次のように簡単に実行できます。ここで、「.group1」はアセットのコレクションであり、console.log は検証として含まれています。
var a = $('.group1').length;
console.log(a);
表示されたインスタンスの数を取得する
前のケースで使用したのと同じテスト設定で、次のように簡単に実行できます。
$('.group1').on( 'click', function () {
var h = $(this).attr('href');
console.log(h);
});
Var "h" には href が含まれているため、コレクションを反復処理して、その href を持つエントリを見つけます。
これを行う他の (より良い!) 方法があることに注意してください。たとえば、コレクション内の各アイテムに ID がある場合、簡単に言うことができます
var h = this.id
これはすべてプラグインの外で行われることに注意してください。超クールにするには、要素currentおよびindexの使用法を調べた後、プラグインを fork して変更を実装するだけです。
私はjquery-colorbox@1.6.4
このセットアップで使用します(a-image
使用法を参照):
<ul class="image-set">
<li>
<img src="img url here">
<a href="img url here too" class="d-none a-image" title="img name"></a>
</li>
... other <li> items ...
</ul>
現在のカラーボックスの現在のアイテム番号を取得するこのコードがあります:
$(window).on('resize orientationchange', () => {
$.colorbox.close();
console.log('current colorbox item number:\n', $('.a-image').index($.colorbox.element()));
});
私の答えは次のとおりです(現在のアイテム番号を取得する作業コードを正確に指しています):
$('.a-image').index($.colorbox.element())
$('.a-image')
たとえば、私の状況のように、カラーボックスを初期化するために使用されるものは どこですか:
this.colorbox = $('.a-image').colorbox({
rel: 'a-image', open: false, maxWidth: '100%', maxHeight: '100%',
slideshow: true, slideshowAuto: false, slideshowSpeed: 2000,
});