CODEWITHSUNDEEP
javascriptjqueryhtmlcsshide
coolio83000
coolio83000

Reputation: 119

hide or delete image not found with javascript or jquery

can I hide, jump or delete images not found in balise 

<a href="...">

and 

<img src="...">





I already use :

$("img").error(function(){ $(this).hide(); });

images not found are hidden but when i'm in my gallery i can see a white screen.




HERE IS MY GALLERY EXAMPLE

<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/6.jpg" title="">
<img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/06.jpg" alt=""/>
</a>

<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/5.jpg" title="">
<img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/05.jpg" alt=""/>
</a>

<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/4.jpg" title="">
<img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/04.jpg" alt=""/>
</a>

<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/3.jpg" title="">
<img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/03.jpg" alt=""/>
</a>

<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/2.jpg" title="">
<img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/02.jpg" alt=""/>
</a>


<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/1.jpg" title="">
<img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/01.jpg" alt=""/>
</a>

Upvotes: 2

Views: 1401

Answers (2)

Quangdao Nguyen
Quangdao Nguyen

Reputation: 1373

My guess is that the empty space is coming from the empty a tag, so you might want to select the parent instead. So instead of $(this).hide(); try $(this).parent().hide();.

Additionally, by using this method, you might want a more specific selector than just $('img'). So maybe try $('.fancyboxthumbnailsgallery').error(function(){ $(this).parent().hide(); });.

To hide all images, I would check for the the class and handle the hiding differently, like so:

$('img').error(function(){
    if($(this).hasClass('fancyboxthumbnailsgallery')){
        $(this).parent().hide();
    } else {
        $(this).hide();
    }
});

jQuery().parent()

Upvotes: 0

BenG
BenG

Reputation: 15154

How about removing the a:-

$("img").error(function() {
  $(this).parent().remove();
});

$("a.fancyboxgallery").fancybox();
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.js"></script>

<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/6.jpg" title="">
  <img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/06.jpg" alt="" />
</a>

<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/5.jpg" title="">
  <img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/05.jpg" alt="" />
</a>

<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/4.jpg" title="">
  <img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/04.jpg" alt="" />
</a>

<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/3.jpg" title="">
  <img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/03.jpg" alt="" />
</a>

<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/2.jpg" title="">
  <img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/02.jpg" alt="" />
</a>


<a class="fancyboxgallery" rel="book" href="http://www.booclin.ovh/tom/2/index/photos/projet/1.jpg" title="">
  <img class="fancyboxthumbnailsgallery" src="http://www.booclin.ovh/tom/2/index/photos/projet/01.jpg" alt="" />
</a>

Upvotes: 1

Related Questions