Форум

joker95 · #1 (**permalink**) 29.06.2016, 19:36

Здравствуйте! Помогите мне пожалуйста. На сайте N кол-во изображений "класс - .ob_img img" есть код

$('.ob_img').append('<div class="photo_numb"></div>');

Хочу чтобы этот код применялся только к тому изображению чей размер в ширину превышает 100px, это возможно? Я не разбираюсь в js помогите мне

Viral · #2 (**permalink**) 29.06.2016, 19:53

А в чем Вы разбираетесь, позвольте спросить?)

joker95 · #3 (**permalink**) 29.06.2016, 19:58

Я только начинаю изучать js и jquery. Пока изучил только html и css

рони · #4 (**permalink**) 29.06.2016, 20:56

joker95,
в изображение нельзя вставить div.

Rasy · #5 (**permalink**) 29.06.2016, 20:58

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>
<div class="ob_img">
  <img src="http://spirit-ninja.ru/wp-content/uploads/2012/08/frog-milk.jpg" style="width: 200px" alt="">
</div>
<div class="ob_img">
  <img src="http://spirit-ninja.ru/wp-content/uploads/2012/08/frog-milk.jpg" style="width: 100px" alt="">
</div>

<script>
$('.ob_img img').each(function(indx, elem) {
  if ($(elem).width() > 100) {
  	$(this).parent().append('<div class="photo_numb">Rasy</div>');
  }
});
</script>
</body>

рони · #6 (**permalink**) 29.06.2016, 21:02

Rasy,
а если размер картинки только после загрузки?

рони · #7 (**permalink**) 29.06.2016, 21:17

joker95,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .photo_numb:after{
    content: "big"
  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

  <script>
 $(window).on("load", function(){
 $(".ob_img").filter(function() {
 return $("img",this).width() > 100
}).append('<div class="photo_numb"></div>');
   })
  </script>
</head>

<body>
<div class="ob_img">
  <img src="http://i.i.ua/photo/images/pic/6/4/1008546_75741f3e.jpg"  alt="">
</div>
<div class="ob_img">
  <img src="http://pda.maybe.ru/p/177/176879/t17638688.jpg"  alt="">
</div>
</body>
</html>

Rasy · #8 (**permalink**) 29.06.2016, 21:48

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

а если размер картинки только после загрузки?

забыл про нерушимый факт

Rasy · #9 (**permalink**) 29.06.2016, 22:14

рони,
если не ждать полную загрузку страницы?

$(function() {
  $(".ob_img img").load(function (){
    $(this).filter(function() {
      return $(this).width() > 100
    }).after('<div class="photo_numb"></div>')
  })
});

рони · #10 (**permalink**) 29.06.2016, 22:24

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

если не ждать полную загрузку страницы?

неуверен я в этой конструкции, не знаю есть ли в jquery
img.complete && img.onload() или назначение на все картинки успевает до их загрузки или я что-то упустил.

Форум

Справочник

Discord чат

Курсы javascript