Develop Reference

How should I not load the images with broken link?

I'm working on a feature, in which images are being rendered from the servers. I was working on aligning the images but found that there is a lot of white space. This was the reason, due to loading of images with a broken link.
HTML :
<div class="image-result" *ngIf="Display('images')">
<div class="col-sm-3" *ngFor="let item of items$|async">
<a href="{{item.link}}">
<figure>
<img class="res-img" src="{{item.link}}" onerror="this.style.display='none'">
</figure>
</a>
</div>
</div>
I have used onerror="this.style.display='none'" to solve the problem, but leaves a lot of white space when images are being loaded from the server. Is there any solution for it like to remove img tag whenever a image with a broken link has been detected ? I have gone through stackoverflow before asking question, but I'm not able to solve this problem. It would be great if someone can help me out. Thanks! :)

Instead of onerror="this.style.display='none'" to hide an image, you can use onerror="this.parentNode.removeChild(this)" to remove the image tag altogether.
If you want to remove the entire column, in your specific case you can do the following.
var colEl = this.parentNode.parentNode.parentNode;
colEl.parentNode.removeChild(colEl);
Or, in your HTML:
onerror="this.parentNode.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode.parentNode)"
You should probably move that to some JavaScript function and attach your handler by saying
element.addEventListener('error', function() { /* ... */ });
References: parentNode, removeChild, addEventListener.
If you don't care about supporting Internet Explorer, you can also use remove instead of doing the parentNode.removeChild trickery. That would be particularly useful for reducing the code length in your onerror attribute, would you choose to use it, but I don't recommend that.

A more angular-way of doing this would be:
<img src="{{item.link}}" (error)="item.brokenImage=true">
So you would have:
<div class="col-sm-3" *ngFor="let item of items$|async">
<div *ngIf="!item.brokenImage">
<a href="{{item.link}}">
<figure>
<img class="res-img" [src]="item.link" (error)="item.brokenImage=true">
</figure>
</a>
</div>
</div>
You need to listen for the error event of the image element, and assign a boolean on whether the image loaded successfully or not. Then, depending on that value angular will either show the image with the div, or remove it from the DOM.

on jquery, how to manually define image src into html <img> tag

i'm trying to create a page filled with thumbnails, and on click, another div Full(to show the thumbnail image in full screen) will pop out, i will retrieve the src of the thumbnail img and pass into the Full div to display the clicked image.
This is what i have so far, fiddle: http://jsfiddle.net/mwhLoyy8/1/
<div class="img_section">
<img class="test_img" src="http://i.imgur.com/BjVeUYS.png" alt="logo">
</div>
<div class="img_section">
<img class="test_img" src="http://i.imgur.com/MA9tr9p.jpg" alt="logo">
</div>
for now i am detecting test_img click, and retrieving from js with
img = $('<img />', {src : this.src,
'class': 'full_image_pic'
});
this.src works fine, but i want to change to detecting on img_section instead of test_img, but i don't know how to retrieve the src, i tried this.test_img.src but it doesn't work.
Reason why i want to detect the div instead of the img directly is because in my real working file i have overlay another and while mouseover on the thumbnails, which the detection will not work on the words, since i only make it image-detectable only, so i want to change to detecting the parent div instead.
Another thing is, once i display the full image, how do i display unique Title & description under the full image displayed? Please guide me! Thanks
for Kamal
<div class="popUp">
<div class="fullPic">
<img class="full_image_pic" src="images/pic1.jpg" alt="logo2">
<div class="full_image_desc">
<h3 class="desc">Title</h3>
<p class="desc">My desc</p>
</div>
</div>

You can get the src with jQuery attr
img = $(".test_img").attr('src');
and change the src by
$(".full_image_pic").attr('src', img);
Please also take a look at this exmaple.
For changing title and description dynamically, you can add attributes in your original image;
<div class="img_section">
<img class="test_img" src="http://i.imgur.com/MA9tr9p.jpg" img-title="some title" img-desc="some description" alt="logo">
</div>
Than use the attr to change the info.
title = $(".test_img").attr('img-title');
and using .html change the content of title/description
$(".full_image_pic .desc").html(title);

