I am using lightbox to allow users to look into the products. I also have a filter engine where it filters the products into 2 categories. I have different data-lightbox for each category to separate the lightboxes. However, when I use the show all filter, I want that the lightbox should show all the images. As of now, when I click on an image in the show all, the lightbox only shows the images of that particular category.
I have tried using the same data-lightbox for all categories but if I do this, then when I filter into each category, the lightbox will show not just for that particular category but all the categories.
<div id="myBtnContainer">
<button class="btn active" id="activebtn" onclick="filterSelection('all')"> SHOW ALL</button>
<button class="btn" onclick="filterSelection('canon')"> CANON</button>
<button class="btn" onclick="filterSelection('nikon')"> NIKON</button>
</div>
<script>
$( document ).ready(function() {
$( "#activebtn" ).trigger( "click" );
});
</script>
<script>
filterSelection("all")
function filterSelection(c) {
var x, i;
x = document.getElementsByClassName("filterDiv");
if (c == "all") c = "";
// Add the "show" class (display:block) to the filtered elements, and remove the "show" class from the elements that are not selected
for (i = 0; i < x.length; i++) {
w3RemoveClass(x[i], "show");
if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
}
}
// Show filtered elements
function w3AddClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
if (arr1.indexOf(arr2[i]) == -1) {
element.className += " " + arr2[i];
}
}
}
// Hide elements that are not selected
function w3RemoveClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
while (arr1.indexOf(arr2[i]) > -1) {
arr1.splice(arr1.indexOf(arr2[i]), 1);
}
}
element.className = arr1.join(" ");
}
// Add active class to the current control button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
</script>
<div class="row">
<div class="column">
<div class="filterDiv canon">
<a href="images/E77D.jpg" data-lightbox="canon" data-title="CANON EOS 77D KIT 18-55 IS STM">
<img src="images/E77D.jpg" alt="CANON EOS 77D KIT 18-55 IS STM">
</a>
<h3>CANON EOS 77D KIT 18-55 IS STM</h3>
<h3>Product Code: E77D</h3>
<h3>Price: Rp 14.475.000,-</h3>
</div>
</div>
<div class="column">
<div class="filterDiv nikon">
<a href="images/Z6.jpg" data-lightbox="nikon" data-title="NIKON Z6 KIT 24-70 F4 + FTZ">
<img src="images/Z6.jpg" alt="NIKON Z6 KIT 24-70 F4 + FTZ">
</a>
<h3>NIKON Z6 KIT 24-70 F4 + FTZ</h3>
<h3>Product Code: Z6</h3>
<h3>Price: Rp 45.499.000,-</h3>
</div>
</div>
<div class="column">
<div class="filterDiv nikon">
<a href="images/D5600.jpg" data-lightbox="nikon" data-title="NIKON D5600 AFP 18-55">
<img src="images/D5600.jpg" alt="NIKON D5600 AFP 18-55">
</a>
<h3>NIKON D5600 AFP 18-55</h3>
<h3>Product Code: D5600</h3>
<h3>Price: Rp 9.999.000,-</h3>
</div>
</div>
<div class="column">
<div class="filterDiv nikon">
<a href="images/D3500.jpg" data-lightbox="nikon" data-title="NIKON D3500 KIT AF-P 18-55 VR">
<img src="images/D3500.jpg" alt="NIKON D3500 KIT AF-P 18-55 VR">
</a>
<h3>NIKON D3500 KIT AF-P 18-55 VR</h3>
<h3>Product Code: D3500</h3>
<h3>Price: Rp 6.999.000,-</h3>
</div>
</div>
<div class="column">
<div class="filterDiv canon">
<a href="images/800D.jpg" data-lightbox="canon" data-title="CANON EOS 800D KIT 18-55 IS STM">
<img src="images/800D.jpg" alt="CANON EOS 800D KIT 18-55 IS STM">
</a>
<h3>CANON EOS 800D KIT 18-55 IS STM</h3>
<h3>Product Code: 800D</h3>
<h3>Price: Rp 11.580.000,-</h3>
</div>
</div>
<div class="column">
<div class="filterDiv canon">
<a href="images/1500D.jpg" data-lightbox="canon" data-title="CANON EOS 1500D 18-55 IS II">
<img src="images/1500D.jpg" alt="CANON EOS 1500D 18-55 IS II">
</a>
<h3>CANON EOS 1500D 18-55 IS II</h3>
<h3>Product Code: 1500D</h3>
<h3>Price: Rp 6.685.000,-</h3>
</div>
</div>
<div class="column">
<div class="filterDiv canon">
<a href="images/3000D.jpg" data-lightbox="canon" data-title="CANON EOS 3000D 18-55 III">
<img src="images/3000D.jpg" alt="CANON EOS 3000D 18-55 III">
</a>
<h3>CANON EOS 3000D 18-55 III</h3>
<h3>Product Code: 3000D</h3>
<h3>Price: Rp 5.295.000,-</h3>
</div>
</div>
<div class="column">
<div class="filterDiv canon">
<a href="images/80D.jpg" data-lightbox="canon" data-title="CANON EOS 80D BODY ONLY">
<img src="images/80D.jpg" alt="CANON EOS 80D BODY ONLY">
</a>
<h3>CANON EOS 80D BODY ONLY</h3>
<h3>Product Code: 80D</h3>
<h3>Price: Rp 15.945.000,-</h3>
</div>
</div>
<div class="column">
<div class="filterDiv nikon">
<a href="images/D7200BO.jpg" data-lightbox="nikon" data-title="NIKON D7200 BODY ONLY">
<img src="images/D7200BO.jpg" alt="NIKON D7200 BODY ONLY">
</a>
<h3>NIKON D7200 BODY ONLY</h3>
<h3>Product Code: D7200BO</h3>
<h3>Price: Rp 12.810.000,-</h3>
</div>
</div>
<div class="column">
<div class="filterDiv nikon">
<a href="images/D810KIT.jpg" data-lightbox="nikon" data-title="NIKON D810 KIT 18-20 VR">
<img src="images/D810KIT.jpg" alt="NIKON D810 KIT 18-20 VR<">
</a>
<h3>NIKON D810 KIT 18-20 VR</h3>
<h3>Product Code: D810KIT</h3>
<h3>Price: Rp 51.975.000,-</h3>
</div>
</div>
<div class="column">
<div class="filterDiv nikon">
<a href="images/D810BO.jpg" data-lightbox="nikon" data-title="NIKON D810 BODY ONLY">
<img src="images/D810BO.jpg" alt="NIKON D810 BODY ONLY">
</a>
<h3>NIKON D810 BODY ONLY</h3>
<h3>Product Code: D810BO</h3>
<h3>Price: Rp 42.315.000,-</h3>
</div>
</div>
<div class="column">
<div class="filterDiv nikon">
<a href="images/D7200.jpg" data-lightbox="nikon" data-title="NIKON D7200 18-140">
<img src="images/D7200.jpg" alt="NIKON D7200 18-140">
</a>
<h3>NIKON D7200 18-140</h3>
<h3>Product Code: D7200</h3>
<h3>Price: Rp 16.495.000,-</h3>
</div>
</div>
<div class="column">
<div class="filterDiv nikon">
<a href="images/D5300.jpg" data-lightbox="nikon" data-title="NIKON D5300 AFP 18-55">
<img src="images/D5300.jpg" alt="NIKON D5300 AFP 18-55">
</a>
<h3>NIKON D5300 AFP 18-55</h3>
<h3>Product Code: D5300</h3>
<h3>Price: Rp 9.660.000,-</h3>
</div>
</div>
<div class="column">
<div class="filterDiv canon">
<a href="images/80DL2.jpg" data-lightbox="canon" data-title="CANON EOS 80D 18-135 IS NANO USM">
<img src="images/80DL2.jpg" alt="CANON EOS 80D 18-135 IS NANO USM">
</a>
<h3>CANON EOS 80D 18-135 IS NANO USM</h3>
<h3>Product Code: 80DL2</h3>
<h3>Price: Rp 21.715.000,-</h3>
</div>
</div>
<div class="column">
<div class="filterDiv canon">
<a href="images/6DBO.jpg" data-lightbox="canon" data-title="CANON EOS 6D MARK II BODY ONLY">
<img src="images/6DBO.jpg" alt="CANON EOS 6D MARK II BODY ONLY">
</a>
<h3>CANON EOS 6D MARK II BODY ONLY</h3>
<h3>Product Code: 6DBO</h3>
<h3>Price: Rp 26.400.000,-</h3>
</div>
</div>
<div class="column">
<div class="filterDiv nikon">
<a href="images/D750.jpg" data-lightbox="nikon" data-title="NIKON D750 BODY ONLY">
<img src="images/D750.jpg" alt="NIKON D750 BODY ONLY">
</a>
<h3>NIKON D750 BODY ONLY</h3>
<h3>Product Code: D750</h3>
<h3>Price: Rp 23.999.000,-</h3>
</div>
</div>
<div class="column">
<div class="filterDiv nikon">
<a href="images/D750KIT.jpg" data-lightbox="nikon" data-title="NIKON D750 AFS 24-120">
<img src="images/D750KIT.jpg" alt="NIKON D750 AFS 24-120">
</a>
<h3>NIKON D750 AFS 24-120Y</h3>
<h3>Product Code: D750KIT</h3>
<h3>Price: Rp 30.999.000,-</h3>
</div>
</div>
<div class="column">
<div class="filterDiv nikon">
<a href="images/D7500.jpg" data-lightbox="nikon" data-title="NIKON D7500 KIT 19-140 VR">
<img src="images/D7500.jpg" alt="NIKON D7500 KIT 18-140 VR">
</a>
<h3>NIKON D7500 KIT 18-140 VR</h3>
<h3>Product Code: D7500</h3>
<h3>Price: Rp 19.999.000,-</h3>
</div>
</div>
</div>
I expect that when I click 'SHOW ALL', it shows the lightbox for all images, when I click 'CANON', it only shows the lightbox for canon cameras and when I click 'NIKON', it only shows the lightbox for nikon cameras
Aucun commentaire:
Enregistrer un commentaire