Snorlax February 2016

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 javascript doesn't work but I think I'm headed in the right direction hopefully.

$('.thumb-box').click(function() {

  $(this).parent('.main-image').attr('src', '.thumb-box > img').fadeIn();

});

//Resize image
  $('.main-image').each(function() {
  if ($(this).height() > 550) { $(this).addClass('higher-than-max'); }
  else if ($(this).height() <= 550) {$(this).addClass('not-higher-than-max');}
});
.parent{
  border:1px solid purple;
  height:100%;
  width:80%;
  float:Right;
}
.child{
  border:1px solid red;
  height:100%;
  background:gray;
  text-align:center;
}
.child-img{
display:inline-block;
max-width:100%;
margin:0 auto;
}
.image-wrapper{
  width:100%;
  background:orange;
}
.thumbnails img{
width:auto;
height:100%;
width:100%;
}
.thumbnails{
  width:100px;
  height:100px;
  
}
.thumb-box{
  height:40%;
  width:40%;
  display:inline-block;
  background:red;
}
.higher-than-max{
  max-height:500px;
  width:auto;
}
.not-higher-than-max{
  max-height:100%;
  width:auto;
}
<div class="parent">
  <div class="child">
  <div class="image-wrapper">
    <img src="http://vignette2.wikia.nocookie.net/pokemon/images/b/b1/025Pikachu_XY_anime_3.png/re        

Answers


Mi-Creativity February 2016

You have couple issues in your .click() function:

  1. 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') .
  2. 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.

Change it to this

JS Fiddle 1

$('.thumb-box').click(function() {

  // 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
  $(this).parents('.image-wrapper').find('.main-image').attr('src', theSRC).fadeIn();

});

For the second issue "having max height of 550px" you can do it simply in CSS without the need for the resize code in javascript so remove the unnecessary code (2), just add this to your CSS (3) :

JS Fiddle 2

.main-image {
  max-height: 550px;
  width: auto;
}

------------------------------------------------------------------------------

(1) https://api.jquery.com/parents/

(2

Post Status

Asked in February 2016
Viewed 3,955 times
Voted 4
Answered 1 times

Search




Leave an answer