You can use class or ID to select an image and change image src
$(".image class or #ID").attr("src", "file name");
$(".photo").attr("src", "photo.jpg");
$("#logo").attr("src", "new-logo.jpg");

Use
$(".test_img").attr("src","abc.jpg");

JS Image replacement on mouse click

I’m new with JS and looking for any tips how to implment or even how can I replace a part of big image (that conisists of two smaller images) when you change some option on the sidebar for example when you change product parameters.
When you click either or “Kolor karnisza:” or “Wzór końcówki:” a part of image changes. Either the color of curtain rod or curtain rod end.
How can I achieve this, as far as I already learnt two images are positioned absolutely with z-index and I need some JS or jQuery library to do this effect (what library?).
This is the website I’m talking about:
https://www.sklep-karnisze.net/1136,-34-Carbonera-34-podwojne-proste-19-mm?r=#/#8,7,2,50,1,10,
Thx in advance for your help.

<head>
<script>
function changeImage(imgName)
{
image = document.getElementById('largepic');
image.src = imgName;
}
</script>
</head>
<body>
<img src = 'largemaimimage.jpg' id = 'largepic' />
<img src ='small1.jpg' onClick="javaScript:changeImage('small1.jpg');"/>
<img src ='small2.jpg' onClick="javaScript:changeImage('small2.jpg');"/>
<img src ='small3.jpg' onClick="javaScript:changeImage('small3.jpg');"/>
</body>
Many Times this is answered on this site

Display image with actual sizes onclick

Before posting here i was testing over 30 or so Jquery image plugins to make my images appear full width when clicked on.
the structure of the HTML is as follows:
<div class="whatever">
<img id="noonecares" src="pff"></img>
</div>
and not
<img ></img>
I'm not talking about zooming in the photos but displaying the whole image onclick instead
I'm looking for a Jquery solution preferably.
The solutions that i've been looking into are: zoomfancy easyzoom ajaxzoom ...
Thank y'all

If you just want a simple inline image expander then jQuery's toggleClass() is perfect for that. You shrink the images to a fixed size with CSS and then toggle it with a click.
DEMO

Something like
<div>
<img src="http://t1.gstatic.com/images?q=tbn:ANd9GcRvA_rqizvEgVJhJwLbpgMz7CgGwnjW5BlXHrBNzRwRXsq7O3Gi" />
</div>
script
$("div").on("click", function() {
window.open($("img").attr("src"), "_blank", "menubar=1,resizable=1");
});
?
jsfiddle: http://jsfiddle.net/chrisbenseler/6GW6M/

This is my approach.
<div class="whatever">
<img id="noonecares" src="http://imagizer.imageshack.us/v2/100x75q90/21/0ss1.jpg"></img>
</div>
Script
$('.whatever').on('click','#noonecares', function(){
window.open($(this).attr('src'));
});
JSfiddle: http://jsfiddle.net/hFp6z/
UPDATE: If you want a plugin to zoom full size, then you can check fancybox or lightbox.

how to make a twitter-bootsrap popover on an HTML image map

I am making a website, in the website i haven an image with an image map.
I am stuck on this point, the popover is working perfectly in an tag but not in the tag. does anyone know how to get the twitter-bootstrap popover work on an image map?
I think it has someting to do with this line: $('#example').tooltip(options) tooltip exaple
the twitter-bootstrap pover
Thanks (i hope my English is understandable)

Turn your image map into something like (fill the ...px with actual dimensions):
<div id="#map" style="position:relative;width:...px;height:...px;background-image:...">
<a id="map-link-1" href="/path/url/for/target/or/#"
style="position:absolute;top:...px;left:...px;width:...px;height:...px"> </a>
<a id="map-link-2" href="/path/url/for/target/or/#"
style="position:absolute;top:...px;left:...px;width:...px;height:...px"> </a>
...
</div>
Then deal with the anchors like you are used to.