This question is a continuation of my previous inquiries.
I have a CSS file that needs to be included (first_style.css in the code snippet below). The necessary style is img { height:auto; }. Any additional styles can be added before or after this line. Once the images are loaded, a script modifies their height as shown below.
When I exclude first_style.css, everything functions correctly. However, when it is included, which is required, the script stops working. How can this issue be resolved?
$(function() {
$('.images div a img').on('load', function() {
$(this).attr('height', $(this).closest('.images').attr('imgheight'));
});
});img {
height:none !important;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel='stylesheet' href='http://www.yu51a5.com/wp-content/themes/pinboard-child/first_style.css' type='text/css' media='all' />
<div imgheight="300px" class="images">
<div><a> <img src=" http://www.yu51a5.com/wp-content/uploads/2015/01/goldenhorseman.jpg " /></a> </div>
<div><a> <img src=" http://www.yu51a5.com/wp-content/uploads/2015/01/bronze-horseman.jpg "/></a> </div>
</div>