Заголовок по ширине картинки

357
15 декабря 2016, 16:22

Есть горизонтальный список, состоящий из картинок и заголовков под ними. Хочу сделать, чтобы заголовок зависел от ширины картинки.

Получил ширину всех картинок. Сейчас всем заголовкам приходит одна и та же ширина.

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>
Answer 1
  • Добавил div'ам внутри .projects класс project, а h1 - класс project-header. При желании можно обойтись без этого, но с классами решение более гибкое.
  • Ширина теперь устанавливает только для заголовка внутри блока с картинкой, а не для всех заголовков.
  • Так как в заголовках используется крупный шрифт, то в примере они не выглядят как элементы нужной ширины. Однако можно убедиться, что в их стилях установлены соответствующие значения width.
  • Помогает ли if (this.complete) $(this).trigger('load'); на практике - не знаю, но из кода убирать не стал.

$(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>

Получение заголовка без добавления классов:

var header = $(this).closest('a').find('h1');
READ ALSO
border-botton у div сверху
HTML

border-botton у div сверху

Вот смотрите, http://jsfiddlenet/mgpv8qvt/1/ почему подчеркивание идет над строкой а не под?

 383
Помогите скачать чужой лендинг и обойти зажиту [закрыто]
HTML

Помогите скачать чужой лендинг и обойти зажиту [закрыто]

Я не знаю как правильно скачать себе эту страничку тутмирф что бы правильно подгрузились все элементы и этот лендингбыл рабочим

 248
Как сделать панель с кнопками и выпадающим списком для кнопок, которые не поместились в панели?
HTML

Как сделать панель с кнопками и выпадающим списком для кнопок, которые не поместились в панели?

Как сделать панель с кнопками так, чтобы при уменьшении панели (окна) не помещающиеся кнопки прятались в кнопку в этой же панели, при клике...

 316
ModX rev - Wayfinder меню с иконкой
HTML

ModX rev - Wayfinder меню с иконкой

Здравствуйте!

 388