magnific popup でフィルター毎のギャラリーを表示させたい。

https://sakic.jp/blog/web/masonry-filter
こちらの方を参考にmasonry にフィルターをつけたギャラリーを作りました。
それに対してmagnific popupでフィルター毎のスライドショーを表示させたいです。

html
1<div class="category-btn">
2	<a href="" class="all">All</a>
3	<a href="" class="a">a</a>
4	<a href="" class="b">b</a>
5	<a href="" class="c">c</a>
6</div>
7<div class="grid">
8    <div class="grid-block item-all item-a" href="a.jpg"><img src="a.jpg"></div>
9    <div class="grid-block item-all item-b" href="b.jpg"><img src="b.jpg"></div>
10    <div class="grid-block item-all item-c" href="c.jpg"><img src="c.jpg"></div>
11    <div class="grid-block item-all item-a" href="d.jpg"><img src="d.jpg"></div>
12    <div class="grid-block item-all item-b" href="e.jpg"><img src="e.jpg"></div>
13</div>	
14

参考にさせていただいたフィルター部分の引用です

javaScript
1<script>
2$(function(){
3  categoryBtn = $('.category-btn').find('a');
4  categoryBtn.each(function() {
5    $(this).click(function(e){
6      var selected = $(this).attr('class');
7      e.preventDefault();
8      categoryBtn.removeClass('is-current');
9      $(this).addClass('is-current');
10      $('body').removeClass(function(index, className) {
11      return (className.match(/\bcategory-\S+/g) || []).join(' ');
12      }).addClass('category-' + selected);
13      $('.grid').masonry({
14        itemSelector: '.grid-block',
15        isFitWidth: true,
16      });
17    });
18  });
19  $('.grid').masonry({
20    itemSelector: '.grid-block',
21    isFitWidth: true,
22  });
23});
24</script>

magnificPopupのスクリプトです。

javaScript
1	jQuery(function($){
2		$('.grid').magnificPopup({
3			delegate: 'div:not()', 
4			type: 'image',
5			gallery: {  
6			enabled:true
7			}
8		});
9	});
10

class-aのフィルターを選択、結果 a.jpg , d.jpg が表示されます。
しかしクリックしてスライドショーを見ようとすると、
当然 'grid' 内の全てのアイテムのスライドになってしまいます。
例えば delegate: 'div:not(.item-a)',
で.item-aを除外して表示。という所までは分かるのですが、
フィルター別のスライドの作り方が分かりませんでした。

色々試してみましたが上手く機能しませんでした。
勉強も始めたばかりで拙い問題なのかもしれませんが、ご教授いただければ幸いです。

行動規範の内容に同意します

回答1件

ベストアンサー

以下のように行ってはいかがでしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css">
6    <title>タイトル</title>
7    <style type="text/css">
8        .category-btn div a.is-current {
9            pointer-events: none;
10        }
11
12        .grid {
13            margin: 0 auto;
14            padding: 0;
15        }
16
17        .grid .grid-block {
18            display: none;
19            opacity: 0;
20            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
21            width: 300px;
22            height: 225px;
23        }
24
25        body.category-all .item-all,
26        body.category-a .item-a,
27        body.category-b .item-b,
28        body.category-c .item-c {
29            display: block;
30            -webkit-animation: show .5s linear 0s forwards;
31            animation: show .5s linear 0s forwards;
32        }
33
34        @-webkit-keyframes show {
35            from {
36                opacity: 0;
37                -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
38            }
39            to {
40                opacity: 1;
41                -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
42            }
43        }
44
45        @keyframes show {
46            from {
47                opacity: 0;
48                -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
49            }
50            to {
51                opacity: 1;
52                -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
53            }
54        }</style>
55</head>
56<body class="category-all">
57<div class="category-btn">
58    <div><a href="" class="all is-current">All</a></div>
59    <div><a href="" class="a">a</a></div>
60    <div><a href="" class="b">b</a></div>
61    <div><a href="" class="c">c</a></div>
62</div>
63<div class="grid">
64    <div class="grid-block item-all item-a" href="https://placehold.jp/3d4070/ffffff/150x150.png?text=a.jpg">
65        <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=a" width="100%" alt="a01">
66    </div>
67    <div class="grid-block item-all item-b" href="https://placehold.jp/3d4070/ffffff/150x150.png?text=b.jpg">
68        <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=b" width="100%" alt="b01">
69    </div>
70    <div class="grid-block item-all item-c" href="https://placehold.jp/3d4070/ffffff/150x150.png?text=c.jpg">
71        <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=c" width="100%" alt="c01">
72    </div>
73    <div class="grid-block item-all item-a" href="https://placehold.jp/3d4070/ffffff/150x150.png?text=d.jpg">
74        <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=d" width="100%" alt="a02">
75    </div>
76    <div class="grid-block item-all item-b" href="https://placehold.jp/3d4070/ffffff/150x150.png?text=e.jpg">
77        <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=e" width="100%" alt="b02">
78    </div>
79</div>
80<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
81<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
82<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
83<script>
84    $(function () {
85        var categoryBtn = $(".category-btn").find("a");
86
87        function findActiveElement(selected) {
88            return selected === "a" ? "div.item-a" : selected === "b" ? "div.item-b" : selected === "c" ? "div.item-c" : "div.item-all";
89        }
90
91        categoryBtn.each(function () {
92            $(this).on("click", function (e) {
93                var selected = $(this).attr("class");
94                e.preventDefault();
95                categoryBtn.removeClass("is-current");
96                $(this).addClass("is-current");
97                $("body").removeClass(function (index, className) {
98                    return (className.match(/\bcategory-\S+/g) || []).join(" ");
99                }).addClass("category-" + selected);
100                $(".grid").masonry({
101                    itemSelector: ".grid-block",
102                    columnWidth: 300,
103                    isFitWidth: true
104                }).magnificPopup({
105                    delegate: findActiveElement(selected),
106                    type: "image",
107                    gallery: {
108                        enabled: true
109                    }
110                });
111            });
112        });
113
114        $(".grid").masonry({
115            itemSelector: ".grid-block",
116            columnWidth: 300,
117            isFitWidth: true
118        }).magnificPopup({
119            delegate: "div",
120            type: "image",
121            gallery: {
122                enabled: true
123            }
124        });
125    });
126</script>
127</body>
128</html>