Подставлять 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 выводить. Спасибо! |
Цитата:
Цитата:
this.naturalWidth > 200 |
Точно)) А я указывал так:
$(this).naturalWidth() > 200 Но почему-то так не работает. Рони, спасибо-спасибо!! :) |
Цитата:
Цитата:
|
Цитата:
|
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> |
Рони, огромнейшее спасибо!!! Успехов вам! И удачных выходных!
|
Часовой пояс GMT +3, время: 22:12. |