We Keep Coding

Hide image when the src is unknown

I'm trying to hide images without the src in WordPress.
Following is the image code displaying on the front end
<img src="[custom-gallery-image-01]" class="galimage" height="300" width="580"/>
JS used to hide the image
<script type="text/javascript">
$(document).ready(function() {
$(".galimage").each(function() {
var atr = $(this).attr("src");
if(atr == "") {
$(this).addClass("hidegalimage");
} else {
$(this).removeClass("hidegalimage");
}
});
});
</script>
CSS
.hidegalimage {
display:none;
}
But I can still see the broken image icon & an image border. View JSFiddle. Can someone fix my issue or give me a suggestion how to hide the image?
Many thanks

Much more elegant to use CSS instead, no Javascript required, assuming the bad srcs start with [ as in your HTML: are empty strings:
.galimage[src=""] {
display:none;
}
<img src="https://www.gravatar.com/avatar/b3559198b8028bd3d8e82c00d16d2e10?s=32&d=identicon&r=PG&f=1" class="galimage" height="300" width="580"/>
<img src="" class="galimage" height="300" width="580"/>
<img src="https://www.gravatar.com/avatar/b3559198b8028bd3d8e82c00d16d2e10?s=32&d=identicon&r=PG&f=1" class="galimage" height="300" width="580"/>

Using jquery
$("img").error(function(){
$(this).hide();
});
Or
$("img").error(function (){
$(this).hide();
// or $(this).css({'display','none'});
});

no need for CSS alternative
You can use this but this is not hidding its removing from the page at all (DOM):
<img id='any' src="https://invalid.com" onerror="document.getElementById(this.id).remove()" >

Use images as background and apply to div parents with the same class

I'm trying to use img src as background-image of its parent div (with the same class) with jQuery way, but I need to apply the concrete url of its img child to every div without changing or adding extra classes or id, so that each div parent applies a corresponding different background-image.
My HTML is something like this:
<div class="class">
<img src="url-image-1" />
</div>
<div class="class">
<img src=“url-image-2” />
</div>
<div class="class">
<img src="url-image-3" />
</div>
… and jQuery:
$('.class').css('background-image', 'url(' + $('.class img').attr('src') + ')');
$('.class img').remove();
This code is grabbing the first element (url-image-1) every time; it does not know I want to apply each img to its parent container.
Thanks in advance! (And sorry for my bad english).

You can use
$('.class').each(function(){
$(this).css('background-image', 'url(' + $(this).find('img').attr('src') + ')');
$(this).find('img').remove();
})

The issue is because you're selecting all the .class img elements. Calling attr() on that will only ever get you the first item found in the set.
To fix this, you can provide css() with a function that you can use to find the img related to the current .class element. Try this:
$('.class').css('background-image', function() {
return 'url(' + $(this).find('img').prop('src') + ')');
});

Try each function .And select the children image with children('img')
$('.class').each(function() {
$(this).css('background-image', 'url(' + $(this).children('img').attr('src') + ')');
console.log($(this).children('img').attr('src'))
$(this).children('img').remove();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="class">
<img src="url-image-1" />
</div>
<div class="class">
<img src="url-image-2"/>
</div>
<div class="class">
<img src="url-image-3" />
</div>

How to wrap an image in tag based on file name

I have a page with various images tapered throughout.
I would like to use jQuery to find those that use video.jpg and wrap those images in a new <div>:
<img src="/images/thumb1.jpg" alt="no div" />
<img src="/images/video.jpg" alt="wrap me" />
<img src="/images/thumb2.jpg" alt="no div" />

Try the following code:
$("img[src$=video.jpg]").wrap("<div></div>")

I Made this Fiddle for you.
This should work for you.
$(document).ready(function(){
var images = $('[src="/images/video.jpg"]');
images.each(function() {
$(this).wrap('<div class="wrapper"></div>');
})
})

Try this:
$('img[src=*"video.jpg"]').wrap('<div></div>');

Return to Main Image

So I have a little javascript code that swaps my main image on hover of the thumbnails that works perfectly well! is their a way to return to main on hover out I am sure there is a little if statement but i cannot figure it out!
<div class="product"><img id="main" src="mainImage.jpg" width="550"/></div>
<div class="products">
<img src="img.jpg" width="200"/>
<img src="img1.jpg" width="200"/>
<img src="img2.jpg" width="200"/>
</div>
and the javascript is
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.products img').mouseover(function() {
var url = $(this).attr('src');
$('#main').attr('src', url);
});
});
</script>

