Форум

LADYX · #1 (**permalink**) 19.06.2020, 21:56

Здравствуйте. Есть такой скрипт:

$(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 выводить.
Спасибо!

рони · #2 (**permalink**) 19.06.2020, 22:18

Сообщение от LADYX

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

Сообщение от LADYX

$(this).width() > 200

this.naturalWidth > 200

LADYX · #3 (**permalink**) 19.06.2020, 23:34

Точно)) А я указывал так:

$(this).naturalWidth() > 200

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

рони · #4 (**permalink**) 20.06.2020, 06:53

Сообщение от LADYX

Но почему-то так не работает.

Сообщение от LADYX

&& $(this).css('float') == 'none'

это зачем?

LADYX · #5 (**permalink**) 20.06.2020, 11:52

Сообщение от рони

это зачем?

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

рони · #6 (**permalink**) 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 · #7 (**permalink**) 20.06.2020, 16:15

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

Форум

Справочник

Discord чат

Курсы javascript