Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Подставлять title картинки в зависимости от ее размера (https://javascript.ru/forum/dom-window/80553-podstavlyat-title-kartinki-v-zavisimosti-ot-ee-razmera.html)

LADYX 19.06.2020 21:56

Подставлять title картинки в зависимости от ее размера
 
Здравствуйте. Есть такой скрипт:

$(document).ready(function() {
    var $newsImg = $(".story img");
    $newsImg.one("load", function() {
        $(this).after(function() {
            var imgTitle = this.title;
            if (imgTitle && imgTitle != '' && $(this).width() > 200 && $(this).css('float') == 'none')
            return "<span class='img_title'>" + imgTitle + "</span>";
        });
    }).each(function() {
        if (this.complete)
            $(this).trigger("load");
    });
});


<style>
img, span.img_title {display:block;}
</style>

<div class="story">
<img src="https://belnaviny.by/wp-content/uploads/2018/12/belnaviny.by-v-belarusi-dorozhaet-gorodskaya-telefonnaya-svyaz-i-pochtovye-otpravleniya-300x150.jpg" alt="Подсказка альт" title="Подсказка тайтл">
</div>


С помощью этого скрипта я вывожу title картинки отдельно span-ом. Вывод зависит от того, какого размера картинка показывается на экране. А возможно ли как-то изменить скрипт и сделать вывод title в зависимости именно от фактического размера самой картинки? Т.е., если физическая ширина картинки, скажем, 200px или больше, то только в этом случае title выводить.
Спасибо!

рони 19.06.2020 22:18

Цитата:

Сообщение от LADYX
в зависимости именно от фактического размера самой картинки?

:-?
Цитата:

Сообщение от LADYX
$(this).width() > 200

this.naturalWidth > 200

LADYX 19.06.2020 23:34

Точно)) А я указывал так:
$(this).naturalWidth() > 200

Но почему-то так не работает. Рони, спасибо-спасибо!! :)

рони 20.06.2020 06:53

Цитата:

Сообщение от LADYX
Но почему-то так не работает.

Цитата:

Сообщение от LADYX
&& $(this).css('float') == 'none'

это зачем?

LADYX 20.06.2020 11:52

Цитата:

Сообщение от рони
это зачем?

Рони, это можно убрать и прописать в стиле?

рони 20.06.2020 13:19

LADYX,
<!doctype html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
span.img_title{
   color: red;
}
.story img{
    width: 200px;
}
.story{
    margin: 8px;
}

</style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
$(function() {
    var $newsImg = $(".story img");
    $newsImg.one("load", function() {
        $(this).after(function() {
            var imgTitle = this.title;
            if (imgTitle  && this.naturalWidth > 200 ) return "<span class='img_title'>" + imgTitle + "</span>";

        });
    }).each(function() {
        if (this.complete)
            $(this).trigger("load");
    });
});

  </script>

</head>
<body>

<div class="story">
<img src="https://picsum.photos/300/100?1" alt="Подсказка альт" title="Подсказка тайтл 300">
</div>
<div class="story">
<img src="https://picsum.photos/200/100?1" alt="Подсказка альт" title="Подсказка тайтл 200">
</div>
<div class="story">
<img src="https://picsum.photos/400/100?1" alt="Подсказка альт" title="Подсказка тайтл 400">
</div>
</body>
</html>

LADYX 20.06.2020 16:15

Рони, огромнейшее спасибо!!! Успехов вам! И удачных выходных!


Часовой пояс GMT +3, время: 22:12.