Question

I Recently launched my portfolio page, and I used a jquery plugin to sort my portfolio entries based on their classes. Please view it Here

You will notice that when you rollover each image, it enlarges and a case study link shows up. That is how it should look. When you press on the logos & branding button (up top) it functions perfectly as well. BUT, press any of the other buttons and then scroll over an image. It disappears! The only way to make that image come back, is to return back to the “all” or “logos & branding” section and rollover the missing image.

I cant seem to figure out why some of it is working and most of it isn’t. The code seems to be consistent, but maybe I am missing something. Thanks.

Answer 1

This happens because you calculate the width and height from the first .zitem you find

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

When the first item is hidden (due to the filtering) its display is set to none, so its width and height become 0.

you will need to read the first visible .zitem when reading the height/width like this

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

do the same thing when you unzoom the image