Correct and Improve of FilterizR sample page (#2439)

Correction of filtr-item's data-category, and add Category 4 (COLORED, BLACK)

pages/gallery.html

@@ -732,6 +732,7 @@
                     <a class="btn btn-info" href="javascript:void(0)" data-filter="1"> Category 1 (WHITE) </a>
                     <a class="btn btn-info" href="javascript:void(0)" data-filter="2"> Category 2 (BLACK) </a>
                     <a class="btn btn-info" href="javascript:void(0)" data-filter="3"> Category 3 (COLORED) </a>
+                    <a class="btn btn-info" href="javascript:void(0)" data-filter="4"> Category 4 (COLORED, BLACK) </a>
                   </div>
                   <div class="mb-2">
                     <a class="btn btn-secondary" href="javascript:void(0)" data-shuffle> Shuffle items </a>
@@ -754,57 +755,57 @@
                         <img src="https://via.placeholder.com/300/FFFFFF?text=1" class="img-fluid mb-2" alt="white sample"/>
                       </a>
                     </div>
-                    <div class="filtr-item col-sm-2" data-category="2" data-sort="black sample">
+                    <div class="filtr-item col-sm-2" data-category="2, 4" data-sort="black sample">
                       <a href="https://via.placeholder.com/1200/000000.png?text=2" data-toggle="lightbox" data-title="sample 2 - black">
                         <img src="https://via.placeholder.com/300/000000?text=2" class="img-fluid mb-2" alt="black sample"/>
                       </a>
                     </div>
-                    <div class="filtr-item col-sm-2" data-category="3" data-sort="red sample">
+                    <div class="filtr-item col-sm-2" data-category="3, 4" data-sort="red sample">
                       <a href="https://via.placeholder.com/1200/FF0000/FFFFFF.png?text=3" data-toggle="lightbox" data-title="sample 3 - red">
                         <img src="https://via.placeholder.com/300/FF0000/FFFFFF?text=3" class="img-fluid mb-2" alt="red sample"/>
                       </a>
                     </div>
-                    <div class="filtr-item col-sm-2" data-category="4" data-sort="red sample">
+                    <div class="filtr-item col-sm-2" data-category="3, 4" data-sort="red sample">
                       <a href="https://via.placeholder.com/1200/FF0000/FFFFFF.png?text=4" data-toggle="lightbox" data-title="sample 4 - red">
                         <img src="https://via.placeholder.com/300/FF0000/FFFFFF?text=4" class="img-fluid mb-2" alt="red sample"/>
                       </a>
                     </div>
-                    <div class="filtr-item col-sm-2" data-category="5" data-sort="black sample">
+                    <div class="filtr-item col-sm-2" data-category="2, 4" data-sort="black sample">
                       <a href="https://via.placeholder.com/1200/000000.png?text=5" data-toggle="lightbox" data-title="sample 5 - black">
                         <img src="https://via.placeholder.com/300/000000?text=5" class="img-fluid mb-2" alt="black sample"/>
                       </a>
                     </div>
-                    <div class="filtr-item col-sm-2" data-category="6" data-sort="white sample">
+                    <div class="filtr-item col-sm-2" data-category="1" data-sort="white sample">
                       <a href="https://via.placeholder.com/1200/FFFFFF.png?text=6" data-toggle="lightbox" data-title="sample 6 - white">
                         <img src="https://via.placeholder.com/300/FFFFFF?text=6" class="img-fluid mb-2" alt="white sample"/>
                       </a>
                     </div>
-                    <div class="filtr-item col-sm-2" data-category="7" data-sort="white sample">
+                    <div class="filtr-item col-sm-2" data-category="1" data-sort="white sample">
                       <a href="https://via.placeholder.com/1200/FFFFFF.png?text=7" data-toggle="lightbox" data-title="sample 7 - white">
                         <img src="https://via.placeholder.com/300/FFFFFF?text=7" class="img-fluid mb-2" alt="white sample"/>
                       </a>
                     </div>
-                    <div class="filtr-item col-sm-2" data-category="8" data-sort="black sample">
+                    <div class="filtr-item col-sm-2" data-category="2, 4" data-sort="black sample">
                       <a href="https://via.placeholder.com/1200/000000.png?text=8" data-toggle="lightbox" data-title="sample 8 - black">
                         <img src="https://via.placeholder.com/300/000000?text=8" class="img-fluid mb-2" alt="black sample"/>
                       </a>
                     </div>
-                    <div class="filtr-item col-sm-2" data-category="9" data-sort="red sample">
+                    <div class="filtr-item col-sm-2" data-category="3, 4" data-sort="red sample">
                       <a href="https://via.placeholder.com/1200/FF0000/FFFFFF.png?text=9" data-toggle="lightbox" data-title="sample 9 - red">
                         <img src="https://via.placeholder.com/300/FF0000/FFFFFF?text=9" class="img-fluid mb-2" alt="red sample"/>
                       </a>
                     </div>
-                    <div class="filtr-item col-sm-2" data-category="10" data-sort="white sample">
+                    <div class="filtr-item col-sm-2" data-category="1" data-sort="white sample">
                       <a href="https://via.placeholder.com/1200/FFFFFF.png?text=10" data-toggle="lightbox" data-title="sample 10 - white">
                         <img src="https://via.placeholder.com/300/FFFFFF?text=10" class="img-fluid mb-2" alt="white sample"/>
                       </a>
                     </div>
-                    <div class="filtr-item col-sm-2" data-category="11" data-sort="white sample">
+                    <div class="filtr-item col-sm-2" data-category="1" data-sort="white sample">
                       <a href="https://via.placeholder.com/1200/FFFFFF.png?text=11" data-toggle="lightbox" data-title="sample 11 - white">
                         <img src="https://via.placeholder.com/300/FFFFFF?text=11" class="img-fluid mb-2" alt="white sample"/>
                       </a>
                     </div>
-                    <div class="filtr-item col-sm-2" data-category="12" data-sort="black sample">
+                    <div class="filtr-item col-sm-2" data-category="2, 4" data-sort="black sample">
                       <a href="https://via.placeholder.com/1200/000000.png?text=12" data-toggle="lightbox" data-title="sample 12 - black">
                         <img src="https://via.placeholder.com/300/000000?text=12" class="img-fluid mb-2" alt="black sample"/>
                       </a>