Using jQuery to tidy up missing Images Part 2

I mentioned in my previous post “Using jQuery to tidy up missing Images” that I had a couple of ideas on how we could take this simple implementation further. Well here is 1 of those ideas.

Allowing users to report missing images

First off I have re-factored the code so it looks alot nicer and well saves me repeating code where it’s not needed.  I have added in a function that adds a span on top of the missing photograph like so:

Report Missing Images jQuery

When a user clicks anywhere on the photograph a function is called and in this case an alert showing what image is missing.

Report Missing Images jQuery Alert

For a demo and full source check out :

The function that has the alert in it could easily be an ajax call to the server logging the image that’s 404′ing, once logged it could even hide the image that was clicked.  Lots and lots of options, and it’s so simple. Now on to the code:

  $(function () {
		         if ($.browser.msie) {
		             $('img').each(function () {
		                 if (this.readyState == 'uninitialized') {
		                     AssignReportSpan($(this));
		                 }
		             });
		         } else {
                        $('img').error(function () {
		             AssignReportSpan($(this));
		                });
		         }
		        
		     });

			 function AssignReportSpan(obj) {
				 var beforesource = $(obj).attr('src');
				 $(obj).attr('alt', 'image not found').attr('src', 'images/not-found-image.jpg').after('<span class="rmessageh bottomc trans">Click photo to report missing.</span>').bind('click', function () {
					 SubmitMissing(beforesource);
				 });
            }

            function SubmitMissing(src) {
	            alert(src + " has been reported missing");
            }

Am sure the above code could be slightly improved. A couple lines of css and javascript and the user experience is lifted from red crosses to, “yeah am not here please report I am missing”.

For full source code and a demo check out : http://dev.siphilp.co.uk/jQuery-Check-Image-User-Report-Missing.htm

  1 Comment

  1. Pingback: Using jQuery to tidy up missing Images Part 3 | Simon Philp

Leave a Reply

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

CAPTCHA Image

*

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>