Julieanne Gee Julieanne Gee - 1 month ago 19
Javascript Question

Click to expand works but click to close cuts off thumbnail

Working on this development site, http://dev.doubleaevents.com/, and stuck on the team section near the bottom.

When you click on one of the sandbox images, more information about the team member expands below, rearranging the other sandbox images. When you click to close, the original sandbox image gets cut off.

I am not well versed in JS, but I assume it is the JS that needs editing? I've been looking at this file and can't figure out what I need to edit to fix the issue: http://dev.doubleaevents.com/wp-content/plugins/portfolio-gallery/assets/js/view-toggle-up-down.js

Answer

Your issue is in this segment of code:

if (jQuery(this).parents('.portelement').hasClass("large")) {
        jQuery(this).parents('.portelement').animate({
            height: _this.defaultBlockHeight + 20 + 2*param_obj.portfolio_gallery_ht_view0_element_border_width+param_obj.portfolio_gallery_ht_view0_title_font_size
        }, 300, function () {
            jQuery(this).removeClass('large');
            portfolioGalleryIsotope(_this.container,'reLayout');
        });
        _this.element.removeClass("active");
        return false;
    }

instead of setting the height back to 240px you are setting it to 197. I think this in part due to you using the width of the image, in your function, which is 297.

You could manual set the height by changing this line

height: _this.defaultBlockHeight + 20 + 2*param_obj.portfolio_gallery_ht_view0_element_border_width+param_obj.portfolio_gallery_ht_view0_title_font_size

to this

height: 240

or you could rewrite your function to use the correct parameters.