<script type="text/javascript">
$(document).ready(function(){
var def_url = $('#main').attr('src');
$('.products img').hover(function() {
var url = $(this).attr('src');
$('#main').attr('src', url);
}, function() {
$('#main').attr('src', def_url);
});
});
</script>

Try this...
$('.products img').mouseover(function() {
//do some action...
},function (){
//undo the action..
});

You can achieve this by using hover(). when you move mouse out of it , it restores original state and hovered gives you the required functionality.
So, it is a combination of two functions mouserover() and mouseout()
hope this helps..

You can make it in two ways:
1) use jQuery hover hover documentation
$(selector).hover(
function(){ alert("Hover in"); },
function(){ alert("Hover out); }
);
2) use <div> with background image and change it on hover with css
#selector{
background: url('image1.png');
}
#selector:hover{
background: url('image2.png');
}

Trouble accessing child divs in jquery

I have multiple divs and I'm attempting to do a function when a user mouses over the divs. Inside of the divs there can be any number of "child" divs and I need to access them within the function. I don't seem to be able to do this. Here is an example of what I'm trying to do:
<div id='div_test' onmouseover='modelMouseOver2()' onmouseout='modelMouseOut()'>
<div id = "model1"><img src="img/circle.png" alt="" /></div>
<div id = "model2" class='models' onmouseover="modelMouseOver2()" onmouseout="model2MouseOut()" style=" width: 40px; height: 40px;"><img src="img/circle2.png" alt="" />
<div><img src="img/circle3.png" alt="" /></div>
<div><img src="img/circle4.png" alt="" /></div>
<div><img src="img/circle2.png" alt="" /></div>
</div>
<div id = "model3" class='models' onmouseover="modelMouseOver2()"><img src="img/circle3.png" alt="" /></div>
<div id = "model4" class='models' onmouseover="modelMouseOver2()"><img src="img/circle4.png" alt="" /></div>
<div id = "model5" class='models' onmouseover="modelMouseOver2()"><img src="img/circle5.png" alt="" /></div>
</div>
for The script:
function modelMouseOver2() {
// I'm not sure what to do here to access the child divs.
$(this).children("div").each(function (i) {
$(this).hide();
});
}

Try to use find()
$(this).find("div").hide();
But if you started using jQuery you may subscribe to your events on document load using jQuery itself:
$(function() {
$('div#div_test').hover(function() {
$(this).find('div').hide();
}, function() {
$(this).find('div').show();
});
});

try a js like this
(function($){
$('#div_test').hover(
function(){
// this is the mouse over
// this selects all the div inside
$(this).find('div');
},
function(){
// this is the mouse out
// this selects all the div inside
$(this).find('div');
}
);
})(jQuery);

You can do some thing like this
$(this).find("div").each(function () {
$(this).hide();
});

The problem is that in:
function modelMouseOver2() {
// I'm not sure what to do here to access the child divs.
$(this).children("div").each(function (i) { // here
$(this).hide();
});
}
The first "this" refers to the DOM window.
You have two options here. The first is to pass in this in the inline event, the second being just to set the event in javascript:
Inline:
<div id='div_test' onmouseover='modelMouseOver2(this)' onmouseout='modelMouseOut()'>
and the javascript for inline:
function modelMouseOver2(xthis) {
// I'm not sure what to do here to access the child divs.
$(xthis).children("div").each(function (i) {
$(this).hide();
});
}
Or, setting the onmouseover via javascript:
document.getElementById('div_test').onmouseover=modelMouseOver2;