Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   условие для изображений (https://javascript.ru/forum/dom-window/63793-uslovie-dlya-izobrazhenijj.html)

joker95 29.06.2016 19:36

условие для изображений
 
Здравствуйте! Помогите мне пожалуйста. На сайте N кол-во изображений "класс - .ob_img img" есть код
$('.ob_img').append('<div class="photo_numb"></div>');

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

Viral 29.06.2016 19:53

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

joker95 29.06.2016 19:58

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

рони 29.06.2016 20:56

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

Rasy 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>

рони 29.06.2016 21:02

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

рони 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 29.06.2016 21:48

Цитата:

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

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

Rasy 29.06.2016 22:14

рони,
если не ждать полную загрузку страницы?
$(function() {
  $(".ob_img img").load(function (){
    $(this).filter(function() {
      return $(this).width() > 100
    }).after('<div class="photo_numb"></div>')
  })
});

рони 29.06.2016 22:24

Цитата:

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

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


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