Jquery shuffleに準じてcolor boxを動作させたい
- 評価
- クリップ 0
- VIEW 1,182
現在、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>よろしくお願いいたします。
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
+2
画像の<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"に戻す
........って感じですかね^^
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 88.32%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
質問への追記・修正、ベストアンサー選択の依頼
masaya_ohashi
2016/06/09 15:13
質問文から完成形が見えません。
shuffleで絞りこまれたサムネイルをクリックしたらcolorboxが開くということですか？
2016/06/09 15:14
こちらの質問が他のユーザから「やってほしいことだけを記載した丸投げの質問」という指摘を受けました
「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。
kei344
2016/06/09 15:19
ご自身で書かれたコードを質問文に追記いただいたほうが回答を得られやすいと思います。
kei344
2016/06/09 17:25
コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。