1

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

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

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>
4
  • Ну логично, всем h1 внутри списка.
    – Pro mark
    3 июл 2015 в 4:05
  • HTML добавил, изменил. Логичным то, что пока добавляется width, а то, что последняя и есть суть проблемы.
    – Pro mark
    3 июл 2015 в 4:12
  • Можно было бы без скриптов обойтись...
    – Qwertiy
    3 июл 2015 в 16:07
  • @Qwertiy, никто не мешает Вам поделиться своим безскриптовым вариантом.
    – Pro mark
    6 июл 2015 в 9:29

1 ответ 1

0
  • Добавил 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');
3
  • Благодарю! Единственное по поводу ` $('.projects h1')` я не совсем понял, почему стили будут присваиваться все заголовкам? Ведь $(".project-img img) выбирает картинки из области .project-img, или я что-то не так понял.
    – Pro mark
    3 июл 2015 в 4:43
  • @Promark на здоровье. Потому что селектор ".projects h1" подразумевает выбор всех h1 внутри всех .projects. .css() устанавливает стили для всех выбранных селектором элементов. С ".project-img img" ситуация аналогичная.
    – Regent
    3 июл 2015 в 4:49
  • Ну значит я все правильно понял, просто там других h1 не подразумевалось. Еще раз спасибо!)
    – Pro mark
    3 июл 2015 в 4:53

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.