I am facing an issue with my photo gallery where I want to hide some photos initially and display how many are omitted from the gallery using overflow: hidden;.
After reading through this particular response, I attempted the following solution:
const a = document.querySelectorAll('a')
const count = 0
a.forEach(el => {
if (isHidden(el))
count++
})
console.log('Hidden elements: ' + count)
function isHidden (el) {
return el.offsetParent === null
}#lightgallery {
overflow: hidden;
margin-top: 30px;
height: 122px;
position: relative; /* important */
}
#lightgallery a {
width: 176px;
display: inline-block;
}
#lightgallery img {
width: 100%;
}
#lightgallery a {
color: transparent;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="lightgallery">
<a href="assets/img/light1.jpg">
<img src="https://picsum.photos/200/300/?random=1">
</a>
<a href="assets/img/light2.jpg">
<img src="https://picsum.photos/200/300/?random=2">
</a>
<a href="assets/img/light3.jpg">
<img src="https://picsum.photos/200/300/?random=3">
</a>
<a href="assets/img/light4.jpg">
<img src="https://picsum.photos/200/300/?random=4">
</a>
<a href="assets/img/light5.jpg">
<img src="https://picsum.photos/200/300/?random=5">
</a>
<a href="assets/img/light4.jpg">
<img src="https://picsum.photos/200/300/?random=6">
</a>
<a href="assets/img/light5.jpg">
<img src="https://picsum.photos/200/300/?random=7">
</a>
</div>Unfortunately, the above approach does not seem to be effective.
In order to address this, I need a method to calculate the number of photos that are currently not visible on the screen due to the responsive design of the gallery element leading to varying sizes for different users.