JQuery изображение теряется при исчезновении, помогите!

Question

Я недавно запустил страницу своего портфолио и использовал плагин jquery для сортировки записей своего портфолио по их классам. Пожалуйста, просмотрите Здесь

Вы заметите, что при переносе каждого изображения оно увеличивается, и появляется ссылка на конкретный пример. Вот как это должно выглядеть. Когда вы нажимаете на кнопку с логотипом и логотипом (вверху), она также отлично работает. НО , нажмите любую другую кнопку и прокрутите изображение. Это исчезает! Единственный способ вернуть изображение - вернуться в раздел «все» или «логотипы и брендинг» и перенести недостающее изображение.

Кажется, я не могу понять, почему некоторые из них работают, а большинство - нет. Код выглядит согласованным, но, может быть, я что-то упустил. Спасибо.

Answer 1

Это происходит потому, что вы вычисляете ширину и высоту по первому найденному .zitem

width = $('.zitem').width() * zoom;
height = $('.zitem').height() * zoom;

Когда первый элемент скрыт (из-за фильтрации), его отображение не устанавливается, поэтому его ширина и высота становятся равными 0.

вам нужно будет прочитать первый видимый .zitem при чтении высоты / ширины, как это

width = $('.zitem:visible').width() * zoom;
height = $('.zitem:visible').height() * zoom;

сделать то же самое, когда вы увеличите изображение