[英]Building a gallery that hides images when buttons are selected. It works but does not display all images on page load
When you click the "Show All" button the images appear but I need them to display on page load. 当您单击“全部显示”按钮时,将显示图像,但我需要它们在页面加载时显示。 When I remove "display: none" from my css it breaks and the buttons no longer function.
当我从CSS中删除“ display:none”时,它会中断并且按钮不再起作用。 I've tried removing the active button class and the "show" class.
我试过删除活动按钮类和“显示”类。 This code was grabbed from w3 school and I've tried to replicate it as much as possible but haven't been able to get everything to display on page load.
这段代码是从W3 School抓取的,我尝试了尽可能多的复制它,但是还无法在页面加载时显示所有内容。
Here is the website for reference: http://www.barbarabielpainting.com/new/ 这是供参考的网站: http : //www.barbarabielpainting.com/new/
<div id="myBtnContainer">
<button class="btn active" onclick="filterSelection('all')"> Show all</button>
<button class="btn" onclick="filterSelection('1')"> 1</button>
<button class="btn" onclick="filterSelection('2')"> 2</button>
<button class="btn" onclick="filterSelection('3')"> 3</button>
</div>
<div class="row">
<div class="col-sm-6 col-md-4 all column 1">
<div class="thumbnail">
<a class="lightbox" href="img/paintings/1.jpg">
<img src="img/paintings/1.jpg" alt="Park">
</a>
<div class="caption">
<h3>Thumbnail label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 all column 2">
<div class="thumbnail">
<a class="lightbox" href="img/paintings/2.jpg">
<img src="img/paintings/2.jpg" alt="Bridge">
</a>
<div class="caption">
<h3>Thumbnail label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 all column 3">
<div class="thumbnail">
<a class="lightbox" href="img/paintings/3.jpg">
<img src="img/paintings/3.jpg" alt="Tunnel">
</a>
<div class="caption">
<h3>Thumbnail label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
/* Add padding BETWEEN each column (if you want) */
.row,
.row > .column {
padding: 8px;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 33.33%;
display: none; /* Hide columns by default */
}
/* Clear floats after rows */
.row:after {
content: "";
display: table;
clear: both;
}
/* Content */
.content {
background-color: white;
padding: 10px;
}
/* The "show" class is added to the filtered elements */
.show {
display: block;
}
.btn.active {
background-color: #666;
color: white;
}
.active {
display: block;
}
filterSelection("all") // Execute the function and show all columns
function filterSelection(c) {
var x, i;
x = document.getElementsByClassName("column");
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 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";
});
}
The function filterSelection(parameter)
adds the show
class, and this class has a display: block
property. 函数
filterSelection(parameter)
添加了show
类,并且该类具有display: block
属性。 As a result, removing display: none
doesn't work because all images already have display: block
. 结果,删除
display: none
不起作用,因为所有图像都已经具有display: block
。
You can add this JavaScript to add the show
class to each div: 您可以添加此JavaScript以将
show
类添加到每个div:
window.onload(){
filterSelection("all");
}
Alternatively, you can add the class show
to each div individually. 另外,您可以将班级
show
单独添加到每个div。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.