Jquery shuffleに準じてcolor boxを動作させたい

Question

現在、Jquery shuffleとcolor boxを組み合わせたサイトを制作中です。

shuffleに準じてcolor boxを動作させたいのですが、うまくいきません。

例えば「men」のボタンを押して、画像を絞り込み、
サムネイルをクリック後、画像右上の矢印を押すごとに
続きの「men」の画像を表示させたいのですが、
「ALL」に準じた画像が出てきてしまいます。
http://www.steer.cc/shuffle/

「men」なら「men」の、「women」なら「women」のカテゴリーの画像を
color boxで見せていくには、ソースコードをどのように
変更していけばいいのでしょうか。

下記が現状のソースコードになります。

<script>
	$(function() {
		$('#btn li').on('click', function() {
			var $this = $(this),
				$grid = $('#animationList');

			$('#btn .active').removeClass('active');
			$this.addClass('active');
			$grid.shuffle($this.data('group'));
		});

		$('#animationList').shuffle({
			group: 'all',
			speed: 700,
			easing: 'ease-in-out'
		});
	});
</script>
<script>
	$(function() {
		$('#btn2 li').on('click', function() {
			var $this = $(this),
				$grid = $('#animationList');

			$('#btn2 .active').removeClass('active');
			$this.addClass('active');
			$grid.shuffle($this.data('group'));
		});

		$('#animationList').shuffle({
			group: 'all',
			speed: 700,
			easing: 'ease-in-out'
		});
	});
</script>

よろしくお願いいたします。

Comments

[masaya_ohashi]

質問文から完成形が見えません。
shuffleで絞りこまれたサムネイルをクリックしたらcolorboxが開くということですか？

[kei344]

ご自身で書かれたコードを質問文に追記いただいたほうが回答を得られやすいと思います。

[kei344]

コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。

Answer 1

画像の<a>タグ内のグループ属性が全部data-fancybox-group="gallery"になっていますから
これを

<a class="fancybox" href="xxxx.jpg" data-fancybox-group="action" title="xxxx">
<a class="fancybox" href="xxxx.jpg" data-fancybox-group="men" title="xxxx">
<a class="fancybox" href="xxxx.jpg" data-fancybox-group="women" title="xxxx">

とすることで fancyboxのスライドをカテゴリー？別に表示させられるようになります...

ただ、ALLのボタンを選択した場合でもクリックした画像のカテゴリーのみがスライドされることになってしまいますので..fancyboxで全ての画像をスライドさせたい場合はjavascriptでグループ属性を書き換えるなどの処理が必要になると思います。

その場合はHTMLのソースはそのままにしておいて..

	$(function() {
		$('#btn li').on('click', function() {
			var $this = $(this),
				$grid = $('#animationList');

			$('#btn .active').removeClass('active');
			$this.addClass('active');
			$grid.shuffle($this.data('group'));

                        //ここに★処理を記述
		});

★処理の内容　<ul id="animationList">直下の<li>をeachで読み取って
if文で
classがfilteredだった場合はdata-fancybox-group="active"等の特定のグループ名に書き換え
classがconcealedだった場合はdata-fancybox-group="gallery"に戻す
........って感じですかね^^

Comments

[sayaka0624]

Sora-tan様

ありがとうございます！「data-fancybox-group」を書き換えることで、カテゴリーごとの表示ができるようになりました。

ただ…おっしゃるように「ALL」の表示に問題が生じます。当方、jsのソースコードを作るだけの技術がありません…あつかましいお願いですが…ソースコードをいただくことは出来ないでしょうか？

[退会済みユーザー]

$('#animationList').find('li').each( function(){
if ( $(this).hasClass("filtered") ){
$(this).find('a').attr('data-fancybox-group','active');
}else{
$(this).find('a').attr('data-fancybox-group','gallery');
}
});

※　HTMLの部分は元に戻しておいてくださいね

[sayaka0624]

ありがとうございました！ソースコードを追加後、無事に動作確認ができました。本当にありがとうございました。すごく助かりました！