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.

jQuery image gallery (need how to make the big image clickable)

im using the "CREATE IMAGE GALLERY IN 4 LINES OF JQUERY" (link below), which works just fine.
But i like to make the large images clickable (not just the thumbs), so that when i click on which ever image that is showing as the large image, another bigger version of the image opens in a new window.
http://workshop.rs/2010/07/create-image-gallery-in-4-lines-of-jquery/
Any ideas is greatly appreciated. Thank you.

You can wrap the large image in an anchor element:
<div id="panel">
<a href="images/image_01_largest.jpg" target="_blank">
<img id="largeImage" src="images/image_01_large.jpg" />
</a>
<div id="description">First image description</div>
</div>
This follows the convention that one image comes in three sizes: *_thumb.jpg, *_large.jpg, and *_largest.jpg. All you need to do now is change anchor's href attribute when changing #largeImage's src.
$('#thumbs img').click(function(){
$('#largeImage').attr('src', $(this).attr('src').replace('thumb', 'large'));
$('#largeImage').parent().attr('href', $(this).attr('src').replace('thumb', 'largest'));
$('#description').html($(this).attr('alt'));
});

Hi you may try with the Pretty photo plugin for displaying the gallery in the light box. Demo for Preety Photo.This may help you

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.

Make Colorbox Load one Image at a time

Im using the jQuery Colorbox plugin to load some images on the page. My issue is, colorbox will naturally take multiple instances in the same Div, and then allow the user to scroll through the images with the arrow buttons.
I would like to have colorbox just load each image individually, without creating a separate instance/class of colorbox for each image.
Example Code:
<a href="../../images/rd/demo/1.3.png" class="group2" ><img src="/images/rd/demo/2.png" /></a>
<a href="../../images/rd/demo/1.3.png" class="group2" ><img src="/images/rd/demo/2.png" /></a>
<a href="../../images/rd/demo/1.3.png" class="group2" ><img src="/images/rd/demo/2.png" /></a>
$(".group2").colorbox({
rel:'group2',
transition:"fade",
opacity:0.50,
innerWidth:650,
innerHeight:400,
arrowKey: false
});
If I click on one of the images/links above, colorbox will load all three and allow the user to tab through them. I just want each image loaded individually, without having to give each one a unique class id.
I checked the Colorbox Documentation, and did not see anything that helped my case.

I think you just need to remove this:
rel:'group2',
According to the docs, that's what is causing it to group them together.

have you tried $("a.gallery").colorbox({rel:"group1"}); that should over-ride the default grouping?

JQuery set img src depending on where you click

I used javascript for loading a picture on my website depending on which "small" photos in ul you clicked...
I had something like that :
<script type="text/javascript">
function viewImage(src, legende) {
document.getElementById("imageBig").src = "images/photos/"+src;
document.getElementById("legend").innerHTML = legende;
}
</script>
and in html simply :
things like that :
<ul id="ulPhotos">
<li>
<a href="#centre" onclick="javascript:viewImage('flute.jpg','La Reine de la Nuit au Comedia')">
<img src="images/photos/carre-09.jpg" alt="" />
</a>
<a href="#centre" onclick="javascript:viewImage('perichole.jpg','Manuelita - <em>La Périchole</em> à l’Opéra Comique')">
<img src="images/photos/carre-03.jpg" alt="" />
</a>
</li>
<li>
<a href="#centre" onclick="javascript:viewImage('12.png','Récital à Carnac, septembre 2008')">
<img src="images/photos/carre-12.jpg" alt="Marion Baglan Carnac Ré" />
</a>
<a href="#centre" onclick="javascript:viewImage('01.jpg','')">
<img src="images/photos/carre-01.jpg" alt="" />
</a>
</li>
</ul>
so you see, I could, depending on which small photos in the unordered list you clicked, load some particular photos, by passing the src string in argument to my viewImage function...
but I decided to use Jquery to get some fade-in effect. But I can't find a way to pass an argument that would tell my JQuery function which photo to load depending on where I clicked...
stuck here :
$(document).ready(function(){
$('#ulPhotos').click(function() {
var newSrc = $('#imageBig').attr("src", "images/photos/11.jpg");
});
});
I don't want the 11.jpg to be hardcoded, I need to pass it through argument when I click on a special li element in my ul element of id #ulPhotos...
I hope I'm clear enough sorry !

karim79 gives a correct solution, but doesn't actually explain your problem.
You are attaching the click handler to the list itself instead of directly to the images. When an attached jQuery behavior callback fires, this is the element that was clicked, which you want to be the a links surrounding the images. In your current case this will be the list itself.
You don't necessarily need to add a class to the thumbnails. $('#ulPhotos a') will get you to them just as easily. I do agree with the suggestion to use a data- attribute on the clickable to know which large image you want to show.
In addition, if you are going to add secondary click behavior to the a elements, you probably want to prevent the default behavior from happening, so something like:
$('#ulPhotos a').click(function (event) {
$('#imageBig').attr('src', $(this).attr('data-big-image'));
event.preventDefault();
});

A pretty straightforward solution would be to assign a common (thumb or whatever) class to all the small images, and store the filename of the bigger images within their rel attributes, e.g.:
<img src="something.jpg" rel="something_big.jpg" class="thumb"/>
<img src="somethingElse.jpg" rel="somethingElse_big.jpg" class="thumb"/>
<img id="bigImage" src="something_big.jpg"/>
$(".thumb").click(function() {
$("#bigImage").attr('src', $(this).attr("rel"));
});
data is another storage mechanism you might consider.
It is also quite common (and simple) to follow a particular convention and 'assemble' the filename of the larger image based on the src of the clicked smaller one, for example:
<img src="something.jpg" class="thumb"/>
<img src="somethingElse.jpg" class="thumb"/>
<img id="bigImage" src="big_something.jpg"/>
$(".thumb").click(function() {
$("#bigImage").attr('src', 'big_' + $(this).attr("src"));
});
That assumes that all of your full-sized images are prefixed with 'big_', so it's a simple matter of appending 'big_' to the src of the clicked thumbnail.

thanks to both of you, my website is working, I give the final code for beginners like me who could have the same needs...
here's the function :
<script type="text/javascript">
$(document).ready(function(){
$('#ulPhotos a').click(function() {
var newSrc= $(this).find('img').attr('src').split("/");
bigPictureName = 'big'+newSrc[2];
$('#imageBig').attr("src", "images/photos/"+bigPictureName).hide();
$('#imageBig').fadeIn('fast');
var alt = $(this).find('img').attr('alt');
$('#legend').html(alt);
});
});
</script>
here are the html elements :
<ul id="ulPhotos">
<li><img src="images/photos/09.jpg" title="La Reine de la Nuit au Comedia" alt="<em>La Reine de la Nuit</em> au Comedia"/>
<img src="images/photos/03.jpg" title="Manuelita, La Périchole à l’Opéra Comique" alt="Manuelita, <em>La Périchole</em> à l’Opéra Comique" /></li>
<li><a href="#centre" ><img src="images/photos/12.png" title="" alt="Marion Baglan Carnac Ré" /></a>
I used the alt attribute to append the legends so as to be able to add some html tags like <em > because the title appears when you hover your mouse on the thumbnails, and I didn't want people to see strange tags for them...
sometimes, it's a little slow when you click very fast it can stay on the previous photo for a little while at first try, maybe because I didn't use a CDN to put the minified version of jquery (I read such an advice), don't know, I'm truly a beginner, but it's nothing serious anyway...
by the way, the page is here..http://www.marion-baglan.net/photos.htm