Hide dead or broken images using jQuery

If you’re like me, and have tasted all or most of the Content Management Systems (CMS) the world (Internet) has to offer, you know how difficult it can be developing for legacy systems. A while back I was building a custom “Web App” for Business Catalyst that my client could easily update on the back-end to update a gallery of images. If you’re familiar with Business Catalyst and it’s “Web App” module, you know that if a data field is blank, it won’t drop the data. The problem was that these images all needed to open in a lightbox once clicked. Looking back, I could have used jQuery’s
.wrap()
or similar to wrap each image, but at the time I wasn’t as smooth with jQuery as I am today. So at the time, with the limitations of the CMS (Business Catalyst) and the limitation of jQuery (HA!) I choose to hide/remove all images that didn’t load. This had to be done to give the client enough spots on the back-end to upload images for each gallery set they wanted. At the time I used
.hide()
, but later changed it to
.remove()
.

1
2
3
4
5
$(document).ready(function() {
    $("img").error(function(){
        $(this).remove();
    });
});

Leave a Reply

Your email address will not be published. Required fields are marked *

*


6 + 1 =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>