2

Есть фото галерея, она отображает 5 элементов, остальные скрыты при помощи свойства overflow : hiden, вопрос: как можно сделать подсчет и вывод числа скрытых элементов? Должно получиться вот так https://i.stack.imgur.com/zRZKU.png

#lightgallery {
  overflow: hidden;
  margin-top: 30px;
  height: 122px;
}

#lightgallery img {
  width: 176px;
}

#lightgallery a {
  color: transparent;
}

#lightgallery a:nth-child(5) img {
  filter: blur(5px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/lightgallery.min.js"></script>
<div id="lightgallery">
  <a href="assets/img/light1.jpg">
    <img src="assets/img/light1.jpg" alt="">
  </a>
  <a href="assets/img/light2.jpg">
    <img src="assets/img/light2.jpg" alt="">
  </a>
  <a href="assets/img/light3.jpg">
    <img src="assets/img/light3.jpg" alt="">
  </a>
  <a href="assets/img/light4.jpg">
    <img src="assets/img/light4.jpg" alt="">
  </a>
  <a href="assets/img/light5.jpg">
    <img src="assets/img/light5.jpg" alt="">
  </a>
  <a href="assets/img/light4.jpg">
    <img src="assets/img/light4.jpg" alt="">
  </a>
  <a href="assets/img/light5.jpg">
    <img src="assets/img/light5.jpg" alt="">
  </a>
</div>

4
  • api.jquery.com/visible-selector - не подойдет? 26 сен 2018 в 8:16
  • @YuriyProkopets , при скрытии через overflow:hidden родителя, JQuery-слекторы :visible и :hidden работать не будут.
    – zhurof
    26 сен 2018 в 8:24
  • @МаксимВоробьев , а вам зачем их считать было нужно, если не секрет.
    – zhurof
    26 сен 2018 в 12:27
  • А посмотрите на фотографию которую я прикрепил к посту, такая стояла задача ) есть галерея и вывод только 5 фотографий, остальные скрыть и показать сколько скрыто, что бы пользователь знал, что там есть еще фотографии 26 сен 2018 в 13:20

3 ответа 3

2

var invisible = 0;
$('#lightgallery a').each(function(){
  if($(this).position().top > 0){
    invisible++;
  }
})
console.log(invisible);
#lightgallery {
  overflow: hidden;
  margin-top: 30px;
  height: 122px;
  position:relative;/*обязательно*/
}
#lightgallery a{
  display:inline-block;
}
#lightgallery img {
  width: 176px;
}

#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" alt="">
  </a>
  <a href="assets/img/light2.jpg">
    <img src="https://picsum.photos/200/300/?random" alt="">
  </a>
  <a href="assets/img/light3.jpg">
    <img src="https://picsum.photos/200/300/?random" alt="">
  </a>
  <a href="assets/img/light4.jpg">
    <img src="https://picsum.photos/200/300/?random" alt="">
  </a>
  <a href="assets/img/light5.jpg">
    <img src="https://picsum.photos/200/300/?random" alt="">
  </a>
  <a href="assets/img/light4.jpg">
    <img src="https://picsum.photos/200/300/?random" alt="">
  </a>
  <a href="assets/img/light5.jpg">
    <img src="https://picsum.photos/200/300/?random" alt="">
  </a>
</div>

7
  • Странно, у меня почему то выводит в консоль все 7 фотографий, вместо скрытых 2, в чем может быть проблема? 26 сен 2018 в 8:38
  • @МаксимВоробьев , для #lightgallery задан position:relative? Есть ли у неё padding-top?
    – zhurof
    26 сен 2018 в 8:46
  • Да задал position:relative, нет, все стили я написал сюда, перед самой галереей есть конечно другие элементы, это может как то повлиять? 26 сен 2018 в 8:47
  • Попробуйте код написать сюда: $(function() { // тут код }) 26 сен 2018 в 8:50
  • нет, теперь просто 0 выводит. 26 сен 2018 в 8:54
1

На чистом JS можно использовать Element.getBoundingClientRect()

Суть в том чтобы проверять смещение относительно viewport, если дочернее top смещение >= bottom смещению родителя, то элемент находится вне родителя.

Этот вариант не привязывается к одному ряду, можно сделать и два ряда или сто, хоть чтобы дети фото все вмещались в родителя, в любых случаях будет считать правильно.

В коде @Геннадий Журов вышесказанное работать не будет.

enter image description here

const a = document.querySelectorAll('#lightgallery a')
let invisible = 0

a.forEach(el => {
  const { bottom } = el.parentNode.getBoundingClientRect()
  const { top } = el.getBoundingClientRect()

  if (top >= bottom)
    invisible++
})

console.log('Спрятанных элементов: ' + invisible)
#lightgallery {
  overflow: hidden;
  margin-top: 30px;
  height: 122px;
  position: relative; /* important */
}

#lightgallery a {
  width: 176px;
  display: inline-block;
  height: 100%;
}

#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>

0

Решил свою задачу вот так, может кому пригодится, всем спасибо за помощь.

 var countPhoto = 0;
 countPhoto = $('#lightgallery a').length-5;

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.