There is a horizontal list consisting of images and captions under them. I want to make the title dependent on the width of the image.

Got the width of all the pictures. Now all the headers come the same width.

Js:

$(".project-img img").one('load', function() { var width = $(this).width(); $('.projects h1').css('width', width); console.log(width); }) .each(function() { if (this.complete) $(this).trigger('load'); });

HTML:

 <div class="projects"> <div> <a href="#someproject1" title="someproject1"> <span class="project-img"> <img src="./img/project1.jpg" alt="someproject1" title="someproject1" /> </span> <h1>Название проекта1</h1> </a> </div> <div> <a href="#someproject2" title="someproject2"> <span class="project-img"> <img src="./img/project2.jpg" alt="someproject2" title="someproject2" /> </span> <h1>Название проекта2</h1> </a> </div> <div> <a href="#someproject3" title="someproject3"> <span class="project-img"> <img src="./img/project3.jpg" alt="someproject3" title="someproject3" /> </span> <h1>Название проекта3</h1> </a> </div> </div>
  • Well, it is logical, all h1 inside the list. - Pro mark
  • HTML added, changed. The logical thing is that while the width is added, and that the latter is the essence of the problem. - Pro mark
  • One could do without scripts ... - Qwertiy ♦
  • @Qwertiy, no one bothers you to share your script-less version. - Pro mark

1 answer 1

  • Added a div 'am inside the .projects class project , and h1 - the project-header class. If you wish, you can do without it, but with classes the solution is more flexible.
  • The width now sets only for the header inside the block with the picture, and not for all headers.
  • Since the headings use a large font, in the example they do not look like elements of the desired width. However, you can make sure that their styles are set to the appropriate width .
  • Does if (this.complete) $(this).trigger('load'); in practice, I don’t know, but didn’t remove it from the code.

 $(function() { $(".project-img img").one('load', function() { var width = $(this).width(); var header = $(this).closest('.project').find('.project-header'); header.css('width', width); }) .each(function() { if (this.complete) $(this).trigger('load'); }); }); 
 <div class="projects"> <div class="project"> <a href="#someproject1" title="someproject1"> <span class="project-img"> <img src="http://waytoeast.ru/units/unit1.png" alt="someproject1" title="someproject1" /> </span> <h1 class="project-header">Название проекта1</h1> </a> </div> <div class="project"> <a href="#someproject2" title="someproject2"> <span class="project-img"> <img src="http://waytoeast.ru/images/page_bg.jpg" alt="someproject2" title="someproject2" /> </span> <h1 class="project-header">Название проекта2</h1> </a> </div> <div class="project"> <a href="#someproject3" title="someproject3"> <span class="project-img"> <img src="http://waytoeast.ru/images/border.png" alt="someproject3" title="someproject3" /> </span> <h1 class="project-header">Название проекта3</h1> </a> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Getting a title without adding classes:

 var header = $(this).closest('a').find('h1');
  • Thank you The only thing about `$ ('. Projects h1')` I didn’t quite understand why styles would be assigned to all headers? After all, $(".project-img img) selects images from the .project-img , or I misunderstand something. - Pro mark
  • @Promark on health. Because the selector ".projects h1" implies the selection of all h1 within all .projects . .css() sets styles for all elements selected by the selector. With ".project-img img" situation is similar. - Regent
  • Well, that means I understood everything correctly, it was just that there was no other h1 implied there. Thanks again!) - Pro mark