Update child div's image size to never exceed parent div
I want to detect the image size when it is placed in the main image and if it's above a certain height, make the image a certain height. I'm having issues with this because right now, it seems to only detect the first image and is currently not responsive when I choose another image by clicking the thumbnail.
All images when put in the main-image area should be centered.
the .main-image is not parent of thumb-box, so you need to use parents()(1) instead of parent() to select a higher-level parent then navigate to the big image -and it'll be parents('.image-wrapper').find('.main-image') .
this .attr('src', '.thumb-box > img') will inject the string ".thumb-box > img" into the src attribute of the big image instead of injecting the source of the image in the .thumb-box into the big image src attribute.
// grab the src of the image nested in the just clicked tumb-box
var theSRC = $(this).find('img').attr('src');
// using parents() we grab the .image-wrapper, then the main-image nested inside it
// and inject the stored src value of the thumb-box image into the main-image source