условие для изображений
Здравствуйте! Помогите мне пожалуйста. На сайте N кол-во изображений "класс - .ob_img img" есть код
$('.ob_img').append('<div class="photo_numb"></div>');
Хочу чтобы этот код применялся только к тому изображению чей размер в ширину превышает 100px, это возможно? Я не разбираюсь в js помогите мне |
А в чем Вы разбираетесь, позвольте спросить?)
|
Я только начинаю изучать js и jquery. Пока изучил только html и css
|
joker95,
в изображение нельзя вставить div. |
<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>
|
Rasy,
а если размер картинки только после загрузки? |
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>
|
Цитата:
|
рони,
если не ждать полную загрузку страницы?
$(function() {
$(".ob_img img").load(function (){
$(this).filter(function() {
return $(this).width() > 100
}).after('<div class="photo_numb"></div>')
})
});
|
Цитата:
img.complete && img.onload() или назначение на все картинки успевает до их загрузки или я что-то упустил. |
|
Цитата:
Цитата:
Цитата:
типа такого https://raw.githubusercontent.com/pe...hpi.imgload.js |
рони, тогда в чем смысл данного кода7
<img src="book.png" alt="Book" id="book">
$( "#book" ).load(function() {
// Handler for .load() called.
});
|
Rasy,
не знаю |
Rasy,
работает но ранее были проблемы из-за кеша, может внесли изменения ... но в документации куча предостережений наверно не просто так. |
Спасибо всем большое, все работает)))
|
вот только первый вариант иногда не полностью срабатывает, а этот работать не хочет почему-то
$(function() {
$(".ob_img img").load(function (){
$(this).filter(function() {
return $(this).width() > 100
}).after('<div class="photo_numb"></div>')
})
});
|
| Часовой пояс GMT +3, время: 01:57. |